الطباعة الأساسية
العناوين
جميع عناوين HTML، خلال تتوفر فئات .h1 إلى .h6 أيضًا، وذلك عندما تريد مطابقة نمط الخط لعنوان ما ولكنك لا تزال تريد عرض النص ضمن السطر.
h1. عنوان Bootstrap |
نصف غامق 36 بكسل |
h2. عنوان Bootstrap |
نصف غامق 30 بكسل |
h3. عنوان Bootstrap |
نصف غامق 24 بكسل |
h4. عنوان Bootstrap |
نصف غامق 18 بكسل |
h5. عنوان Bootstrap |
نصف غامق 14 بكسل |
h6. عنوان Bootstrap |
نصف غامق 12 بكسل |
إنشاء نص ثانوي أخف في أي عنوان باستخدام نص عام العلامة أو الفئة .small .
h1. عنوان Bootstrap النص الثانوي |
h2. عنوان Bootstrap النص الثانوي |
h3. عنوان Bootstrap النص الثانوي |
h4. عنوان Bootstrap النص الثانوي |
h5. عنوان Bootstrap النص الثانوي |
h6. عنوان Bootstrap النص الثانوي |
نسخة الجسم
font-size الافتراضي العالمي في Bootstrap هو 14 بكسل ، مع line-height 1.428 . يتم تطبيق هذا على وجميع الفقرات. بالإضافة إلى ذلك، (الفقرات) تحصل على هامش سفلي يعادل نصف ارتفاع السطر المحسوب (10 بكسل بشكل افتراضي).
لا يوجد شيء سوى أن يكون لديك زينة أو ليو. مع مجتمعنا الطبيعي المعاقب وماغنيس دي مونتيس بارتورينت، ناسيتور مثير للسخرية. Nullam id dolor id nibh ultricies المركبات.
مع مجتمعنا الطبيعي المعاقب وماغنيس دي مونتيس بارتورينت، ناسيتور مثير للسخرية. Donec ullamcorper nulla Non metus auctor fringilla. Duis mollis, est not commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla Non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet not magna. Donec id elit Non mi porta gravida at eget metus. Duis mollis, est not commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
نص الجسم الرئيسي
اجعل الفقرة بارزة عن طريق إضافة .lead .
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. هناك شيء واحد، ليس سلعة جيدة.
الفئة= "الرصاص" > ...
تم بناؤها مع أقل
يعتمد مقياس الطباعة على متغيرين LESS في variables.less : @font-size-base و @line-height-base . الأول هو حجم الخط الأساسي المستخدم في جميع أنحاء والثاني هو ارتفاع الخط الأساسي. نستخدم هذه المتغيرات وبعض الرياضيات البسيطة لإنشاء الهوامش والحشوات وارتفاعات الخطوط لجميع أنواعنا وأكثر. قم بتخصيصها وسيتكيف Bootstrap.
توكيد
استخدم علامات التأكيد الافتراضية في HTML مع الأنماط خفيفة الوزن.
نص صغير
للتخفيف من حدة النص المضمن أو كتل النص، استخدم العلامة لتعيين النص بنسبة 85% من حجم العنصر الرئيسي. تتلقى عناصر العنوان font-size الخاص بها للعناصر المتداخلة عناصر.
يمكنك أيضًا استخدام عنصر مضمن مع .small بدلاً من أي
يُقصد من هذا السطر من النص أن يتم التعامل معه كطباعة صغيرة.
This line of text is meant to be treated as fine print.
عريض
للتأكيد على جزء من النص باستخدام خط أثقل.
يتم عرض المقطع النصي التالي بالخط الغامق .
rendered as bold text
الخط المائل
للتأكيد على جزء من النص بالخط المائل.
يتم عرض المقطع النصي التالي بالخط المائل .
rendered as italicized text
العناصر البديلة
لا تتردد في الاستخدام و في HTML5. الغرض منه تسليط الضوء على الكلمات أو العبارات دون نقل أهمية إضافية أثناء يُستخدم في الغالب للصوت والمصطلحات التقنية وما إلى ذلك.
فصول المحاذاة
يمكنك إعادة محاذاة النص بسهولة إلى المكونات باستخدام فئات محاذاة النص.
نص محاذي لليسار.
نص محاذي للوسط.
نص محاذي لليمين.
class= "text-left" > نص محاذي لليسار.
class= "text-center" > نص محاذي للوسط.
class= "text-right" > نص محاذي لليمين.
فصول التركيز
انقل المعنى من خلال الألوان باستخدام مجموعة من فئات أدوات التأكيد. يمكن تطبيق هذه الفئات أيضًا على الروابط وستصبح داكنة عند تحريك المؤشر عليها تمامًا مثل أنماط الروابط الافتراضية لدينا.
Fusce dapibus، Tellus AC cursus commodo، tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est not comodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet not magna.
Etiam Porta Sem Malesuada Magna mollis euismod.
Donec ullamcorper nulla Non metus auctor fringilla.
الفئة= "text-muted" > ...
الفئة= "text-primary" > ...
الفئة= "text-success" > ...
الفئة= "text-info" > ...
class= "text-warning" > ...
الفئة= "text-danger" > ...
التعامل مع الخصوصيات
في بعض الأحيان لا يمكن تطبيق فئات التأكيد بسبب خصوصية محدد آخر. في معظم الحالات، يكون الحل البديل الكافي هو تغليف النص في مع الفصل.
الاختصارات
تنفيذ منمق لـ HTML عنصر للاختصارات والكلمات المختصرة لإظهار الإصدار الموسع عند التمرير فوقها. الاختصارات التي تحتوي على سمة title لها حدود سفلية منقطّة فاتحة ومؤشر مساعدة عند التمرير فوقها، مما يوفر سياقًا إضافيًا عند التمرير فوقها.
الاختصار الأساسي
بالنسبة للنص الموسع عند التمرير لفترة طويلة فوق اختصار، قم بتضمين سمة title مع عنصر.
اختصار كلمة السمة هو attr .
title= "attribute" > attr
البادئة
أضف .initialism إلى الاختصار للحصول على حجم خط أصغر قليلًا.
HTML هو أفضل شيء ظهر منذ اختراع الخبز.
title= "HyperText Markup Language" class= "initialism" > HTML
العناوين
قدم معلومات الاتصال الخاصة بأقرب سلف أو العمل بأكمله. حافظ على التنسيق من خلال إنهاء جميع الأسطر بـ
795 شارع فولسوم، الجناح 600
سان فرانسيسكو، كاليفورنيا 94107
ص: (123) 456-7890 الاسم الكامل
first.last@example.com
795 شارع فولسوم، الجناح 600
سان فرانسيسكو، كاليفورنيا 94107
العنوان= "الهاتف" > ص: (123) 456-7890
الاسم الكامل
href= "mailto:#" > first.last@example.com
اقتباسات مقتبسة
لاقتباس كتل من المحتوى من مصدر آخر داخل مستندك.
اقتباس افتراضي
طَوّق حول أي HTML كعلامة اقتباس. بالنسبة لعلامات الاقتباس المستقيمة، نوصي باستخدام .
لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. عدد صحيح يطرح رهانًا مسبقًا.
خيارات الاقتباس المحظور
تغييرات في الأسلوب والمحتوى للاختلافات البسيطة في المعيار .
تسمية المصدر
يضيف العلامة أو فئة .small لتحديد المصدر. قم بتغليف اسم العمل المصدر في .
لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. عدد صحيح يطرح رهانًا مسبقًا.
شخص مشهور في عنوان المصدر
لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. عدد صحيح يطرح رهانًا مسبقًا.
شخص مشهور في العنوان = "عنوان المصدر" > عنوان المصدر
العروض البديلة
استخدم .pull-right للحصول على اقتباسات عائمة ومحاذية لليمين.
الفئة= "سحب لليمين" >
...
القوائم
غير منظم
قائمة العناصر التي لا يهم ترتيبها صراحةً.
- لوريم إيبسوم دولور سيت أميت
- كونسيتتور أديبيسينج إليت
- عدد صحيح molestie lorem في ماسا
- تسهيلات في بريتيوم نيسل أليكيت
- لا يوجد أي عيب في ذلك
- الفاصولياء الخضراء
- فطريات بوروس صوداليس
- الدهليز laoreet porttitor sem
- Ac tristique libero volutpat في
- Faucibus porta lacus fringilla vel
- أيني سيت أميت إيرات نونك
- إيجيت بورتيتور لوريم
مُرتّب
قائمة العناصر التي يكون ترتيبها مهمًا بشكل صريح.
- لوريم إيبسوم دولور سيت أميت
- كونسيتتور أديبيسينج إليت
- عدد صحيح molestie lorem في ماسا
- تسهيلات في بريتيوم نيسل أليكيت
- لا يوجد أي عيب في ذلك
- Faucibus porta lacus fringilla vel
- أيني سيت أميت إيرات نونك
- إيجيت بورتيتور لوريم
...
غير مصمم
قم بإزالة list-style الافتراضي والحاشية اليسرى من عناصر القائمة (العناصر الفرعية المباشرة فقط). ينطبق هذا فقط على عناصر القائمة الفرعية المباشرة ، مما يعني أنك ستحتاج إلى إضافة الفئة لأي قوائم متداخلة أيضًا.
- لوريم إيبسوم دولور سيت أميت
- كونسيتتور أديبيسينج إليت
- عدد صحيح molestie lorem في ماسا
- تسهيلات في بريتيوم نيسل أليكيت
- لا يوجد أي عيب في ذلك
- الفاصولياء الخضراء
- فطريات بوروس صوداليس
- الدهليز laoreet porttitor sem
- Ac tristique libero volutpat في
- Faucibus porta lacus fringilla vel
- أيني سيت أميت إيرات نونك
- إيجيت بورتيتور لوريم
-
الفئة= "قائمة غير منسقة" >
- ...
مضمن
ضع جميع عناصر القائمة على سطر واحد باستخدام display: inline-block; وبعض الحشو الخفيف.
- نص لوريم إيبسوم
- الفاصولياء الخضراء
- لا يوجد أي إجابة
- الفئة= "قائمة مضمنة" >
- ...
وصف
قائمة المصطلحات مع الأوصاف المرتبطة بها.
- قوائم الوصف
- تعتبر قائمة الوصف مثالية لتعريف المصطلحات.
- أويسموذ
- معرف الدهليز، ligula، porta، felis، euismod، semper، eget، lacinia، odio، sem، nec، elit.
- Donec id elit Non mi porta gravida at eget metus.
- بوابة ماليسوادا
- Etiam Porta Sem Malesuada Magna mollis euismod.
الوصف الأفقي
قم بوضع المصطلحات والأوصاف في
- قوائم الوصف
- تعتبر قائمة الوصف مثالية لتعريف المصطلحات.
- أويسموذ
- معرف الدهليز، ligula، porta، felis، euismod، semper، eget، lacinia، odio، sem، nec، elit.
- Donec id elit Non mi porta gravida at eget metus.
- بوابة ماليسوادا
- Etiam Porta Sem Malesuada Magna mollis euismod.
- euismod semper eget lacinia
- Fusce dapibus، Tellus ac cursus commodo، tortor mauris condimentum nibh، ut vermentum Massa justo sit amet risus.
-
الفئة= "dl-horizontal" >
...
...
الحذف التلقائي
ستؤدي قوائم الأوصاف الأفقية إلى قطع المصطلحات الطويلة جدًا بحيث لا يمكن وضعها في العمود الأيسر باستخدام text-overflow . وفي المنافذ الضيقة، ستتغير إلى تخطيط المكدس الافتراضي.
الجداول
مثال اساسي
بالنسبة للتصميم الأساسي—حشو خفيف وفواصل أفقية فقط—أضف الفئة الأساسية .table إلى أي . It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.
#
First Name
Last Name
Username
1
Mark
Otto