الطباعة

وثائق وأمثلة لطباعة Bootstrap ، بما في ذلك الإعدادات العامة والعناوين والنص الأساسي والقوائم والمزيد.

على هذه الصفحة

الاعدادات العامة

يعيّن Bootstrap أنماط العرض والطباعة والارتباط العالمية الأساسية. عندما تكون هناك حاجة إلى مزيد من التحكم ، تحقق من فئات الأدوات النصية .

استخدم مجموعة خطوط أصلية تحدد الأفضل font-familyلكل نظام تشغيل وجهاز.
للحصول على مقياس نوع أكثر شمولاً ويمكن الوصول إليه ، نستخدم الجذر الافتراضي للمتصفح font-size(عادةً 16 بكسل) حتى يتمكن الزوار من تخصيص الإعدادات الافتراضية للمتصفح حسب الحاجة.
استخدم $font-family-base، $font-size-baseو ، $line-height-baseوالسمات كقاعدة مطبعية مطبقة على <body>.
اضبط لون الارتباط العام عبر $link-color.
استخدمه $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

العرض 5

شاشة 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

يتم تكوين عناوين العرض عبر $display-font-sizesخريطة Sass ومتغيرين ، $display-font-weightو $display-line-height.

عناوين العرض قابلة للتخصيص عبر متغيرين ، $display-font-familyو $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

قيادة

اجعل فقرة بارزة عن طريق الإضافة .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>

احذر من استخدام هذه العلامات للأغراض الدلالية:

يمثل نصًا تم تمييزه أو تمييزه لأغراض مرجعية أو تدوين.
تمثل التعليقات الجانبية والطباعة الصغيرة ، مثل حقوق النشر والنص القانوني.
<s>يمثل عنصرًا لم يعد ذا صلة أو لم يعد دقيقًا.
يمثل امتدادًا لنص مضمّن يجب أن يتم عرضه بطريقة تشير إلى أنه يحتوي على تعليق توضيحي غير نصي.

إذا كنت تريد تنسيق النص الخاص بك ، فيجب عليك استخدام الفئات التالية بدلاً من ذلك:

.markسيطبق نفس الأنماط مثل .
.smallسيطبق نفس الأنماط مثل .
.text-decoration-underlineسيطبق نفس الأنماط مثل .
.text-decoration-line-throughسيطبق نفس الأنماط مثل <s>.

على الرغم من عدم ظهوره أعلاه ، فلا تتردد في استخدامه وفي HTML5. يُقصد به إبراز الكلمات أو العبارات دون نقل أهمية إضافية ، بينما هو في الغالب للصوت ، والمصطلحات الفنية ، وما إلى ذلك.

أدوات النص

قم بتغيير محاذاة النص ، والتحويل ، والأسلوب ، والوزن ، وارتفاع السطر ، والديكور واللون من خلال أدوات النصوص وأدوات الألوان المساعدة الخاصة بنا .

الاختصارات

تنفيذ منمق <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>A well-known quote, contained in a blockquote element.</p>
</blockquote>

تسمية المصدر

تتطلب مواصفات HTML وضع إسناد blockquote خارج نطاق <blockquote>. عند تقديم الإسناد ، قم بلفك <blockquote>في a <figure>واستخدم <figcaption>عنصر مستوى الكتلة (على سبيل المثال ) مع .blockquote-footerالفصل. تأكد من لف اسم المصدر للعمل <cite>أيضًا.

اقتباس مشهور موجود في عنصر blockquote.

لغة البرمجة

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

محاذاة

استخدم أدوات النص حسب الحاجة لتغيير محاذاة blockquote الخاص بك.

اقتباس مشهور موجود في عنصر blockquote.

لغة البرمجة

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

اقتباس مشهور موجود في عنصر blockquote.

لغة البرمجة

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

القوائم

غير منمق

قم بإزالة الهامش الافتراضي 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>

أحجام الخطوط سريعة الاستجابة

في Bootstrap 5 ، قمنا بتمكين أحجام الخطوط المتجاوبة افتراضيًا ، مما يسمح للنص بأن يتوسع بشكل طبيعي عبر الجهاز وأحجام منفذ العرض. ألق نظرة على صفحة RFS لمعرفة كيفية عمل ذلك.

ساس

المتغيرات

تحتوي العناوين على بعض المتغيرات المخصصة لتغيير الحجم والتباعد.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

تحتوي عناصر الطباعة المتنوعة التي تم تناولها هنا وفي Reboot أيضًا على متغيرات مخصصة.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

الخلطات

لا توجد عمليات مزج مخصصة للطباعة ، ولكن Bootstrap يستخدم ميزة Responsive Font Sizing (RFS) .