Bootstrap ، من Twitter ، هو الإطار الأمامي الأكثر شعبية في الوقت الحاضر. يعتمد Bootstrap على HTML و CSS و JavaScript. إنها بسيطة ومرنة ، مما يجعل تطوير الويب أسرع.
النقاط الرئيسية للتعلم:
1. تخطيط الصفحة
في هذا الدرس ، سوف نتعلم بشكل أساسي نمط التصميم في نمط Bootstrap العالمي CSS ، بما في ذلك العنوان وجسم الصفحة والمحاذاة والقائمة والمحتوى العام الآخر.
واحد. تخطيط الصفحة
يوفر Bootstrap بعض أنماط تخطيط صفحة التصميم العادية للمطورين لاستخدامه.
1. جسم الصفحة
Bootstrap يحدد حجم الخط العالمي إلى 14 بكسل ، ويتم ضبط ارتفاع خط خط الخط على 1.428 (أي 20 بكسل) ؛ تم تعيين عنصر الفقرة على ارتفاع خط 1/2 (أي 10 بكسل) ؛ يتم تعيين اللون على #333.
// قم بإنشاء نص يحتوي على فقرة مميزة <p> إطار عمل bootstrap </p> <p> إطار عمل bootstrap </p>
2. العنوان
// من H1 إلى H6 <H1> إطار bootstrap </h1> // 36px <h2> إطار عمل bootstrap </h2> Framework </h5> // 14px <h6> Pootstrap Framework </h6> // 12px
لقد تعلمنا من Firebug أن bootstrap أعادت إعادة تشكيل H1 ~ H6 على التوالي ، ويدعم أيضًا تعريف الفئة = (. H1 ~ H6) للعناصر المضمنة العادية لتحقيق نفس الوظيفة.
// العناصر المضمنة تستخدم خط العنوان <span> bootstrap </span>
ملاحظة: عند عرض العناصر من خلال Firebug ، يمكنك أيضًا أن ترى أن لون الخط وأسلوب الخط وارتفاع الخط كلها ثابتة ، وبالتالي ضمان التوحيد. سيتم تحديد الخط الأصلي بناءً على الخط المفضل المدمج في النظام ، واللون هو الأسود.
بين عناصر H1 ~ H6 ، يمكن أيضًا تضمين عنصر صغير كرجوع فرعي.
// إدراج عنصر صغير في عنصر العنوان <h1> إطار عمل bootstrap <small> الترجمة الفرعية </h1> <h2> إطار عمل bootstrap <small> subtitle subtitle </small> </h4> <small> الترجمة الفرعية bootstrap </small> </h4> <h5> إطار عمل bootstrap <small> الترجمة الفرعية </small> </h5> <h6> إطار عمل bootstrap <small> الترجمة الفرعية
من خلال عرض Firebug ، وجدنا أن حجم العنصر الصغير تحت H1 ~ H3 لا يمثل سوى 65 ٪ من العنصر الأصل. ثم من خلال الحساب (انظر النمط المحسوب بواسطة Firebug) ، فإن العنصر الصغير تحت H1 ~ H3 هو 23.4px و 19.5px و 15.6px ؛ يمثل حجم العنصر الصغير تحت H4 ~ H6 فقط 75 ٪ من العنصر الأصل ، وهو: 13.5px ، 10.5px ، و 9px. تم أيضًا تغيير النمط الصغير تحت H1 ~ H6 ، وأصبح اللون رماديًا فاتحًا: #777 ، وارتفاع الصف هو 1 ، والسمك هو 400.
3. العناصر النصية المضمنة
// إضافة علامات ، <mark> عناصر أو. كما هو مذكور أعلاه ، النص المس خط // مجموعة متنوعة من النص مع التركيز <small> إطار Bootstrap </small> // 85 ٪ من حجم الخط القياسي <strong> إطار Bootstrap </strong> // Bold 700 <em> إطار Bootstrap </em> // Tilt
4. المحاذاة
.
5.case
.
6. الاختصار
// BOOTSTRAP ABBREVITION <ABBR> </abbr>
7. نص العنوان
// قم بتعيين العنوان ، قم بإزالة الإمالة ، وقم بتعيين ارتفاع الصف ، أسفل 20 بكسل <address> <strong> Twitter ، INC.
8. اقتبس النص
// مرجع النمط الافتراضي ، أضف خطوط الحافة ، وحجم الخط والهوامش الداخلية والخارجية <BlockQuote> Bootstrap Framework </blockquote> // عكسي <blockquote> إطار عمل bootstrap </blockquote>
9. قائمة تخطيط
// انطلق من النمط الافتراضي <ul> <li> إطار عمل bootstrap </li> <li> إطار عمل bootstrap </li> <li> إطار عمل bootstrap </li> <li> bootstrap framework </li> <li> framework bootstrap </li> </li> <li> إطار عمل bootstrap </li> <li> إطار عمل bootstrap </li> <li> إطار عمل bootstrap </li> <li> إطار عمل bootstrap </li> <li> pootstrap إطار عمل </li> <dl> <dt> bootstrap </dt> <dd> يوفر Bootstrap بعض الأنماط للمطورين لاستخدامه. </dd> </gl>
10. الكود
// رمز INLINE <CODE> <SECTION> </CODE> // إدخال المستخدم اضغط على <KBD> CTRL + ، </kbd> // كتلة الكود <pre> <p> الرجاء إدخال ... </p> </pre>
يسرد Bootstrap أيضًا <var> لمتغيرات الترميز و <samp> لإخراج البرنامج ، ولكن لم يتم إعادة تجميع CSS.
ما سبق هو المعرفة ذات الصلة حول نمط تخطيط صفحة bootstrap التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك!