الطباعة
وثائق وأمثلة لطباعة Bootstrap ، بما في ذلك الإعدادات العامة والعناوين والنص الأساسي والقوائم والمزيد.
الاعدادات العامة
يعيّن Bootstrap أنماط العرض والطباعة والارتباط العالمية الأساسية. عندما تكون هناك حاجة إلى مزيد من التحكم ، تحقق من فئات الأدوات النصية .
- استخدم مجموعة خطوط أصلية تحدد الأفضل
font-family
لكل نظام تشغيل وجهاز. - للحصول على مقياس نوع أكثر شمولاً ويمكن الوصول إليه ، نستخدم الجذر الافتراضي للمتصفح
font-size
(عادةً 16 بكسل) حتى يتمكن الزوار من تخصيص الإعدادات الافتراضية للمتصفح حسب الحاجة. - استخدم
$font-family-base
،$font-size-base
و ،$line-height-base
والسمات كقاعدة مطبعية مطبقة على<body>
. - قم بتعيين لون الارتباط العام عبر
$link-color
وتطبيق تسطير الارتباط فقط على:hover
. - استخدمه
$body-bg
لتعيين ملفbackground-color
على<body>
(#fff
افتراضيًا).
يمكن العثور على هذه الأنماط في الداخل _reboot.scss
، ويتم تعريف المتغيرات العامة في _variables.scss
. تأكد من $font-size-base
ضبط rem
.
العناوين
جميع عناوين HTML ، <h1>
من خلال <h6>
، متوفرة.
عنوان | مثال |
---|---|
<h1></h1> |
h1. عنوان التمهيد |
<h2></h2> |
h2. عنوان التمهيد |
<h3></h3> |
h3. عنوان التمهيد |
<h4></h4> |
h4. عنوان التمهيد |
<h5></h5> |
h5. عنوان التمهيد |
<h6></h6> |
h6. عنوان التمهيد |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
من خلال .h6
الفئات المتاحة أيضًا ، عندما تريد مطابقة نمط خط العنوان ولكن لا يمكنك استخدام عنصر HTML المرتبط.
h1. عنوان التمهيد
h2. عنوان التمهيد
h3. عنوان التمهيد
h4. عنوان التمهيد
h5. عنوان التمهيد
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>
تخصيص العناوين
استخدم فئات الأدوات المضمنة لإعادة إنشاء نص العنوان الثانوي الصغير من Bootstrap 3.
عنوان عرض رائع مع نص ثانوي باهت
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
عرض العناوين
تم تصميم عناصر العناوين التقليدية للعمل بشكل أفضل في محتوى صفحتك. عندما تحتاج إلى عنوان يبرز ، ضع في اعتبارك استخدام عنوان عرض —نمط عنوان أكبر حجماً وأكثر إبداءً في الرأي. ضع في اعتبارك أن هذه العناوين لا تستجيب افتراضيًا ، ولكن من الممكن تمكين أحجام الخطوط المتجاوبة .
عرض 1 |
عرض 2 |
العرض 3 |
عرض 4 |
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
قيادة
اجعل فقرة مميزة عن طريق الإضافة .lead
.
هذه فقرة رئيسية. تبرز من الفقرات العادية.
<p class="lead">
This is a lead paragraph. It stands out from regular paragraphs.
</p>
عناصر النص المضمنة
التصميم لعناصر HTML5 المضمنة الشائعة.
يمكنك استخدام علامة العلامة لتسليط الضوءنص.
من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.
من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.
من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.
سيتم عرض هذا السطر كما هو مسطر
من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.
تم تقديم هذا السطر كنص عريض.
تم تقديم هذا السطر كنص مائل.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
.mark
والفصول الدراسية .small
متاحة أيضًا لتطبيق نفس الأنماط أثناء تجنب أي آثار دلالية غير مرغوب فيها قد تجلبها العلامات.<mark>
<small>
على الرغم من عدم ظهوره أعلاه ، فلا تتردد في استخدامه <b>
وفي <i>
HTML5. <b>
يهدف إلى إبراز الكلمات أو العبارات دون نقل أهمية إضافية بينما <i>
يكون في الغالب للصوت والمصطلحات الفنية وما إلى ذلك.
أدوات النص
قم بتغيير محاذاة النص وتحويله ونمطه ووزنه ولونه باستخدام أدوات النص المساعدة وأدوات الألوان .
الاختصارات
تنفيذ منمق <abbr>
لعنصر HTML للاختصارات والمختصرات لإظهار النسخة الموسعة عند التمرير. الاختصارات لها تسطير افتراضي وتحصل على مؤشر مساعدة لتوفير سياق إضافي عند التمرير ولمستخدمي التقنيات المساعدة.
أضف .initialism
إلى الاختصار لحجم خط أصغر قليلاً.
أتر
لغة البرمجة
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
كتلة الاقتباس
لاقتباس كتل المحتوى من مصدر آخر داخل المستند الخاص بك. التفاف <blockquote class="blockquote">
حول أي HTML كاقتباس.
اقتباس مشهور موجود في عنصر blockquote.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
تسمية المصدر
إضافة <footer class="blockquote-footer">
لتحديد المصدر. لف اسم المصدر في العمل <cite>
.
اقتباس مشهور موجود في عنصر blockquote.
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
محاذاة
استخدم أدوات النص حسب الحاجة لتغيير محاذاة blockquote الخاص بك.
اقتباس مشهور موجود في عنصر blockquote.
<blockquote class="blockquote text-center">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
اقتباس مشهور موجود في عنصر blockquote.
<blockquote class="blockquote text-right">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
القوائم
غير منمق
قم بإزالة الهامش الافتراضي list-style
والهامش الأيسر من عناصر القائمة (الأطفال المباشرون فقط). ينطبق هذا فقط على عناصر قائمة الأطفال المباشرة ، مما يعني أنك ستحتاج إلى إضافة فئة لأي قوائم متداخلة أيضًا.
- هذه قائمة.
- يبدو غير منظم تمامًا.
- من الناحية الهيكلية ، لا تزال قائمة.
- ومع ذلك ، لا ينطبق هذا النمط إلا على العناصر الفرعية المباشرة.
- القوائم المتداخلة:
- لا يتأثرون بهذا الأسلوب
- ستظل تظهر رصاصة
- ولها هامش أيسر مناسب
- قد يظل هذا مفيدًا في بعض المواقف.
<ul class="list-unstyled">
<li>This is a list.</li>
<li>It appears completely unstyled.</li>
<li>Structurally, it's still a list.</li>
<li>However, this style only applies to immediate child elements.</li>
<li>Nested lists:
<ul>
<li>are unaffected by this style</li>
<li>will still show a bullet</li>
<li>and have appropriate left margin</li>
</ul>
</li>
<li>This may still come in handy in some situations.</li>
</ul>
في النسق
قم بإزالة الرموز النقطية من القائمة وقم بتطبيق بعض الضوء margin
بمزيج من فئتين ، .list-inline
و .list-inline-item
.
- هذا عنصر قائمة.
- وواحدة أخرى.
- لكنها معروضة بشكل مضمّن.
<ul class="list-inline">
<li class="list-inline-item">This is a list item.</li>
<li class="list-inline-item">And another one.</li>
<li class="list-inline-item">But they're displayed inline.</li>
</ul>
محاذاة قائمة الوصف
قم بمحاذاة المصطلحات والأوصاف أفقيًا باستخدام الفئات المحددة مسبقًا لنظام الشبكة (أو الخلطات الدلالية). لفترات أطول ، يمكنك اختياريًا إضافة .text-truncate
فئة لاقتطاع النص بعلامة حذف.
- قوائم الوصف
- قائمة وصف مثالية لتعريف المصطلحات.
- شرط
-
تعريف المصطلح.
وبعض نصوص تعريف العنصر النائب.
- مصطلح آخر
- هذا التعريف قصير ، لذا لا فقرات إضافية أو أي شيء.
- مصطلح مبتور هو مبتور
- يمكن أن يكون هذا مفيدًا عندما تكون المساحة ضيقة. يضيف علامة القطع في النهاية.
- التعشيش
-
- قائمة التعريفات المتداخلة
- سمعت أنك تحب قوائم التعريف. اسمحوا لي أن أضع قائمة تعريف داخل قائمة التعريف الخاصة بك.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">
<p>Definition for the term.</p>
<p>And some more placeholder definition text.</p>
</dd>
<dt class="col-sm-3">Another term</dt>
<dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
</dl>
</dd>
</dl>
أحجام الخطوط سريعة الاستجابة
اعتبارًا من الإصدار 4.3.0 ، يأتي Bootstrap مزودًا بخيار تمكين أحجام الخطوط المتجاوبة ، مما يسمح للنص بأن يتوسع بشكل طبيعي عبر الجهاز وأحجام منفذ العرض. يمكن تمكين RFS$enable-responsive-font-sizes
عن طريق تغيير متغير Sass إلى true
Bootstrap وإعادة تجميعه.
لدعم RFS ، نستخدم مزيج Sass لاستبدال خصائصنا العادية font-size
. سيتم تجميع أحجام الخطوط المتجاوبة في calc()
وظائف بمزيج من rem
وحدات منفذ العرض لتمكين سلوك التحجيم سريع الاستجابة. يمكن العثور على المزيد حول RFS وتكوينه في مستودع GitHub الخاص به .