الطباعة
وثائق وأمثلة لطباعة 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. عنوان التمهيد |
|
h2. عنوان التمهيد |
|
h3. عنوان التمهيد |
|
h4. عنوان التمهيد |
|
h5. عنوان التمهيد |
|
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.
تم تصميم عناصر العناوين التقليدية للعمل بشكل أفضل في محتوى صفحتك. عندما تحتاج إلى عنوان يبرز ، ضع في اعتبارك استخدام عنوان عرض —نمط عنوان أكبر حجماً وأكثر إبداءً في الرأي.
عرض 1 |
عرض 2 |
العرض 3 |
عرض 4 |
اجعل فقرة بارزة عن طريق الإضافة .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est noncommo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 كاقتباس.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
أضف <footer class="blockquote-footer">
لتحديد المصدر. لف اسم المصدر في العمل <cite>
.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
استخدم أدوات النص حسب الحاجة لتغيير محاذاة blockquote الخاص بك.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
قم بإزالة الهامش الافتراضي list-style
والهامش الأيسر من عناصر القائمة (الأطفال المباشرون فقط). ينطبق هذا فقط على عناصر قائمة الأطفال المباشرة ، مما يعني أنك ستحتاج إلى إضافة فئة لأي قوائم متداخلة أيضًا.
- أبجد هوز دولور الجلوس امات
- Consectetur adipiscing النخبة
- عدد صحيح molestie lorem في ماسا
- Facilisis في فترة ما قبل nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- الدهليز laoreet porttitor sem
- AC tristique Libero volutpat أت
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
قم بإزالة الرموز النقطية من القائمة وقم بتطبيق بعض الضوء margin
بمزيج من فئتين ، .list-inline
و .list-inline-item
.
- لوريم إيبسوم
- Phasellus iaculis
- نولا فولوتبات
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
قم بمحاذاة المصطلحات والأوصاف أفقيًا باستخدام الفئات المحددة مسبقًا لنظام الشبكة (أو الخلطات الدلالية). لفترات أطول ، يمكنك اختياريًا إضافة .text-truncate
فئة لاقتطاع النص بعلامة حذف.
- قوائم الوصف
- قائمة وصف مثالية لتعريف المصطلحات.
- يوسمود
-
الدهليز معرف ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- مصطلح مبتور هو مبتور
- Fusce dapibus ، tellus ac cursus COMMODO ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus.
- التعشيش
-
- قائمة التعريفات المتداخلة
- Aenean posuere ، tortor sed cursus feugiat ، nunc augue blandit nunc.
<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">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
تشير الطباعة المتجاوبة إلى قياس النص والمكونات ببساطة عن طريق تعديل عنصر الجذر font-size
ضمن سلسلة من استعلامات الوسائط. لا يقوم Bootstrap بذلك نيابةً عنك ، ولكن من السهل إضافته إذا احتجت إليه.
هذا مثال على ذلك في الممارسة. اختر ما font-size
تريده واستفسارات الوسائط.