1. بناء بيئة تطوير bootstrap
1. تنزيل bootstrap ، http://www.bootcss.com/
2. قم بتنزيل jQuery والوصول إلى http://code.jquery.com/jquery-2.0.3.min.js مباشرة من خلال IE
3. استيراد ملفات Bootstrap و JS و CSS و. يمكن تعديل هذه العلامة لعرضها على معظم الأجهزة المحمولة ، مثل لولا 9 ... ، للتوافق أدناه IE9.
القالب على النحو التالي
<! doctype html> <html> <head> <meta charset = "utf-8"> <meta content = "width = width device ، inial-scale = 1.0" name = "viewport"/> <title> insert title هنا </title> <link href = "css/boottrap.min.css" ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! src = "js/bootstrap.min.js"> </script> </head> <body> <viv> </viv> </body> </html>
الثاني. نظام الشبكة
1. Boostrap يفصل سطح المكتب إلى جدول مع 12 صفًا * N من أعمدة للتخطيط ، وهو جوهر boostrap.
2. يتم استخدام Row لتقسيم مستوى الصف ويجب أن يتم تضمينه تحت.-container.
3. Col-xx-* أداء تقسيم مستوى العمود ، كما هو موضح في الشكل أدناه
<viv> <viv> <viv> 1 </viv> <viv> 2 </viv> <viv> 3 </viv> <viv> 4 </viv> </viv> <viv> <viv> 5 </viv> <viv> 6 </viv> <viv> 7 </viv> <viv>
4. إزاحة العمود ، يتم تنفيذها من خلال Col-XX Offset-*
<viv> <viv> <viv> 1 </viv> <viv> 2 </viv> <viv> 3 </viv> <viv> 4 </viv> </viv> <viv> 5 </viv> <viv> 6 </viv> <viv> 7 </iv> </viv> </viv> </viv> </div> </div>
5. يمكن تحقيق فرز الأعمدة بواسطة .col-xx-push-* و .col-xx-pull-* لتنفيذ الفرز الأيسر أو الأيمن للأعمدة.
<viv> <viv> <viv> 1 </viv> <viv> 2 </viv> <viv> 3 </viv> </viv> <viv> <viv> 5 </viv> <viv> 6 </viv> <viv> 7 </viv> </div> </viv> </viv>
6. أعمدة التعشيش و ROW في العقيد.
<viv> <viv> 1 </viv> <viv> 2 </viv> <viv> 3 </viv> <viv> <viv> <viv> <viv> 5 </viv> <viv> 6 </viv> <viv> 7 </viv> </viv> </viv> </viv> </div> </viv> </div> </div> </div> </viv> </viv> </viv> </div>
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.