أكبر فائدة من bootstrap للمطورين هي تخطيطها المستجيب وبعض الأساليب الممتازة.
الآن سأقدم بعض الخطوات وبعض الأشياء الشائعة الاستخدام لاستخدام bootstrap.
1. اكتب الرأس
<Head> <meta charset = "utf-8"> <!-من أجل جعل IE استخدام أحدث وضع عرض ، أضف هذه العلامة-> <meta http-equiv = "x-ua متوافق" content = "ie = edge"> <! name = "viewport" content = "width = width device ، inial-scale = 1"> <title> learnbootstrap </title> <!-ارجع إلى الملف مباشرة-> <link rel = "stylesheet" type = "text/css" href = "css/botstrap.min.css"> <swite cdn edder href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-من أجل دعم IE9 أو أدناه ، أضف هذه-> <!-[إذا كان lt ie 9]> <!-دعه يدعم علامات H5-> <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script> <!-[endif]-> </head>
2. introduce JS
يمكن كتابة هذا في الجسم
<!- ملف jQuery. تأكد من تقديم-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>< 0 src = "// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
3. استخدم فئة الحاوية
فئة الحاويات هي فئة DIV شائعة الاستخدام
استخدم بشكل أساسي وظيفة التركيز
<viv> مرحبًا </div>
4. استخدم نظامًا نقطيًا
النظام النافذة هو نظام تخطيط شائع الاستخدام للغاية للتمهيد
استخدام بسيط على النحو التالي
<viv> <!-XS يعني على الهاتف ، SM يعني على الجهاز اللوحي ، ويعني MD على سطح المكتب. تمثل الأرقام التالية عدد الأعمدة التي يتم شغلها. الشاشة الكاملة هي 12 عمودًا-> <!-المحتوى يتجاوز ارتفاع الشبكة ، وسيتم زيادة الارتفاع ، ولن يزداد العرض-> <!-الإزاحة يعني عدد الأعمدة التي سيتم نقلها إلى اليمين-> <Div> .col-XS-12 .COL-SM-6 .COL-MD-8.COL-XS-12 .COL-SM-2 .COL- .col-sm-6 .col-md-4 </viv> </viv> <viv> <!-دفع التحركات للخلف ، وسحب التحركات إلى الأمام-> <viv>.
يمكنك أن ترى أن النظام النافذة يمكنه ضبط العروض المختلفة وفقًا للأجهزة المختلفة.
5. استخدم النموذج
<viv> <!-جدول سريع الاستجابة ، المحتوى طويل جدًا لتحريك اليسار واليمين-> <div> <!-الجداول القليلة الأخيرة هي الجداول ذات الحدود. عندما يمر الماوس عبر صف tbody ، يكون اللون أغمق ويتم ضغط الجدول-> <table> <thead> <tr> <th> عنوان الجدول </th> المحتوى </th> <th> محتوى الجدول </th> <th> محتوى الجدول </th> <h> محتوى الجدول </th> <th> محتوى الجدول </th> <!-لون الصف هو beige-> <tr> <th> محتوى الجدول </th> <th> محتوى الجدول </th> محتوى الجدول </th> <th> محتوى الجدول </th> <h> جدول الجدول </th> </th> محتوى الجدول </th> محتوى الجدول </th> <th> محتوى الجدول </th> <h> محتوى الجدول </th> <h> محتوى الجدول </th> <th> محتوى الجدول </th> محتوى الجدول </th>
إذا كنت ترغب في تغيير لون شبكة معينة ، يمكنك إضافة فصول مثل TR في العلامة th
6. استخدام النماذج
الاستخدام الأساسي هو على النحو التالي
<viv> <form> <!-جزء من العنصر هو تخطيط الوالدين مجموعة النماذج ، مع التسمية والإدخال-> <div> <!-تسمية للمعرف الإدخال-> <label for = "exampleinputemail1"> عنوان البريد الإلكتروني </label> <! بالنسبة إلى = "exampleInpPassword1"> كلمة المرور </label> <إدخال type = "password" id = "examplempassword1" placeholder = "password"> </viv> <viv> <label for = "examplemptfile> exext example </label> <input type =" file "id =" exampleinputfile type = "checkbox">
إذا قمت بتعيين فئة النماذج على النموذج ، فسيتم عرض جميع العناصر على نفس السطر
إذا قمت بتعيين فئة النماذج على شكل أفقي ، فسيعرض كل مجموعة نموذجية سطرًا واحدًا ، ولكن عليك ضبط العرض بنفسك
يحب
<viv> <!-دع كل مجموعة مجموعة من مجموعة مخطط واحد ، ولكن يجب على كل طفل من مجموعة مجموعة النماذج تحديد العرض-> <Porm> <div> <label for = "emai" لـ = "passwor"> كلمة المرور </label> <div> <inputive type = "password" placeholder = "password" id = "passwor"> </viv> </viv> <button type = "subfer
عادةً ما نقوم بتسجيل حساب ، إذا كانت المعلومات غير صحيحة أو صحيحة ، فستطالب بجواره ، وسيكون لون مربع الإدخال مختلفًا.
توفر لنا Bootstrap هذه الوظيفة العملية للغاية
<div> <form> <!-يجب إضافة إضافة عنصرين إلى فئة الأصل div-> <!-حالة النجاح-> <div> <label for = "inputsuccess2"> الإدخال مع النجاح </label> <input type = "text" id = "inputsuccess2" aria-describedby = <!-هذه المعلومات مخفية ، مما يزيد من قابلية قراءة الكود-> <span id = "InputSuccess2Status"> (النجاح) </span> </div> <!-حالة التحذير-> <viv> <label for = "inputwarning2"> المدخلات مع تحذير </label> <input type = "text" id = "inputwarning2 aria-hidden = "true"> </span> <span id = "inputWarning2Status"> (تحذير) </span> </div> <!-حالة الخطأ-> <div> <label for = "inputerror2"> الإدخال مع error </bable> <input type = "text" id = <span id = "inpecterRor2Status"> (خطأ) </span> </viv> </form> </viv>
7. زر
الأزرار ضرورية
<!-خلفية بيضاء-> <button type = "button"> (النمط الافتراضي) الافتراضي </button> <!-الخلفية الزرقاء-> <button type = "button"> (تفضيلات) الأساسي </button> <!-الخلفية الخضراء-> <button type = "button> (success) </! (تحذير) تحذير </button> <!-الخلفية الحمراء-> <button type = "button"> (خطر) الخطر </button>
يمكنك أيضًا إضافة أبعاد إلى الفصل
<Type type = "button"> (زر كبير) زر كبير </button> <button type = "button"> (الحجم الافتراضي) الزر الافتراضي </button> <button type = "button"> (زر صغير) زر صغير </button> <button type = "button"> (زر صغير) زر صغير إضافي </زر>
ما سبق هو الخطوات والاستخدام الشائع للتمهيد
بعد استخدام هذا الإطار ، لم تزداد سرعة التطوير فحسب ، بل تحسنت الجودة أيضًا.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.