1: مقدمة في bootstrap
يعد Boostrap إطارًا شائعًا للتنمية في الواجهة الأمامية يحسن بشكل كبير من كفاءة تطوير الفرق الأمامية. يكمل Bootstrap مكونات تخطيط CSS الشائعة والمكونات الإضافية JavaScript ، مما يجعل من السهل على المطورين استخدامها. استخدم bootstrap لإنشاء صفحات مستجيبة بشكل جميل ومتوافق مع الأجهزة المحمولة.
الثاني: ميزات bootstrap
قم بتوفير مجموعة كاملة من المكونات الإضافية CSS ، وألواح نمط محددة مسبقًا ، ومجموعة من جداول المكونات الإضافية المستندة إلى JQuery. نظام حذف الشبكة المستجيبة المرنة. التنمية القائمة على الأجهزة المحمولة على أساس أقل وساس.
ثلاثة: استخدام bootstrap
1. الخطوة 1:
قم بتنزيل أحدث bootstrap على http://www.bootcss.com/. بعد إزالة الضغط ، هناك ثلاثة مجلدات ، تضع CSS و JS والخطوط على التوالي. هناك نسخة مضغوطة من ملفات CSS و JavaScript ، ويمكنك اختيار إصدار وفقًا لاحتياجاتك. يتم استخدام النسخة غير المضغوطة أثناء التطوير ويتم استخدام النسخة المضغوطة أثناء الإصدار.
2. عرض رمز القالب الثابت
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- compatible" content = "ie = edge ، chrome = 1"> <! name = "viewport" content = "width = width device ، scale-scale = 1"> <!-يجب وضع علامات meta الثلاثة أعلاه * في المقدمة ، ويجب على أي محتوى آخر * متابعتها! -> <title> نمط قالب bootstrap </title> <!-تقديم bootstrap-> <link href = "css/bootstrap.min.css" rel = "STYLESHEET"> <!-تقديم HTML5 Framework and Desponse.js لدعم IE8 و IE9. IE 8 يتطلب تعاون الاستجابة. repart.js لم يعد بإمكانه تشغيله تحت ملف: // ملف المسار: //-> <!-[إذا كان lt ie 9] يعني أن الأمر يسري في المتصفحات أدناه ie9-> <!-[إذا كان lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv. src = "// cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </script> <! </h1> <!-استشهد بالمكون الإضافي jQuery في الأسفل لتحقيق التأثيرات الديناميكية bootstrap-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><-introducing bootsrpts- src = "js/bootstrap.min.js"> </script> </body> </html>
3. الاستخدام الأساسي:
3.1 نظام الشبكة الإطار العام 12
جوهر Bootstrap هو نظام 12-TRAMTER. يقسم نظام الشبكة المكون من 12 منطقة محتوى صفحة الويب إلى 12 نسخة وفقًا للعرض. يمكن لمطوري الويب دمجها بحرية في أجزاء ، مما يسهل تخطيط صفحة الويب ويجعل التخطيط يبدو أنيقًا وموحدًا.
يوفر BootStarp حاوية نمط تسمى الحاوية. الحاوية هي أسلوب يركز على تلقائي ، وتكييف للغاية. باستخدام .-Container كأن نمط Div الخارجي لمحتوى صفحة الويب يمكنه بسهولة تطبيق 12 شبكة شبكة ويب الشبكة. علاوة على ذلك ، فإن نظام الشبكة المكون من 12 شبكة يتكيف مع حجم الشاشة ، وسيقوم Container تلقائيًا بضبط العرض الإجمالي ومتوسط عرض الشبكة وفقًا لحجم الشاشة.
COL-LG-N أقصى عرض عمود 95 بكسل في حالة> = 1200px بكسل ، قسمي. container12 بالتساوي مع عرض 95 بكسل لكل جزء. عرض الباقي 100 ٪
COL-MD-N الحد الأقصى عرض 78 بكسل ؛ تقسيم. container12 بالتساوي مع> = 992 بكسل بكسل المتبقية 100 ٪
Col-SM-N Maximum Column Width 60px في حالة> = 768px بكسل ، قسمي. container12 بالتساوي مع بقية الحالات 100 ٪
عرض عمود COL-XS-N يساوي حجم ميناء العرض 12. الحاوية 12 يساوي الشاشة من أي حجم
3.2 الأنماط الأساسية
(1) تم إلغاء أسلوب H1-H6 الخاص بـ Bootstrap ، ويتم إعادة تعريف الهوامش العلوية والسفلية الهامش H1-H3: 20 بكسل ؛ الهامش bottom-10px ؛ H3-H6 الهامش أعلى: 10 بكسل ؛ الهامش bottom-10px ؛
(2) حدد أربعة أنماط محاذاة ، وهي .Text-LEFT ، .TEXT-CENTER ، .TEXT-RIGH
(3) يوفر Bootstrap خمسة أنماط ألوان افتراضية ، أزرق رئيسي ، ناجح ناجح أخضر ، -معلومات زرقاء تحذير باللون البرتقالي ، -Danger Dangerous Red
3.3BTN مكون +BTN-Group
<button type = "button" class = "btn btn-primary"> زر المفتاح </button> تنبيه مكون <div class = "Alert" class = "Alert Alert-Danger> Danger Warning </viv>
المكونات العامة لها أربعة أحجام: XS فائقة SMALL ، SMM SM ، العادية ، LG الكبيرة. استخدم الطريقة هي حجم اسم المكون <button type = "button" class = "btn btn-lg"> زر فائق الزر </button> يمكن استخدام أنواع مختلفة من الأزرار من نفس المكون في تركيبة.
<button type = "button" class = "btn-primary btn-lg"> الزر مفتاح Ultra-large </button> <!-BTN-Group-> <viv> <button> home </butten> <button> protge> protect> </button> puttro قائمة <span> </span> </trine> <ul> <li> Lenovo </li> <li> Asus </li> <li> Apple </li> </ul> </viv>
3.4Table Table Style:
أضف عنصرًا مصلحًا لـ DIV إلى عنصر الجدول ، إضافة class = "الجدول المستجيب" إلى هذا div إنشاء جدول مقابل. عندما يكون Pixel Pixel أقل من 768 بكسل ، سيظهر شريط التمرير الأفقي.
<!-الجدول ، هناك ألوان متباعدة بين قوائم مخطط الجدول ، الجدول المستجيب للجدول Adaptive-> <viv> <tabl> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </td> <td> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </td> </table> </div>
3.5badge شارة
<!-شارات الشارات-> <br/> <a href = "#"
3.6 شريط التنقل
(1) شريط الملاحة كبسولة
<ul> <li> <a href = "#"> الديناميكي <span> 42 </af> </a> </li> <li> <a href = "#"> ملف تعريف </a> </li> <li> <a href = "#"
(2) شريط الملاحة الملصق
<!-قائمة الملاحة العلامة-> <ul> <li> <a href = "#news1" data-toggle = "tab"> أخبار الشركة </a> </li> <li> <a href = "#news2" data-toggle = "tab"> أخبار الصناعة </a> </li> <li> <a href = "#news3" إشعارات البيانات toggle = "tab"> </a> </li></ul> <viv> <div id = "news1"> <ul> <li> أخبار الشركة </li> </ul> </viv> <div id = "news2"> <ul> <li> أخبار الصناعة </li> </li> </div id = "news3" الإعلان </li> <li> إعلان إشعار </li> </ul> </viv> </viv>
3.7 مجموعة الإدخال
<!-إدخال+زر مزيج-> <viv> <type type = "text"> <span> <butten> البحث </button> </span> </viv>
3.8 كاروسيل
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-contable" content = "ie = edge ، chrome = 1" النمط </title> <link href = "../ css/bootstrap.min.css" rel = "STYLESHEET"> <style> body {background: #EEE} .item {position: resired ؛ الارتفاع: 400px} .item img {الموضع: النسبي ؛ العرض: 100 ٪ ؛ الارتفاع: 400px} .item p {الموضع: Absolute ؛ أعلى: 40 ٪ ؛ العرض: 100 ٪ ؛ اللون: #fff ؛ } .item h1 {position: absolute ؛ أعلى: 20 ٪ ؛ العرض: 100 ٪ ؛ اللون: #fff ؛ text-align: center} media (max-width: 768px) {.Slide {width: 100 ٪}} src = "../ js/desponse.min.js"> </script> <! data-ride = "carousel"> <!-slide mavigation-> <ol> <li data-target = "#mycarousel" data-slide-to = "0" data-arget = "#mycarousel" data-slide-to = "2"> </li> </lo> <div style = "height: 400px"> <!-first slide-> <div style = "height: 400px"> <IMG data-holdered = "true" المحتوى </p> <!-عنوان الشريحة-> <div> العنوان 1 </viv> </viv> <!-الشريحة الثانية-> <div> <img-holder-rendered = "true" src = "../ images/icon2 src = "../ images/icon3.png"> <viv> title3 </viv> </viv> <!-التنقل اليمين المباشر-> <a href = "#mycarousel" data-slide = "prev"> <span aria-hidden = "true"> </span> </span> </a> <a href = aria-hidden = "true"> </span> <span> التالي </span> </a> </viv> </viv> <script> $ (function () {$ ('#mycarousel'). on ('slide.bs.carousel' ، function () {// alert ("callback function") ؛}) ؛3.9 مجموعة لوحة
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> pootstrap page- pagin (tab) plugin </title> <link rel = "stylsheet" href = "../ css/botstrap.min.cs" src = "../ js/jquery.min.js"> </script> <script src = "../ js/bootstrap.min.js"> </script> <body> <div id = "pann-group"> <! HREF = "#collapseone"> عنوان اللوحة </a> </h4> </viv> <div id = "collapseone"> <viv> محتوى اللوحة </div> </div> <! العنوان </a> </h4> </viv> <div id = "collapsetwo"> <div> محتوى اللوحة </div> </viv> </viv> </body>
3.10 استعلام وسائل الإعلام
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "content content =" maximum-scale = 1.0 ، minimtum-scale = 1.0 ، styp-scalable = 0 ، width = width width ، inial-scale = 1.0 100 ٪ ؛ الارتفاع: 200 بكسل ؛ لون الخلفية: أحمر ؛}/*عندما يكون الحد الأقصى لعرض قبول هو 980 بكسل ، أي أن النمط الداخلي <= 980px يكون المفعول*/@media (max-width: 320px) {div {font-size: 10px ؛ خلفية: أصفر ؛ الاستعلام </div> </body> <script> window.onresize = function () {var mydiv = document.getElementSbyTagName ("div") [0]أربعة: أشياء يجب ملاحظتها
1. الحاوية ، العقيد - (النقطية) ، يجب أن يتم لفها في DIV منفصلة ، ثم تحديد محتويات أخرى فيه.
2. إذا كنت ترغب في تعيين الفصل أو المعرف الذي لا يمكن تعريفه للاستعلام عن الوسائط ، فلا يمكن تعريفه للعنصر وكتابة الفئة أو معرف تعريف Col - (Raster) إلى div ،
Medio هي الطريقة لكتابة أخطاء الفصل لتحديد استفسارات الوسائط <Div> aa </div>
الطريقة الصحيحة للكتابة هي
<viv> <viv> aa </viv> </viv>
3. إذا كنت تستخدم الحاوية لتحقيق تكيف الارتفاع ، فلا يمكنك إضافة ارتفاع إلى العنصر ، ويجب عليك ضبط تدفق الفائض للعنصر الأم.
4. بعد تحديد موقع الموضع للعنصر ، يكون عرض العنصر هو 0. إذا كنت تريد أن يتمركز العنصر ، فأنت بحاجة إلى إضافة عرض: 100 ٪ ؛ محاذاة النص: المركز ؛
5. عند استخدام علامة الإدخال ، إذا تم تعريف Col - - (Raster) لفئة الأصل الخاصة به ، يمكنك إضافة مراقبة النماذج إلى الإدخال لتعيين حجم الإدخال ككل فئة الأصل.