1. مقدمة
يحتوي Bootstrap على نظام شبكة متدفق مستجيب للهواتف المحمولة. مع زيادة حجم جهاز الشاشة أو حجم المنفذ ، سيتم تقسيم النظام تلقائيًا إلى ما يصل إلى 12 عمودًا . ويشمل فئات سهلة الاستخدام مسبقًا ، والمزيج القوي لتوليد تخطيطات دلالية.
2. خيارات النقطية
يستخدم bootstrap3.x أربعة خيارات الشبكة لتشكيل نظام الشبكة. مقدمة هذه الخيارات الأربعة على الموقع الرسمي على النحو التالي. كثير من الناس لا يفهمون ذلك. هنا سأشرح الاختلافات بين خيارات الشبكة الأربعة بالتفصيل. في الواقع ، واحدة فقط من الاختلافات هي أنها مناسبة لأجهزة الشاشة ذات الأحجام المختلفة . دعونا نلقي نظرة على عنصر بادئة الفصل. دعنا نسمي خيارات الشبكة الأربعة هذه للبادئة. هم Col-XS و Col-SM و Col-MD و Col-LG. أولئك الذين يفهمون اللغة الإنجليزية سيعرفون أن LG هو اختصار كبير ، MD هو اختصار منتصف ، SM هو اختصار صغير ، و XS هو اختصار ***. يعكس هذا التسمية عرض الشاشة المختلفة التي تتكيف معها هذه الفئات. أدناه نقدم خصائص هذه الفئات.
يتيح لك الجدول التالي معرفة كيفية عمل نظام Bootstrap النقطي على أجهزة شاشة متعددة.
3. إزاحة العمود
استخدم .COL-MD-OFSET-* لتعويض العمود إلى اليمين. تضيف هذه الفئات جميع الأعمدة إلى الهامش الأيسر للعمود باستخدام * المحدد. على سبيل المثال ، تم تحويل .COL-MD-4.
4. الأعمدة المتداخلة
لعش المحتوى باستخدام النقطات المدمجة ، يمكن القيام به عن طريق إضافة .Row جديد وسلسلة من أعمدة .col-md-* في أعمدة .col-md-* الموجودة بالفعل. يجب أن تضيف الأعمدة الواردة في الصفوف المتداخلة ما يصل إلى 12 .
5. فرز العمود
يمكن تغيير ترتيب الأعمدة بسهولة باستخدام .col-md-push-* و .col-md-pull-*.
قضية
<٪@ page language = "java" pageencoding = "utf-8" ٪> <٪ string path = request.getContextPath () ؛ ٪> <! doctype html> <html lang = "zh-cn"> <head> <head> raster </title> http-equiv = "content-type" content = "text /html ؛ charset = utf-8" /> <meta http-equiv = "content-language" content = "zh-cn" /> <meta name = "uputer" content = "[email protected]" المحدودة " /> <meta http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "expires" content = "0" http-equiv = "description" content = "this is is my page"> <jsp: include page = "/demo/js_bootstrap.jsp"/> <style type = "text/css">. RGBA (86 ، 61 ، 124 ، .15) ؛ الحدود: 1PX Solid RGBA (86 ، 61 ، 124 ، .2) ؛} </style> <script type = "text/javaScript"> $ (function () {}) ؛ <viv> <viv> .col-lg-8 </viv> <viv> .col-lg-4 </iv> </viv> <br/> <b> col-md-*الاستخدام </b> <viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </div> <viv> .col-md-1 </viv> <viv> .col-md-1 </div> .col-md-- 1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </viv> <viv> .col-md-1 </fiv> <viv> .col-md-1 </fiv> <viv> .col-md-1 </div> <br/> <b> col-md-8 </viv> <viv> .col-md-4 </viv> </viv> <br/> <b> col-sm-*الاستخدام </b> <viv> <viv> .col-SM-8 </viv> <b> col-xs-*الاستخدام </b> <viv> <viv> .col-xs-8 </viv> <viv> .col-xs-4 </viv> </viv> <br/> <b> إزاحة العمود: COL-MD-OPSEST-*</b> <viv> <viv> .col-MD-4 </viv> <viv> .col-MD-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </fiv> <di v> .col-md-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </fiv> <viv> .col-m D-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </di V> <viv> .col-MD-4 </viv> <viv> .col-MD-4 </viv> <viv> .col-md-4 </fiv> <viv> .col-md-4 </viv> <viv> .col-MD-4 </viv> </viv> <br/> <b> إزاحة العمود: Col-MD-Ofset-*</b> <viv> <viv> .col-md-4 </viv> <viv> .col-md-4 </viv> <viv> .col-md .col-md-4 </div> </viv> <div> .col-md-Ofset-3 </viv> </viv> <viv> <viv> .col-md-6 .col-md-md-3 </viv> </viv> <br/> <b> أعمدة متداخلة: يجب أن تكون الأعمدة الموجودة في الصف المتداخل تساوي 12 </b> <viv> 2: .col-md-6 </viv> </viv> </viv> <br/> <b> فرز العمود: .col-md-push-* و .col-md-pull-* </b> <viv> </body> </html>
التأثير التجريبي
ما سبق هو المعرفة ذات الصلة بنظام شبكة bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك!