Source

الطباعة

وثائق وأمثلة لطباعة 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.

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تريده واستفسارات الوسائط.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}