Bootstrap 3 هو المحمول أولاً ، ويبدأ رمز bootstrap بأجهزة شاشة صغيرة (مثل الأجهزة المحمولة والأجهزة اللوحية) ثم يتوسع إلى المكونات والشبكات على أجهزة الشاشة الكبيرة (مثل أجهزة الكمبيوتر المحمولة ، أجهزة سطح المكتب).
1. استراتيجية أولوية الجهاز المحمول
1. المحتوى: تحديد ما هو أهم شيء.
2. التصميم
التصميم التفضيلي للعرض الأصغر.
يفضل CSS الأساسية للأجهزة المحمولة ، وتستهدف استعلامات الوسائط على الأجهزة اللوحية وأجهزة الكمبيوتر المكتبية.
3. تعزيز تدريجيا
أضف عناصر مع زيادة حجم الشاشة.
مع زيادة حجم الشاشة أو المنفذ ، سيتم تقسيم النظام تلقائيًا إلى ما يصل إلى 12 عمودًا. كما هو مبين في الشكل أدناه:
2. مبدأ العمل لنظام شبكة bootstrap (نظام الشبكة)
يقوم نظام الشبكة بإنشاء تخطيطات للصفحات من خلال سلسلة من الصفوف والأعمدة التي تحتوي على محتوى. فيما يلي قائمة بكيفية عمل نظام شبكة bootstrap:
1. يجب وضع الصفوف في فئة. -container للحصول على المحاذاة والحشو المناسبة.
2. استخدم الصفوف لإنشاء مجموعات أفقية من الأعمدة.
3. يجب وضع المحتوى في العمود ، ويمكن أن يكون العمود فقط عنصرًا مباشرًا للطفل في الصف.
4. يمكن استخدام فئات الشبكة المحددة مسبقًا ، مثل .Row و .col-XS-4 ، لإنشاء تخطيطات الشبكة بسرعة. يمكن استخدام فصول أقل هجينة لمزيد من التخطيطات الدلالية.
5. الأعمدة إنشاء فجوات بين محتويات العمود من خلال الحشو. هذا الهامش الداخلي سلبي من خلال الهامش على .Rows ، مما يشير إلى إزاحة الصف في العمود الأول والأخير والأخير.
7. يتم إنشاء نظام الشبكة من خلال تحديد الاثني عشر الأعمدة المتاحة التي تريد أن تمتد. على سبيل المثال ، لإنشاء ثلاثة أعمدة متساوية ، استخدم ثلاثة .col-XS-4.
3. التحقيق الإعلامي
استفسارات الوسائط هي أنيقة للغاية "قواعد CSS الشرطية". ينطبق فقط على بعض CSS بناءً على بعض الشروط المحددة. إذا تم استيفاء هذه الشروط ، يتم تطبيق النمط المقابل.
تتيح لك استعلامات الوسائط في Bootstrap نقل المحتوى وعرضه وإخفاءه بناءً على حجم منفذ العرض. يتم استخدام استعلام الوسائط التالي في الملف الأقل لإنشاء عتبات نقطة توقف مهمة في نظام شبكة bootstrap.
/* جهاز Ultra-Small (الهاتف المحمول ، أقل من 768px)* //* لا يوجد استعلام عن الوسائط افتراضيًا في bootstrap*//* جهاز صغير (جهاز لوحي ، بدءًا من 768px)*/ @media (min-width: @screen-sm-min) {...}/* mediac جهاز كبير (سطح مكتب كبير ، بدءًا من 1200 بكسل) */ @media (min-width: @screen-lg-min) {...}نقوم أحيانًا بتضمين Max-Width في رمز الاستعلام عن الوسائط لدينا ، مما يحد من تأثير CSS على مجموعة أصغر من أحجام الشاشة.
media (max-width: @screen-xs-max) {...} media (min-width: @screen-sm-min) و (max-width: @screen-sm-max) {...هناك جزأان للاستعلام عن الوسائط ، أولا مواصفات الجهاز ، ثم قاعدة الحجم. في الحالة أعلاه ، يتم تعيين القواعد التالية:
دعونا نلقي نظرة على السطر التالي من الكود:
media (min-width: @screen-sm-min) و (max-width: @screen-sm-max) {...}
بالنسبة لجميع الأجهزة التي تحتوي على عرض Min-Width: @screen-sm-min ، سيتم إجراء بعض المعالجة إذا كان عرض الشاشة أصغر من @screen-sm-max.
4. خيارات الشبكة
يلخص الجدول التالي كيفية عمل نظام شبكة bootstrap عبر أجهزة متعددة:
5. بنية الشبكة الأساسية
فيما يلي الهيكل الأساسي لشبكة bootstrap:
<viv> <viv> <viv> </viv> <viv> </viv> </viv> <viv> ... </div> </viv> <viv> ....
فيما يلي مثال رمز محدد:
<viv> <h1> مرحبًا ، العالم! </h1> <viv> <!-الهاتف المحمول الجهاز الصغير (<768px)-> <div style = "background: #f00" style = "background: #4cff00"> 5 </viv> <div style = "background: #0ff"> 6 </viv> <div style = "background: #0094ff"> 7 </viv> <div style = "background: #0094ff"> 7 </viv> <div style = "b200ff" style = "background: #ff006e"> 10 </viv> <div style = "background: #ac5050"> 11 </viv> <div style = "background: #54bd4f"> 12 </viv> </viv> <div> <! #ffd800 "> 1 </viv> <div style =" background: #ac5050 "> 1 </viv> </viv> <div> <!-كمبيوتر سطح المكتب متوسطة الحجم (≥992px)-> <div style =" background: #ac5050 "> 1 </div> <div style: #54bd4f" (≥1200px) -> <div style = "background: #ac5050"> 1 </div> <div style = "background: #54bd4f"> 1 </viv> </viv> </viv> </viv>
6. عمود الإزاحة
الإزاحة هي ميزة مفيدة لمزيد من التخطيطات الاحترافية. يمكن استخدامها لتوفير مساحة أكبر للعمود. على سبيل المثال ، لا تدعم فئات .col-xs =* إزاحة ، ولكن يمكنها ببساطة تحقيق ذلك باستخدام خلية فارغة.
لاستخدام التعويضات على شاشات الشاشة الكبيرة ، استخدم فئة. ستزيد هذه الفئات من الهامش الأيسر للعمود بواسطة العمود * ، حيث يتراوح نطاق * من 1 إلى 11.
في المثال أدناه ، لدينا <Div> .. </viv> ، وسوف نستخدم .Col-MD-OfSet-3 Class لتوسيط هذا Div.
<viv> <viv> <div style = "background-color: #dedef8 ؛"> <p> اختبار العمود الإزاحة --- 3 أعمدة تقابل إلى اليمين هنا </p> </viv> </viv> <viv> <div style = "background: #f00"> 1 </div> <div style = "b2b0b0" style = "background: #ffd800"> 4 </viv> <div style = "background: #4cff00"> 5 </viv> <div style = "background: #0ff"> 6 </viv> <div style = "background: #0094ff"> 7 </viv> <div style = "b200ff" style = "background: #ff006e"> 10 </viv> <div style = "background: #ac5050"> 11 </viv> <div style = "background: #54bd4f"> 12 </viv> </viv> </viv> </viv>
تأثير العرض:
7. الأعمدة المتداخلة
لتسوية الشبكة الافتراضية في المحتوى ، أضف .Row جديد وأضف مجموعة من أعمدة .col-md-* ضمن عمود .col-md-*. يجب أن تحتوي الصفوف المتداخلة على مجموعة من الأعمدة ، ولا يمكن أن يتجاوز عدد الأعمدة في هذه المجموعة من الأعمدة 12 (في الواقع ، لا يوجد شرط يجب أن تشغل 12 عمودًا).
في المثال التالي ، يحتوي التصميم على عمودين ، ويتم تقسيم العمود الثاني إلى صفين وأربعة مربعات.
<viv> <viv> <div style = "background: #b2b0b0"> العمود الأول < /div> <div style = "background: #dedef8" </viv> <viv> <div style = "background: #ff00dc"> أنا راضٍ عن ثلاثة <br/> <br/> <br/> </viv> <div style = "background: #ff006e"> أنا راضٍ
تأثير العرض:
8. فرز العمود
ميزة أخرى مثالية لنظام شبكة bootstrap هي أنه يمكنك بسهولة كتابة الأعمدة بترتيب واحد ثم عرضها في أخرى.
يمكنك بسهولة تغيير ترتيب أعمدة الشبكة المدمجة مع .col-md-push-* و .col-md-pull-* ، حيث يتراوح* من 1 إلى 11.
في المثال أدناه ، لدينا تخطيطان للعمود ، العمود الأيسر ضيق ، مثل الشريط الجانبي. سوف نستخدم فئات .col-md-push-* و .col-md-pull-* لتبادل ترتيب العمودين.
<viv> <viv> <div style = "background: #ff00dc"> اليسار </div> <div style = "background: #ff006e"> يمين </div> </div> </viv>
تأثير العرض:
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.