نص التمهيد / الطباعة
إعدادات Bootstrap الافتراضية
حجم الخط الافتراضي العام لـ Bootstrap هو 14 بكسل ، مع ارتفاع خط يبلغ 1.428.
يتم تطبيق هذا على <body>العنصر وجميع الفقرات ( <p>).
بالإضافة إلى ذلك ، تحتوي جميع <p>العناصر على هامش سفلي يساوي نصف ارتفاع خطها المحسوب (10 بكسل افتراضيًا).
Bootstrap مقابل الإعدادات الافتراضية للمتصفح
في هذا الفصل ، سننظر في بعض عناصر HTML التي سيتم تصميمها بشكل مختلف قليلاً بواسطة Bootstrap عن الإعدادات الافتراضية للمتصفح.
<h1> - <h6>
بشكل افتراضي ، سيقوم Bootstrap بتصميم عناوين HTML ( <h1>إلى
<h6>) بالطريقة التالية:
مثال
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
<صغير>
في Bootstrap ، <small>يتم استخدام عنصر HTML لإنشاء نص ثانوي أفتح في أي عنوان:
مثال
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<علامة>
سيقوم Bootstrap بتصميم <mark>عنصر HTML بالطريقة التالية:
مثال
Use the mark element to highlight text.
<abbr>
سيقوم Bootstrap بتصميم <abbr>عنصر HTML بالطريقة التالية:
مثال
The WHO was founded in 1948.
<blockquote>
سيقوم Bootstrap بتصميم <blockquote>عنصر HTML بالطريقة التالية:
مثال
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
لإظهار الاقتباس على اليمين ، استخدم .blockquote-reverseالفصل الدراسي:
مثال
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<dl>
سيقوم Bootstrap بتصميم <dl>عنصر HTML بالطريقة التالية:
مثال
- Coffee
- - black hot drink
- Milk
- - white cold drink
<code>
سيقوم Bootstrap بتصميم <code>عنصر HTML بالطريقة التالية:
مثال
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
سيقوم Bootstrap بتصميم <kbd>عنصر HTML بالطريقة التالية:
مثال
Use ctrl + p to open the Print dialog box.
<قبل>
سيقوم Bootstrap بتصميم <pre>عنصر HTML بالطريقة التالية:
مثال
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
الألوان والخلفيات السياقية
يحتوي Bootstrap أيضًا على بعض الفئات السياقية التي يمكن استخدامها لتوفير "المعنى من خلال الألوان".
فئات ألوان النص هي : .text-mutedو
.text-primaryو .text-successو .text-infoو
.text-warning:.text-danger
مثال
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
فئات ألوان الخلفية هي : .bg-primaryو
.bg-successو .bg-infoو .bg-warning:.bg-danger
مثال
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
المزيد من فئات الطباعة
يمكن إضافة فئات Bootstrap أدناه إلى نمط عناصر HTML بشكل أكبر:
| Class | Description | Example |
|---|---|---|
.lead |
Makes a paragraph stand out | |
.small |
Indicates smaller text (set to 85% of the size of the parent) | |
.text-left |
Indicates left-aligned text | |
.text-center |
Indicates center-aligned text | |
.text-right |
Indicates right-aligned text | |
.text-justify |
Indicates justified text | |
.text-nowrap |
Indicates no wrap text | |
.text-lowercase |
Indicates lowercased text | |
.text-uppercase |
Indicates uppercased text | |
.text-capitalize |
Indicates capitalized text | |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
|
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) |
|
.list-inline |
Places all list items on a single line | |
.dl-horizontal |
Lines up the terms (<dt>) and descriptions (<dd>) in
<dl> elements side-by-side. Starts off like default <dl>s, but when the browser window expands, it will line up side-by-side |
|
.pre-scrollable |
Makes a <pre> element scrollable |
مرجع طباعة Bootstrap الكامل
للحصول على مرجع كامل لجميع عناصر / فئات الطباعة ، انتقل إلى مرجع طباعة Bootstrap الكامل .
انظر أيضًا إلى مرجع فئات مساعد Bootstrap للحصول على مزيد من المعلومات حول الفئات السياقية.