يعد استخدام إطار Bootstrap للتصميم والتطوير اتجاهًا شائعًا نسبيًا في العالم. عند تحسين المنتجات الجديدة ، ستختار العديد من شركات البرمجيات إطار التطوير هذا بسبب مزاياه الشاملة في JS والضوابط.
إطار Bootstrap هو إطار تصميم واجهة المستخدم في الواجهة الأمامية. يوفر واجهة واجهة المستخدم الموحدة وتبسيط عملية تصميم واجهة المستخدم واجهة الواجهة (العيب هو أن الواجهة مخصصة ، لذلك لا يوجد مجال كبير للتعديل). لا سيما تخطيط وقت الاستجابة الحالي (أفهم أن الصفحة تعتمد تخطيط عناصر الصفحات المختلفة وفقًا لقرارات مختلفة) ، والتي يتم دعمها جيدًا في Bootstrap. طالما تم تعيين الخصائص ببساطة ، يمكن تنفيذ تخطيط وقت الاستجابة تلقائيًا ، مما يؤدي إلى تبسيط عملية واجهة المبرمجين بشكل كبير.
لذلك ، أستخدم إطار Bootstrap لتنفيذ الواجهة التالية. على الرغم من أنها بسيطة ، إلا أنها غير عادية (إذا كنت ترغب حقًا في تنفيذها بنفسك ، إلا أنني لا أعرف ما إذا كان هذا هو عام القرد والحصان)
تنقسم الصفحة بأكملها إلى عدة أجزاء ، والتي يتم تنفيذها باستخدام رمز العينة على الموقع الرسمي لـ Bootstrap ، وأخيراً تم تشكيلها في صفحة. يتم عرض مخططات كل جزء في الشكل التالي
بعد ذلك ، اشرح رمز كل جزء بدوره
أولاً ، بناء صفحة فارغة ، الرمز كما يلي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ie = edge "> <meta name =" viewport "content = width = width device = 1.0 name = "uptor" content = ""> <title> bootstrap </title> <link rel = "STYLESSHEET" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.cs href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[if ie 9]> <script src = "../../ docs-assets/js/ie8-file-warning.js"> </script> <! lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! صورة الخلفية: url (line.png) ؛ } </style> </head> <body> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>
لاستخدام إطار bootstrap ، يجب أن تشير إلى ملف إطار bootstrap في الصفحة. هناك أربعة في المجموع: bootstrap.min.css ، bootstrap-theme.min.css ، jquery -1.1.2.min.js ، bootstrap.min.js
فقط من خلال الإشارة إلى هذه الملفات ، يمكنك استخدام عناصر واجهة المستخدم المختلفة التي يوفرها إطار bootstrap.
بعد ذلك ، كما هو موضح في الشكل أعلاه ، اشرح رموز كل جزء بالتسلسل
وصف أعلى:
فكرة تصميم الصفحة بأكملها هي وضع الصفحة بأكملها على لوحة ، والنص الموجود في الأعلى هو رأس اللوحة
صفحة إطار bootstrap هي تخطيط شبكة 12 عمود. لذلك قمت بتقسيم الصفحة بأكملها إلى ثلاثة أجزاء. هناك 3 أعمدة فراغات عريضة على اليسار واليمين ، و 6 أعمدة توسيع لوحة واحدة (لوحة).
الرمز كما يلي: الجزء المتبقي من الكود في <viv> </viv> بالتسلسل
<Body> <viv> <h1 style = "line-height: 2em ؛"> </h1> <br/> <viv> <viv> </viv> <viv> <viv> <h3> <strong> Quary Score Procession Score Query </strong> </h3> </viv> </div> </div> </div> </strong> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js
النص السريع
يستخدم النص المطالب مكون التنبيه في إطار bootstrap ، والرمز كما يلي:
<viv> <button type = "button" data-dismiss = "Alert" Aria-Hidden = "True"> × </button> <strong> ملاحظة! </strong> الدرجات لهذا الموقع هي من الموقع الرسمي 12333. للحصول على التفاصيل ، يرجى الرجوع إلى موقع الويب الرسمي </div>
نموذج بطاقة الهوية وزر الاستعلام
يجب أن يكون نموذج بطاقة الهوية ونموذج الحساب اللاحق في شكل واحد. نموذج الهوية وأزرار الاستعلام هي مجموعات من عناصر النماذج التي تستخدم إطار bootstrap. استخدم مجموعة الإدخال لدمج مربع النص والزر. يوفر إطار bootstrap آثارًا مثل العلامات المائية والمعالم البارزة. أضف الكثير من الألوان إلى النموذج
<form rob rob = "form" name = "form1"> <viv> <label for = "idcard"> الرجاء إدخال رقم المعرف الخاص بك </label> <div> <input type = "text" id = "idcard" name = "idcard" pleasholder = "idcard number"> <span> <button type = > الاستعلام </button> </span> </viv> </form>
نموذج الموضوع
نماذج الحساب هي أيضًا مجموعات من عناصر النماذج التي تستخدم إطار bootstrap. استخدم مجموعة الإدخال لدمج مربع النص (الإدخال) ، الزر (الزر) وقائمة المنسدلة (UL).
يمكنك إدخال الموضوع مباشرة في مربع النص ، أو يمكنك تحديد الموضوع في القائمة المنسدلة. يتمثل التنفيذ المحدد في استخدام $ ('#موضوع'). val ('Computer Operator') ورموز أخرى لتغيير المحتوى في مربع النص في حدث النقر (انقر) من الارتباط التشعبي (A). يقع نموذج الحساب أسفل نموذج المعرف ، داخل النموذج (النموذج)
الرمز كما يلي:
<div> <label for = "subsic"> الرجاء إدخال الموضوع الذي تبحث عنه </label> <viv> <input type = "text" id "id =" موضوع "name =" الموضوع "placeholder =" حساب فارغ يعني الاستعلام عن جميع الموضوعات "> <viv> <button type =" button "data-toggle =" togdow OnClick = "$ ('#موضوع') onClick = "$ ('#موضوع')معلومات خطأ الاستعلام
عند النقر فوق زر الاستعلام ولم يتم العثور على أي سجل ، يتم عرض رسالة خطأ الاستعلام. مثل النص المطبخ السابق ، يستخدم مكون التنبيه في إطار bootstrap.
ما إذا كانت هذه المعلومات معروضة تتطلب أيضًا تعاون الرمز الديناميكي للخلفية. يقرر الرمز الديناميكي ما إذا كان سيتم عرض المعلومات بناءً على نتائج الاستعلام (إذا لم يكن هناك سجل ، فسيتم عرض المعلومات). لم تتم مناقشة الكود الديناميكي في هذه المقالة.
الموقع وراء النموذج ، والرمز كما يلي:
<div> <button type = "button" data-dismiss = "Alert" aria-hidden = "true"> × button> <strong> ملاحظة! </strong> لم يتم العثور على نتائج ، يرجى التحقق من رقم المعرف والموضوعات والتحقق مرة أخرى </div>
شكل الصف
عند النقر فوق زر الاستعلام ، يتم عرض نموذج النتيجة عند العثور على السجل. وبالمثل ، فإن عرضه يتطلب أيضًا تعاون الكود الديناميكي في الخلفية.
يمكن أن يظهر رسالة خطأ واحدة فقط ونموذج النتيجة في نفس الوقت
الرمز كما يلي:
<viv> <table cellpacing = "0" cellpadding = "0"> <tr> <th scope = "col"> <span style = "color: white"> الموضوعات </span> </th> <th scope = "col"> <span style = "color: white"> score </td> </tr> <td> <td> مشغل الكمبيوتر </td> <td> ممتاز </td> </tr> <tr> <td> عامل تشغيل متعدد الوسائط </td> <td> جيد </td> </tr> <tr> <td> تصميم الويب </td> <td> فشل </td> </tr> </div>
يتم تنفيذ هذه الصفحة باستخدام إطار bootstrap. بفضل قوة إطار bootstrap ، لم يعد تصميم واجهة المستخدم مهمة صعبة. لكن Bootstrap هو مجرد إطار واجهة المستخدم ، ويعتمد التميز على تعاون الكود الديناميكي في الخلفية.
عنوان URL التالي هو وظيفة المؤلف باستخدام الواجهة أعلاه بالإضافة إلى الكود الديناميكي الخلفي (PHP) لتحقيق الاستعلام عن درجات اختبار المهارات المهنية (Shanghai فقط). يمكنك الذهاب وإلقاء نظرة وإعطاء تعليقات قيمة (صالحة لمدة شهر واحد).
http://bertin.sturgeon.mopaas.com/
رمز واجهة المستخدم الكامل كما يلي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ie = edge "> <meta name =" viewport "content = width = width device = 1.0 name = "uptor" content = ""> <title> bootstrap </title> <link rel = "STYLESSHEET" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.cs href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[if ie 9]> <script src = "../../ docs-assets/js/ie8-file-warning.js"> </script> <! lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! صورة الخلفية: url (line.png) ؛ } </style> </head> <body> <viv> <h1 style = "line-height: 2em ؛"> </h1> <br/> <viv> <viv> </viv> <viv> <viv> <h3> <h3> aria-hidden = "true"> × </button> <strong> ملاحظة! </strong> الدرجات التي تم استفسارها على هذا الموقع هي من الموقع الرسمي لـ 12333. للحصول على تفاصيل ، يرجى الرجوع إلى الموقع الرسمي </div> <form rob> placeholder = "id number"> <span> <button type = "button" onClick = "form1.submit () ؛" > الاستعلام </button> </span> </viv> <viv> <label for = "الموضوع"> الرجاء إدخال الموضوع الذي تريد الاستعلام عنه </label> <div> <input type = "text" id = "موضوع" name = "الموضوع" placeholder = "account ، excloy </span> HREF = "#" onClick = "$ ('#موضوع'). val ('computer dorpator') ؛"> مشغل الكمبيوتر </a> </li> <li> <a href = "#" onClick = "$ ('#subject'). val ('Web Design') ؛ onClick = "$ ('#موضوع'). val ('multimedia') ؛"> الوسائط المتعددة </a> </li> </ul> </viv> </viv> </fum <viv> <table cellpacing = "0" cellpadding = "0"> <tr> <th scope = "col"> <span style = "color: white"> الموضوعات </span> </th> <th scope = "col"> <span style> المشغل </td> <td> ممتاز </td> </td> <td> مشغل الوسائط المتعددة </td> <td> جيد </td> </td> تصميم الويب </td> <td> </td> </tr> </td> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.jsما سبق هو المعرفة ذات الصلة حول استخدام إطار bootstrap لإنشاء رموز مثال للواجهة لصفحات الاستعلام المقدمة لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!