نظرًا لاحتياجات المشروع ، أخطط لتعلم إطار Bootstrap جيدًا. لقد تعلمت قليلا من قبل. الإطار ليس صعبًا بشكل عام ، ولكن لا يزال هناك العديد من الأشياء المعنية. إذا كنت ترغب في إتقانها بكفاءة ، فلا يزال عليك ممارسة المزيد.
1. ما هو bootstrap؟
ما هو BS؟ أي أن أداة الإطار الموحدة التي صممتها الصفحة الأمامية قد كتبت بأسلوب CSS.JS ، ويجب استخدامها فقط.
كيف تستخدم BS؟ يتم زيادة التأثير بشكل أساسي باستخدام فئات مختلفة ، ولكل فئة وظائف مختلفة مقابلة.
فوائد BS: يزيد من كفاءة التنمية ، ويجعل تصميم الصفحة أكثر جمالا ، ويدعم التنمية المستجيبة. تنزيل عنوان: https://github.com/foreverjiangting/bootstrap
وثائق التعلم: http://v3.bootcss.com/getting-started/
2. تصميم نمط CSS
1. استنادًا إلى وثائق HTML
يشير Bootstrap إلى بعض عناصر HTML ، لذلك يجب كتابة الرأس كعمود عينة موضح أدناه.
<! doctype html> --- يحتوي على إعلان مستند html5 ، جميع المتصفحات تعمل على تشغيل الوضع القياسي <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- continctived =" ie = edge " 3 يجب وضع علامات التعريف * أولاً ، وأي محتوى آخر * يجب أن يتبعها! تأكد من دعم التخطيطات المتجاورة-> <title> bootstrap </title> [/code] [!-ملف CSS الأساسي الجديد bootstrap-> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3 -> <Link Rel = "STYLESHEET" Href = "// Cdn.Bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">< !- ملف 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></head> <body> <h1> hello ، world! </h1> </body> </html>
2. تخطيط نظام الشبكة
تخطيط المحتوى عن طريق ضبط الصفوف والأعمدة. Bootstrap يعين الصفحة على 12 عمود. تخطيط عن طريق تغيير عدد الأعمدة ، مثل تعيين ثلاثة أعمدة على قدم المساواة:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contablate" content = "ie = edge"> <meta name = "viewport" content = "width = width ، وأي محتوى آخر * يجب * متابعتها! -> <title> </title> <Link Href = "CSS/BOOTSTRAP.CSS" rel = "STYLESHEET"> <link href = "css/bootstrap.min.css src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/boottrap.min التصميم-> <viv> <!-أو حاوية-فلاود-> <viv>-Col-XS-4: يشير إلى جهاز صغير أقل من 768px <Div> 11 </viv>-Col-SM-4: يشير إلى جهاز> = 768px <div> 22 </viv>-col-md-4: يشير إلى جهاز> = أقل من 1200px </viv> <viv> 11 </viv> <viv> 22 </viv> <viv> 33 </viv> </viv> <viv> 33 </viv> </viv> <viv> <viv> 11 </viv> </div> 22 </viv> <viv> 33 </viv> </viv> <viv> <viv> 11 </viv> <viv> 22 </viv> <viv> 33 </viv> </viv> </viv> </body> </html>
هناك أربع طرق لكتابة تنسيق شبكة CSS ، والتي تستخدم بشكل أساسي في حل الأجهزة المختلفة.
2: ترجمة العمود
استخدم الإزاحة إلى PAN. وهذا هو ، عدد الأعمدة المترجمة
<viv> <!-أو حاوية-فلويد-> <viv> <viv> 11 </viv> <viv> 22 </viv> <viv> 33 </viv> --- يشير إلى حق 33 </viv> <viv> 11 </viv> </div> 22 </viv> <viv> <viv> 33 </viv> </viv> <viv> 11 </viv> <viv> 22 </viv> <viv> 33 </viv> </viv> </viv> <!-ترجمة العمود->
الآثار هي كما يلي:
33 منذ ترجمة العمودين ، لم يستطع تلبية متطلبات احتلال 4 أعمدة ، لذلك تم ضغطه في الصف التالي وبدأ في احتلال 4 أعمدة. ببساطة ، إنه يعادل تحريك كتلة Div بأكملها.
3: أعمدة متداخلة
وهذا هو ، أعمدة العش في عمود الشبكة. دعونا نقارن.
<viv> <!-أو حاوية fluid-> <viv> <viv> <viv> 11 </viv> <viv> 22 </viv> <viv> 33 </viv> </viv> </div> <viv> <viv> 11 </viv> </viv> </div> </viv> </viv> <viv> 11 </viv> <viv> 22 </viv> <viv> 33 </viv> </viv> </viv> </viv>
الآثار هي كما يلي:
هل وجدت أي مشاكل؟ لماذا لا يوجد توزيع متساوي 8 أعلاه؟
السبب: دعونا نلقي نظرة على وحدة التحكم في التصحيح
.col-XS-1 ، .COL-XS-10 ، .COL-XS-11 ، .COL-XS-12 ، .COL-XS-2 ، .COL-XS-3 ، .COL-XS-4 ، .COL-XS-5 ، .COL-XS-6 ، .COL-XS-7 ، .COL-XS-8 ، حشو اليسار: 15 بكسل ؛ حشو اليمين: 15px ؛ الموقف: قريب ؛}
وقد وجد أن حشوة اليسار وحشو اليمين كلاهما 15 بكسل. وذلك لأن الحشو بين الأعمدة يستحق التأثير ، فلماذا لا يكون لـ Div الثاني تأثير؟ دعنا نستكشف مبدأ شبكة السياج.
1. يجب تضمين "الصف" في.- .container (العرض الثابت) أو.- .container-fluid (عرض 100 ٪) لمنحها المحاذاة والحشو المناسبة.
2. قم بإنشاء مزراب بين الأعمدة عن طريق ضبط خاصية padding لـ "العمود". عن طريق تحديد margin سلبي لعنصر .row ، تم تعيين padding لعنصر .container
بشكل غير مباشر ، "العمود" الموجود في "صف" الحشو padding .
ملاحظة : في هذا الوقت ، قام الصف بتعويض حشوة العمود ، لذلك لا توجد قيمة حشوة.
4: فرز العمود
باستخدام Col-XS-Push-* Col-XS-Pull-* (* يمثل عدد من 0-11) كيفية فهم هاتين الفئتين؟ الدفع يعني الدفع ، السحب يعني السحب.
<viv> <viv> 21 </viv> <viv> 24 </viv> </viv> <viv> <viv> 21 </viv> <viv> 24 </viv> </viv>
العروض كما يلي:
<viv> 21 </viv> --- مسجل على أنه Div1 <Div> 24 </viv>-مسجلة باسم Div2
يمكن فهم أنه هو تبديل مواقف كليهما. تحتاج إلى دفع Div1 إلى الأعمدة 8 اليمنى ، وتحتاج إلى سحب 4 أعمدة إلى اليسار.
3. تخطيط شبكة التدفق
1. عرض العمود يستخدم النسب المئوية ، وليس وحدات البكسل
2. قم بتغيير فئة الصف إلى صفوف الصفوف
3. الوظائف الأساسية الأخرى هي نفس التصميم الثابت أعلاه ودعم الاستجابة.
4. عند تقسيم عمود معين في قطاع كبير ، نظرًا لأن تخطيط البث يستخدم النسب المئوية ، يجب حسابه وفقًا لـ 6.
// لاحظ الموقف التالي. عند تقسيم 8 أعمدة ثنائية ، لم يتم ضبطها على اثنين من 4s ، ولكن اثنين 6s ، لأن هناك 12 عمود التوزيع النقطية في bootstrap. <viv> <viv> <viv> 2 </viv> <viv> 2 </viv> </viv> </viv> </viv> </viv>
دعنا نلقي نظرة على تطبيق تخطيطات البث ومقارنتها بالتخطيطات الثابتة.
<!-تخطيط البث-> <viv> <viv> 333 </viv> <viv> 444 </viv> </viv> <viv> --- إعلان فئة الحاويات الفلوية ، مما يشير إلى أن المحتوى عبارة عن تخطيط دفق ، الوظيفة: ككتلة تحتوي فئات الحاوية والحاويات السائلة ، وهذا هو عرض الشاشة <Div> 333 </viv> <viv> 444 </viv> </viv>
عندما تكون الشاشة أقل من 768 بكسل ، يكون التأثير كما يلي:
عندما تكون الشاشة أكبر من 992 بكسل ، يكون التأثير كما يلي: في هذا الوقت ، خط واحد حصري
تحدد فئة الصفوف (المهم جدًا) ما إذا كان تخطيط تدفق أم لا. ثم يتم كتابة رمز كتلة المحتوى بنفس طريقة نظام الشبكة ، ولا يزال يبدأ من Col-MD-1 إلى Col-MD-12 ، والذي يتوافق مع النسب المئوية المختلفة على التوالي.
4. التصميم المستجيب
ببساطة ، فإنه يدعم القرارات (960 بكسل ، 1366 بكسل ، 978 بكسل ، إلخ) من الأجهزة المختلفة (الهواتف المحمولة ، أجهزة الكمبيوتر) للاستجابة التكيفية.
<viv> <viv> 21 </viv> <viv> 24 </viv> </viv>
عندما يكون الجهاز أقل من 768 بكسل ، يكون التأثير كما يلي:
عندما الجهاز> = 992 بكسل. الآثار هي كما يلي:
تختلف قرارات الفئتين أعلاه. Col-MD-12 يعني أن كل عمود لديه صف واحد ، أي 12 عمود.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.