جميع عناوين HTML، <h1> خلال <h6>متوفرة.
| عنوان | مثال |
|---|---|
|
|
h1. عنوان Bootstrap |
|
|
h2. عنوان Bootstrap |
|
|
h3. عنوان Bootstrap |
|
|
h4. عنوان Bootstrap |
|
|
h5. عنوان Bootstrap |
|
|
h6. عنوان Bootstrap |
.h1 إلى .h6 ، وذلك عندما تريد مطابقة نمط الخط لعنوان ولكن لا يمكنك استخدام عنصر HTML المرتبط.
h1. عنوان Bootstrap
h2. عنوان Bootstrap
h3. عنوان Bootstrap
h4. عنوان Bootstrap
h5. عنوان Bootstrap
h6. عنوان Bootstrap
استخدم فئات الأدوات المساعدة المضمنة لإعادة إنشاء نص العنوان الثانوي الصغير من Bootstrap 3.
صُممت عناصر العناوين التقليدية لتكون أكثر فعالية في صلب محتوى صفحتك. عندما تحتاج إلى عنوان بارز، فكّر في استخدام عنوان عرضي- وهو نمط عنوان أكبر وأكثر وضوحًا.
| الشاشة 1 |
| الشاشة 2 |
| الشاشة 3 |
| الشاشة 4 |
اجعل الفقرة مميزة بإضافة .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est not comdo uctus.
تنسيق عناصر HTML5 المضمنة الشائعة.
يمكنك استخدام علامة التحديد لـ تسليط الضوء نص.
يُفترض أن يُعامل هذا السطر من النص على أنه نص محذوف.
يُقصد بهذا السطر من النص أن يُعتبر غير دقيق.
يُقصد بهذا السطر النصي أن يُعامل كإضافة إلى المستند.
سيتم عرض هذا السطر من النص على أنه مسطر
يُقصد بهذا السطر من النص أن يُعامل كنص صغير.
تم عرض هذا السطر كنص غامق.
تم عرض هذا السطر كنص مائل.
.mark و .small لتطبيق نفس الأنماط مثل <mark> مع <small> تجنب أي آثار دلالية غير مرغوب فيها قد تجلبها العلامات.
على الرغم من عدم ظهورها أعلاه، يمكنك استخدامها بحرية <b> في <i> HTML5. <b> يُستخدم لتسليط الضوء على الكلمات أو الجمل دون إضفاء أهمية إضافية، بينما <i> يُستخدم في الغالب للصوت والمصطلحات التقنية وما إلى ذلك.
قم بتغيير محاذاة النص وتحويله ونمطه ووزنه ولونه باستخدام الخاصة بالنصوص والألوان أدواتنا.
تطبيق مُنمّق لعنصر HTML <abbr> الخاص بالاختصارات والمختصرات لعرض النسخة الكاملة عند تمرير المؤشر فوقها. تحتوي الاختصارات على خط سفلي افتراضي، كما يظهر مؤشر مساعدة لتوفير سياق إضافي عند تمرير المؤشر فوقها، ولمستخدمي التقنيات المساعدة.
أضف .initialism إلى الاختصار للحصول على حجم خط أصغر قليلاً.
جذب
HTML
لاقتباس فقرات من محتوى من مصدر آخر داخل مستندك. استخدم خاصية الالتفاف (Buff). <blockquote class="blockquote"> حول أي كود HTML علامة اقتباس
لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. وضعية العدد الصحيح تعطي رهانًا مسبقًا.
أضف <footer class="blockquote-footer"> لتحديد المصدر، ضع اسم العمل المصدر بين علامتي اقتباس مفردتين (:) <cite>.
لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. وضعية العدد الصحيح تعطي رهانًا مسبقًا.
استخدم أدوات معالجة النصوص حسب الحاجة لتغيير محاذاة الاقتباس.
لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. وضعية العدد الصحيح تعطي رهانًا مسبقًا.
لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. وضعية العدد الصحيح تعطي رهانًا مسبقًا.
الافتراضي نمط القائمة والهامش الأيسر من عناصر القائمة (العناصر الفرعية المباشرة فقط). ينطبق هذا فقط على عناصر القائمة الفرعية المباشرة، مما يعني أنك ستحتاج إلى إضافة الفئة لأي قوائم متداخلة أيضًا.
- لوريم إيبسوم دولور سيت أميت
- Consectetur adipiscing elit
- عدد صحيح molestie lorem في ماسا
- تسهيلات في بريتيوم نيسل أليكيت
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- الدهليز laoreet porttitor sem
- قانون tristique libero volutpat في
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
قم بإزالة النقاط من القائمة وقم بتطبيق هامش باستخدام مزيج من فئتين، .list-inline و .list-inline-item.
- لوريم إيبسوم
- Phasellus iaculis
- Nulla volutpat
قم بمحاذاة المصطلحات والأوصاف أفقيًا باستخدام الفئات المُعرّفة مسبقًا (أو المزج الدلالي) في نظام الشبكة. بالنسبة للمصطلحات الطويلة، يمكنك إضافة .text-truncate لحذف النص باستخدام علامة الحذف (...).
- قوائم الوصف
- تُعد قائمة الوصف مثالية لتعريف المصطلحات.
- إيسمود
-
معرف الدهليز، 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.
- المصطلح "مختصر" هو "مختصر"
- Fusce dapibus، Tellus ac cursus commodo، tortor mauris condimentum nibh، ut vermentum Massa justo sit amet risus.
- التعشيش
-
- قائمة تعريفات متداخلة
- وضعية Aenean، tortor sed cursus feugiat، nunc augue blandit nunc.
مصطلح الطباعة التفاعلية العنصر الرئيسي حجم خط ضمن سلسلة من استعلامات الوسائط. لا يقوم Bootstrap بذلك تلقائيًا، ولكن من السهل إضافته إذا احتجت إليه.
إليك مثال عملي على ذلك. اختر أي حجم خطواستعلامات وسائط ترغب بها.
يمكنك بسهولة إعادة محاذاة النص مع المكونات باستخدام فئات محاذاة النص.
Ambitioni dedisse scrisisse iudicaretur. Cras Mattis iudicium Purus يجلس أميت الخميرة. لذلك sed odio Operae، eu vulputate felis rhoncus. Praeterea iter est quasdam res quas exommunication. في مركزنا التالي، سيتيينتس بيروس أفروس. Petierunt uti sibi concilium totius Galliae in diem certam indir. Cras Mattis iudicium Purus يجلس أميت الخميرة.
بالنسبة للمحاذاة إلى اليسار واليمين والوسط، تتوفر فئات استجابة تستخدم نفس نقاط توقف عرض منفذ العرض مثل نظام الشبكة.
نص محاذٍ لليسار في جميع أحجام نافذة العرض.
نص محاذٍ للوسط في جميع أحجام نافذة العرض.
نص محاذٍ لليمين في جميع أحجام نافذة العرض.
نص محاذي لليسار على منافذ عرض بحجم SM (صغير) أو أعرض.
نص محاذي لليسار على منافذ عرض بحجم MD (متوسط) أو أوسع.
نص محاذٍ لليسار على شاشات العرض ذات الحجم الكبير (LG) أو الأوسع.
نص محاذي لليسار على شاشات العرض ذات الحجم XL (كبير جدًا) أو أعرض.
منع التفاف النص باستخدام .text-nowrap .
لإضافة محتوى أطول، يمكنك استخدام .text-truncate لحذف النص باستخدام علامة الحذف (...). يتطلب ذلك استخدام خاصية العرض: inline-block أو العرض: block.
قم بتحويل النص إلى مكونات باستخدام فئات الأحرف الكبيرة والصغيرة.
نص بأحرف صغيرة.
نص مكتوب بأحرف كبيرة.
نص مكتوب بأحرف كبيرة.
لاحظ كيف أن خاصية "text-capitalize" تغير الحرف الأول من كل كلمة فقط، تاركة حالة الأحرف الأخرى دون تغيير.
يُغيّر بسرعة وزن (خط غامق) النص أو يجعله مائلاً.
نص غامق.
نص عادي الوزن.
نص خفيف.
نص مائل.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-muted
نص أبيض
تُعدّ فئات النصوص السياقية فعّالة أيضًا على الروابط مع حالتي التمرير والتركيز المُقدّمتين. لاحظ أن .text-white و .text-muted لا تُطبّقان على الروابط.
على غرار فئات ألوان النصوص السياقية، يمكنك بسهولة تعيين خلفية أي عنصر إلى أي فئة سياقية. ستصبح مكونات الرابط أغمق عند تمرير المؤشر فوقها، تمامًا مثل فئات النصوص. لا تُعيّن اللون، لذا في بعض الحالات قد ترغب في استخدام .text-* أدوات
التعامل مع التحديد
في بعض الأحيان، لا يمكن تطبيق الفئات السياقية بسبب خصوصية مُحدِّد آخر. في بعض الحالات، يكون الحل البديل الكافي هو تغليف محتوى العنصر الخاص بك في <div> مع الفصل.
إضفاء المعنى على التقنيات المساعدة
إن استخدام اللون لإضافة معنى لا يوفر سوى إشارة بصرية، ولن تصل إلى مستخدمي التقنيات المساعدة، مثل قارئات الشاشة. تأكد من أن المعلومات التي يدل عليها اللون إما واضحة من المحتوى نفسه (مثل النص الظاهر)، أو مُضمنة بوسائل بديلة، مثل نص إضافي مخفي باستخدام .sr-only .
