تستخدم العديد من الشركات الآن إطار Bootstrap في التطوير. Bootstrap هو عمل فريق من Twitter ، والذي يبسط بشكل كبير تطورنا الأمامي. (سألخص بعض الاستخدامات الأقل لاحقًا)
تعلم استخدام API أقترح عليك عرض واجهة برمجة التطبيقات الرسمية مباشرة ، العنوان: http://www.bootcss.com/
فيما يلي بعض العروض المستهدفة:
أدناه سألخص التقنيات والمبادئ في عرض تجريبي صغير:
الخطوة الأولى هي تنزيل الحزمة المضغوطة من bootstrap على http://www.bootcss.com/ ، إنشاء index.html جديد ، استخدم Sublime أو محرر آخر لفتح صفحة الفهرس ، والدليل بعد الضغط هو
الخطوة 2 : انسخ قالبًا أساسيًا من الموقع الرسمي http://v3.bootcss.com/getting-started/ لتسهيل التطوير اللاحق.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contablate" content = "ie = edge"> <meta name = "viewport" content = "width = width ، وأي محتوى آخر * يجب * متابعتها! -> <title> bootstrap 101 قالب </title> <!-bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim و dreelD.js لدعم IE8 لعناصر html5 و media Quieries-> <! <!-[if lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respond.js/1.4 <! </h1> <!-jQuery (ضروري لمكونات JavaScript الخاصة بـ BootStrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <!-تضمين جميع المكونات الإضافية المترجمة (أدناه) ، أو تضمين الملفات الفردية-> < src = "js/bootstrap.min.js"> </script> </body> </html>
1) ملاحظة: يجب أن تكون الإشارة إلى jQuery.js أمام bootstrap.min.js ، ومن الأفضل تنزيل jQuery.js يدويًا ووضعها في مسار JS ، <script src = "js/jquery.min.js"> </script>
لأنه في وقت لاحق عندما كنت محاكاة ، وجدت أن تأثيرات الرسوم المتحركة المنسدلة والكاروسيل قد اختفت ، ووجدت أنه تم تنزيل ملف jQuery للقالب الأساسي وقد لا يكون متصلاً بالإنترنت ، لذلك لم أقم بتنزيله. من الأفضل أن أقتبس من بنفسي.
2) ملاحظة: يتم وضع مرجع CSS فوق الصفحة ويتم وضع مرجع JS أسفل الصفحة ، لأن CSS يحتاج إلى تحميل الصفحة المقدمة أولاً ، ويحتاج JS إلى التحميل والتنفيذ بعد اكتمال عرض الصفحة ؛ ويتم تكييف عبارات meta للأجهزة المحمولة مع: <meta name = "viewport" content = "width = width device ، sciale = 1">
الخطوة 3 ، شريط الملاحة
1) التأثير المتمركز: يجب تغيير سائل الحاويات إلى الحاوية
2) تغيير اللون الأبيض إلى الأسود مع تأثير التباين: <v>
3) تم إصلاح شريط التنقل إلى الأعلى ويضيف سمات فئة زمنية: قمة اللحم المفروم
<nav> <!-يتم تجميع العلامة التجارية والتبديل لعرض أفضل للهاتف المحمول-> <viv> <button type = "button" data-toggle = "collapse" data-arget = "#bs-example-navbar-collapse-1" aria-Expanded = "false"> toggle savigation </span> </span> <a href = "#"> zootopia </a> </div> <!-اجمع روابط NAV والنماذج والمحتوى الآخر للعبث-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <li> <a href = "#" الوصف </a> </li> <li> <a href = "#"> الميزات </a> </li> <li> <a href = "#"> حول </a> </li> </viv> <!-/.
4) سيغطي شريط التنقل الجزء العلوي من الجسم ، لذا أضف النمط
<type type = "text/css"> body {padding-top: 50px ؛ } </style>5) عناصر التنقل المميزة إضافة قوائم منسدلة
<li> <a href = "#" data-toggle = "tropdown"> الميزات </a> <ul> <li> <a href = "#"> animal 1 </a> </li> <li> <a href = "#"> Animal 2 </a> </li> <li> 4 </a> </li> </li> </li>
لاحظ أن محتويات القائمة الفرعية متداخلة في علامة LI الخارجية ، وأن علامة LI لها منسدلة فئة ، والسرقة الفرعية هي أيضًا علامة UL ، والفئة هي القائمة المنسدلة. انظر أعلاه للاطلاع على علاقة رسم الخرائط المحددة.
الخطوة 4: زيادة تأثير الدوران ونسخ وتعديل وحدة carousel لمكون bootstrap:
<div id = "carousel-example-generic" dative = "carousel"> <!-مؤشرات-> <ol> <li t-arget = "#carousel-example-generic" data-slide-to- "0"> </li> <li data-target = "#carousel-example-generic-generic" data-arget = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <!-Wrapper for Slides-> <div rom = "listbox"> <viv> <img src = "image/jpg" موقف عرض المنزل الأنثوي الذي يفتح الرقمين اللذين يحدثان في البلد </p> </viv> </viv> <viv> <img src = "image/2.jpg"> <viv> الأرقام التي تحدث في البلد </p> </viv> </viv> <viv> <img src = "image/3.jpg"> <viv> <h1> Zootopia 1 </h1> <p> زيارة موقع المنزل الأنثوي الذي يوسع تجربة موقع المنزل الأنثوي الذي يفتح الرقمين في البلاد </p> HREF = "#carousel-example-generic" rol = "button" data-slide = "prev"> <span aria-hidden = "true"> </span> <span> الصفحة السابقة </span> </a> <a href = "#carousel-example-generic" roly = "button". </a> </div>
1) من أجل عدم وجود مساحة أو فجوات فارغة عند تدوير الصورة ، أضف النمط
.carousel {الارتفاع: 500px ؛ خلفية اللون: #000 ؛ } .carousel .item {height: 500px ؛ خلفية اللون: #000 ؛ } .carousel img {width: 100 ٪ ؛ }2) اضبط نمط النص لجعله أكثر جمالا
.casousel-caption p {margin-bottom: 20px ؛ حجم الخط: 20 بكسل ؛ Line-Leight: 1.8 ؛ }الآثار الحالية هي كما يلي
دعنا نستمر: (يتم تحديث الترميز ...)
تم تحديث الجزء الثاني ، العرض التوضيحي في حالة التطوير الأمامية على أساس bootstrap (II)
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوع رائع لك: Bootstrap التعلم التعليمي