الطباعة
وثائق وأمثلة لطباعة 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. عنوان التمهيد
تخصيص العناوين
استخدم فئات الأدوات المضمنة لإعادة إنشاء نص العنوان الثانوي الصغير من Bootstrap 3.
عنوان عرض رائع مع نص ثانوي باهت
عرض العناوين
تم تصميم عناصر العناوين التقليدية للعمل بشكل أفضل في محتوى صفحتك. عندما تحتاج إلى عنوان يبرز ، ضع في اعتبارك استخدام عنوان عرض —نمط عنوان أكبر حجماً وأكثر إبداءً في الرأي. ضع في اعتبارك أن هذه العناوين لا تستجيب افتراضيًا ، ولكن من الممكن تمكين أحجام الخطوط المتجاوبة .
عرض 1 |
عرض 2 |
العرض 3 |
عرض 4 |
قيادة
اجعل فقرة بارزة عن طريق الإضافة .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est noncommo luctus.
عناصر النص المضمنة
التصميم لعناصر HTML5 المضمنة الشائعة.
يمكنك استخدام علامة العلامة لتسليط الضوءنص.
من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.
من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.
من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.
سيتم عرض هذا السطر كما هو مسطر
من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.
تم تقديم هذا السطر كنص عريض.
تم تقديم هذا السطر كنص مائل.
.mark
والفصول .small
متاحة أيضًا لتطبيق نفس الأنماط أثناء تجنب أي آثار دلالية غير مرغوب فيها قد تجلبها العلامات <mark>
.<small>
على الرغم من عدم ظهوره أعلاه ، فلا تتردد في استخدامه <b>
وفي <i>
HTML5. <b>
يهدف إلى إبراز الكلمات أو العبارات دون نقل أهمية إضافية بينما <i>
يكون في الغالب للصوت والمصطلحات الفنية وما إلى ذلك.
أدوات النص
قم بتغيير محاذاة النص وتحويله ونمطه ووزنه ولونه باستخدام أدوات النص المساعدة وأدوات الألوان .
الاختصارات
تنفيذ منمق <abbr>
لعنصر HTML للاختصارات والمختصرات لإظهار النسخة الموسعة عند التمرير. الاختصارات لها تسطير افتراضي وتحصل على مؤشر مساعدة لتوفير سياق إضافي عند التمرير ولمستخدمي التقنيات المساعدة.
أضف .initialism
إلى الاختصار لحجم خط أصغر قليلاً.
أتر
لغة البرمجة
كتلة الاقتباس
لاقتباس كتل المحتوى من مصدر آخر داخل المستند الخاص بك. التفاف <blockquote class="blockquote">
حول أي HTML كاقتباس.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
تسمية المصدر
أضف <footer class="blockquote-footer">
لتحديد المصدر. لف اسم المصدر في العمل <cite>
.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
محاذاة
استخدم أدوات النص حسب الحاجة لتغيير محاذاة blockquote الخاص بك.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
القوائم
غير منمق
قم بإزالة الهامش الافتراضي 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
في النسق
قم بإزالة الرموز النقطية من القائمة وقم بتطبيق بعض الضوء margin
بمزيج من فئتين ، .list-inline
و .list-inline-item
.
- لوريم إيبسوم
- Phasellus iaculis
- نولا فولوتبات
محاذاة قائمة الوصف
قم بمحاذاة المصطلحات والأوصاف أفقيًا باستخدام الفئات المحددة مسبقًا لنظام الشبكة (أو الخلطات الدلالية). لفترات أطول ، يمكنك اختياريًا إضافة .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.
أحجام الخطوط سريعة الاستجابة
يأتي Bootstrap v4.3 مزودًا بخيار لتمكين أحجام الخطوط المتجاوبة ، مما يسمح للنص بالحجم بشكل طبيعي عبر الجهاز وأحجام منفذ العرض. يمكن تمكين RFS$enable-responsive-font-sizes
عن طريق تغيير متغير Sass إلى true
Bootstrap وإعادة تجميعه.
لدعم RFS ، نستخدم مزيج Sass لاستبدال خصائصنا العادية font-size
. سيتم تجميع أحجام الخطوط المتجاوبة في calc()
وظائف بمزيج من rem
وحدات منفذ العرض لتمكين سلوك التحجيم سريع الاستجابة. يمكن العثور على المزيد حول RFS وتكوينه في مستودع GitHub الخاص به .