نصوص/ترتيب Bootstrap 5

Bootstrap 5 默认设置

Bootstrap 5 默认 font-size 为 1rem（默认为 16px），line-height 为 1.5。

此外，所有 <p> 元素都设置了 margin-top: 0 و margin-bottom: 1rem （默认为 16px）。

<h1> - <h6>

Bootstrap 5 把 HTML 标题（<h1> 到 <h6>）的样式设置为有更粗的 font-weight 以及响应式的 font-size。

مثال

جربها بنفسك

如果需要，您还可以在其他元素上使用 .h1 到 .h6 类，使它们表现为标题：

مثال

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

جربها بنفسك

display 标题

display 标题用于比普通标题更突出（更大的 font-size 和更细的 font-weight），有六个类可供选择：.display-1 到 .display-6：

مثال

جربها بنفسك

<small>

在 Bootstrap 5 中，HTML <small> 元素（和 .small 用于在任何标题中创建较小的辅助文本：

مثال

جربها بنفسك

<mark>

سيستخدم Bootstrap 5 لونًا أصفر وبعض الهوامش الداخلية لتحديد النص <mark> و .mark النوع:

مثال

جربها بنفسك

<abbr>

سيقوم Bootstrap 5 بتعيين نمط HTML <abbr> نمط العنصر لتكون لديه حواف داكنة وسرور أسئلة عند التمرير فوقها:

مثال

جربها بنفسك

<blockquote>

عند اقتباس محتوى من مصدر آخر، قم بتطبيق .blockquote إضافة النوع إلى <blockquote>عند تسمية المصدر، مثل "موقع من مختبر العالم الطبيعي"، استخدم .blockquote-footer النوع:

مثال

جربها بنفسك

<dl>

سيقوم Bootstrap 5 بتعيين HTML <dl> نمط العنصر:

مثال

جربها بنفسك

<code>

سيقوم Bootstrap 5 بتعيين HTML <code> نمط العنصر:

مثال

جربها بنفسك

<kbd>

سيقوم Bootstrap 5 بتعيين HTML <kbd> نمط العنصر:

مثال

جربها بنفسك

<pre>

سيقوم Bootstrap 5 بتعيين HTML <pre> نمط العنصر:

مثال

جربها بنفسك

أنواع النسخ المزيد

يمكن إضافة المزيد من أنواع Bootstrap 5 إلى أنماط عناصر HTML:

النوع الوصف مثال
.lead تقديم الفقرة. جربها
.text-left حدد نصًا يسارًا. جربها
.text-break منع تفكك النص الطويل وتدمير التركيب. جربها
.text-center حدد نصًا مركزًا. جربها
.text-decoration-none أزالة الخط الأفقي من الروابط. جربها
.text-end حدد نصًا مركزًا. جربها
.text-nowrap حدد نصًا لا يغير السطر. جربها
.text-lowercase حدد نصًا صغيرًا. جربها
.text-uppercase حدد نصًا كبيرًا. جربها
.text-capitalize حدد نصًا كبيرًا. جربها
.initialism اعرض نصًا داخل <abbr> عن طريق استخدام خط أصغر. جربها
.list-unstyled أزالة سمة القائمة الافتراضية والجوانب الخارجية اليسرى للقائمة (تطبيق على <ul> و <ol>).
هذا النوع ينطبق فقط على عناصر القائمة المباشرة.
لإزالة سمة القائمة الافتراضية من أي قائمة مدمجة، قم بتطبيق هذا النوع على القوائم المدمجة أيضًا.		 جربها
.list-inline ضع جميع عناصر القائمة في سطر واحد.
استخدم مع كل <li> عنصر على .list-inline-item.		 جربها