من خلال فئات التخطيط المسبقة لإطار الواجهة الأمامية Bootstrap ، لم يعد علينا كتابة الكثير من رمز CSS لكل عنصر علامة تخطيط. يمكننا استخدام ميزات تخطيط bootstrap. يمكنك إنشاء أنماط محددة مسبقًا للعناوين والفقرات والقوائم والعناصر المضمنة الأخرى ، واكتب صفحة ويب قياسية للغاية.
دعونا نتعلم معا. ما هي فئات التنضيد التي يتم تحديدها مسبقًا بالنسبة لنا؟
أولاً: يستخدم Bootstrap helvetica neue و helvetica و arial و sans-serif كمكدس الخط الافتراضي الخاص به ، والتي هي الخطوط الأكثر استخدامًا على جميع صفحات الويب في الوقت الحاضر. ومنذ ذلك الحين ، لم يعد علينا تحديد أنماط الخطوط العالمية للهيكل. طالما أنك تستخدم عائلة FOONSTRAP Front Frant-Frant-Fongily ، سيتم استخدام سلسلة الخطوط المذكورة أعلاه افتراضيًا.
هذا هو: Font-Family: Sans-Serif ؛
دعنا نتحقق من ذلك ونفتح إطار عمل ملفات css bootstrap.css على الطرف الأمامي من bootstrap
أيها الأصدقاء الأعزاء ، هل يمكننا فقط استخدام الخطوط الافتراضية لإطار الواجهة الأمامية bootstrap؟ من الواضح لا. في وقت لاحق ، سأعلمك كيفية تخصيص إطار bootstrap وإنشاء إطار عمل Bootstrap الذي نحبه ونريد التأثير عليه.
ثانياً: حدد إطار الواجهة الأمامية bootstrap نمط CSS لـ H1-H6. لقد استخرجت جزءًا من النمط المحدد من Framework CSS File Bootstrap.css من إطار الواجهة الأمامية Bootstrap. يمكنك أن ترى أن قيم السمة لحجم الخط يتم تعريفها لـ HN على التوالي.
H1 {Font-Size: 36px ؛}
H2 {font-size: 30px ؛}
H3 {font-size: 24px ؛}
H4 {font-size: 18px ؛}
H5 {font-size: 14px ؛}
H6 {font-size: 12px ؛}
التأثير الفعلي على النحو التالي:
رمز صفحة الويب:
تأثير صفحة الويب:
ثالثًا: ترجمات مضمنة. إذا كنت بحاجة إلى إضافة عنوان فرعي مضمّن إلى أي عنوان ، فما عليك سوى إضافة <small> على جانبي العنصر ، أو إضافة فئة .small ، حتى تتمكن من الحصول على نص أخف مع حجم خط أصغر ، كما هو موضح في المثال التالي:
رمز صفحة الويب:
تأثير صفحة الويب:
الرابع: قيادة النسخة الرئيسية. من أجل إضافة نص التركيز إلى الفقرة ، يمكنك إضافة Class = "Lead" ، والتي ستؤدي إلى نص أكبر وأثخن وأعلى خط ، كما هو موضح في المثال التالي:
رمز صفحة الويب:
تأثير صفحة الويب:
لن تعطي فئة الإطار الأمامي للواجهة الأمامية Bootstrap أمثلة ، وسأكتب فقط الغرض ، لأنه يمكنك تجربة تأثيرات صغيرة مثل المثال أعلاه.
خامسًا: التأكيد على أن التركيز الافتراضي لـ HTML هو <small> (تعيين النص على 85 ٪ من حجم النص الأصل) ، <strong> (تعيين النص على نص أكثر سمكا) ، <em> (تعيين النص على مائل).
السادس: الاختصار ، توفر عناصر HTML علامات للاختصار ، مثل www أو http. يحدد Bootstrap نمط عنصر <abbr> ليكون حدودًا منقطًا معروضة في أسفل النص ، وسيتم عرض النص الكامل عندما يحوم الماوس فوقه (طالما قمت بإضافة نص إلى سمة العنوان <ABBR>). للحصول على نص خط أصغر ، أضف .initialism إلى <abbr>.
السابع: العنوان. باستخدام علامة <Dequated> ، يمكنك عرض معلومات الاتصال على صفحة الويب. بما أن <Dequated> الإعدادات الافتراضية لعرضها: block ؛ ، تحتاج إلى استخدام علامة لإضافة فاصل سطر إلى نص العنوان المرفق.
الثامن: blockquote ، يمكنك استخدام الافتراضي <blockquote> بجانب أي نص HTML. تتضمن الخيارات الأخرى إضافة علامة <small> لتحديد مصدر المرجع واستخدام class.pull-right لمحاذاة المرجع إلى اليمين. يوضح المثال التالي هذه الميزات:
التاسعة: قائمة
يدعم Bootstrap القوائم المطلوبة والقوائم غير المرتبة والقوائم المحددة.
القائمة المطلوبة: تشير القائمة المطلوبة إلى قائمة تبدأ بالأرقام أو الأحرف الأخرى المطلوبة.
القائمة غير المرتبة: تشير القائمة غير المرتبة إلى قائمة بدون طلب محدد ، وهي قائمة تبدأ بأسلوب تركز تقليدي. إذا كنت لا ترغب في عرض أرقام التركيز هذه ، فيمكنك استخدام Class.list-Itstyled لإزالة النمط. يمكنك أيضًا وضع جميع عناصر القائمة في نفس السطر باستخدام Class.List-Inline.
قائمة التعريف: في هذا النوع من القائمة ، يمكن أن تحتوي كل عنصر على عناصر القائمة <DT> و <dd>. <dt> يرمز إلى مصطلح التعريف ، مثل القاموس ، والذي يتم تعريفه على أنه ينتمي (أو عبارة). بعد ذلك ، <dd> هو وصف <dt>. يمكنك استخدام ClassDL أفقيًا لعرض الممتلكات في <DL> صف جنبًا إلى جنب مع الوصف.
يجب أن تكون فصول الإطار الأمامية الأخرى في الواجهة الأمامية ، على النحو التالي ، ويجب على الجميع حفظها واستخدامها بكفاءة.
. يسلط الضوء على الفقرات
.
. Text-Left Set Text Left Tex
.Text-Conter Set Center Center محاذاة
.Text-Right قم بتعيين المحاذاة الصحيحة للنص
.Text-rextify يعين محاذاة نصية ، وسيتم ملفوف النص خارج الشاشة في الفقرة تلقائيًا
.
.
.Text-uppercase Set textraphization
.
.
.bblockquote يعكس مجموعات المرجع المحاذاة اليمنى
. List-Unstyled يزيل نمط القائمة الافتراضية ويحدد اليسار في عناصر القائمة (في <ul> و <ol>). هذه الفئة مناسبة فقط لعناصر قائمة الأطفال المباشرة (إذا كنت بحاجة إلى إزالة عناصر القائمة المتداخلة ، فأنت بحاجة إلى استخدام هذا النمط في القائمة المتداخلة)
. List-Inline يضع جميع عناصر القائمة في نفس السطر
. للتطبيقات المحددة ، يمكنك عرض المثيل.
.pre-slrallable make <pre> عنصر قابل للتمرير قابل للتمرير
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.