Տպագրություն

Փաստաթղթեր և օրինակներ Bootstrap տպագրության համար, ներառյալ գլոբալ կարգավորումները, վերնագրերը, հիմնական տեքստը, ցուցակները և այլն:

Այս էջում

Համաշխարհային կարգավորումներ

Bootstrap-ը սահմանում է հիմնական գլոբալ ցուցադրման, տպագրության և կապի ոճերը: Երբ ավելի շատ վերահսկողություն է անհրաժեշտ, ստուգեք տեքստային օգտակար դասերը :

Օգտագործեք բնօրինակ տառատեսակների կույտ , որն ընտրում է լավագույնը font-familyյուրաքանչյուր ՕՀ-ի և սարքի համար:
Ավելի ընդգրկուն և մատչելի տիպի սանդղակի համար մենք օգտագործում ենք զննարկչի լռելյայն արմատը font-size(սովորաբար 16px), որպեսզի այցելուները կարողանան հարմարեցնել իրենց բրաուզերի լռելյայններն ըստ անհրաժեշտության:
Օգտագործեք $font-family-base, $font-size-baseև $line-height-baseատրիբուտները որպես մեր տպագրական բազա, որը կիրառվում է <body>.
Սահմանեք գլոբալ հղման գույնը $link-color.
Օգտագործեք $body-bga-ը background-color( <body>ըստ #fffլռելյայն) վրա դնելու համար:

Այս ոճերը կարելի է գտնել ներսում _reboot.scss, իսկ գլոբալ փոփոխականները սահմանվում են _variables.scss. Համոզվեք, որ $font-size-baseտեղադրեք rem:

Վերնագրեր

Բոլոր HTML վերնագրերը, <h1>միջոցով <h6>, հասանելի են:

Վերնագիր	Օրինակ
`<h1></h1>`	հ1. Bootstrap վերնագիր
`<h2></h2>`	h2. Bootstrap վերնագիր
`<h3></h3>`	h3. Bootstrap վերնագիր
`<h4></h4>`	h4. Bootstrap վերնագիր
`<h5></h5>`	h5. Bootstrap վերնագիր
`<h6></h6>`	h6. Bootstrap վերնագիր

<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 տարրը:

հ1. Bootstrap վերնագիր

h2. Bootstrap վերնագիր

h3. Bootstrap վերնագիր

h4. Bootstrap վերնագիր

h5. Bootstrap վերնագիր

h6. Bootstrap վերնագիր

html

<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-ից փոքր երկրորդական վերնագրի տեքստը վերստեղծելու համար:

Գեղեցիկ ցուցադրման վերնագիր Խունացած երկրորդական տեքստով

html

<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-sizesSass քարտեզի և երկու փոփոխականների միջոցով, $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.

Սա առաջատար պարբերություն է: Այն առանձնանում է սովորական պարբերություններից։

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Ներդիր տեքստի տարրեր

HTML5 ընդհանուր ներկառուցված տարրերի ոճավորում:

Դուք կարող եք օգտագործել նշանի պիտակը, որպեսզիընդգծելտեքստը։

~~Տեքստի այս տողը նախատեսված է որպես ջնջված տեքստ:~~

~~Տեքստի այս տողը պետք է դիտարկվի որպես այլևս ոչ ճշգրիտ:~~

Տեքստի այս տողը նախատեսված է որպես փաստաթղթի հավելում:

Տեքստի այս տողը կարտացոլվի այնպես, ինչպես ընդգծված է:

Տեքստի այս տողը նախատեսված է որպես նուրբ տպագիր:

Այս տողը ներկայացվում է որպես թավ տեքստ:

Այս տողը ներկայացվել է որպես շեղ տեքստ:

html

<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-ում: նախատեսված է ընդգծել բառերը կամ արտահայտությունները՝ առանց լրացուցիչ կարևորություն հաղորդելու, մինչդեռ հիմնականում նախատեսված է ձայնի, տեխնիկական տերմինների և այլնի համար:

Տեքստային կոմունալ ծառայություններ

Փոխեք տեքստի հավասարեցումը, փոխակերպումը, ոճը, քաշը, գծի բարձրությունը, ձևավորումը և գույնը մեր տեքստային և գունային օգտակար ծրագրերի միջոցով :

հապավումներ

HTML-ի տարրի ոճավորված իրականացում <abbr>հապավումների և հապավումների համար՝ սավառնելիս ընդլայնված տարբերակը ցուցադրելու համար: Հապավումները ունեն լռելյայն ընդգծում և ձեռք են բերում օգնության կուրսոր՝ սավառնելիս լրացուցիչ համատեքստ տրամադրելու և օժանդակ տեխնոլոգիաների օգտագործողներին:

.initialismՄի փոքր ավելի փոքր տառաչափի համար ավելացրեք հապավումը:

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Արգելափակման մեջբերումներ

Ձեր փաստաթղթում մեկ այլ աղբյուրից բովանդակության բլոկներ մեջբերելու համար: Փաթաթեք <blockquote class="blockquote">ցանկացած HTML-ի շուրջը որպես մեջբերում:

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Աղբյուրի անվանումը

HTML հատկանիշը պահանջում է, որ blockquote վերագրումը տեղադրվի <blockquote>. Վերագրում տրամադրելիս փաթեթավորեք ձեր <blockquote>a-ով և դասի հետ <figure>օգտագործեք a <figcaption>կամ բլոկի մակարդակի տարր (օրինակ՝ ) : .blockquote-footerՀամոզվեք, որ փաթաթեք նաև սկզբնաղբյուրի աշխատանքի անվանումը <cite>:

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

html

<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>

Հավասարեցում

Անհրաժեշտության դեպքում օգտագործեք տեքստային կոմունալ ծառայություններ՝ ձեր բլոկչակերտի հավասարեցումը փոխելու համար:

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

html

<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>

Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:

html

<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և ձախ լուսանցքը ցանկի տարրերից (միայն անմիջական երեխաների համար): Սա վերաբերում է միայն անմիջապես երեխաների ցանկի տարրերին , ինչը նշանակում է, որ դուք պետք է դասը ավելացնեք նաև ցանկացած ներդիր ցուցակների համար:

Սա ցուցակ է։
Այն ամբողջովին չոճավորված է թվում:
Կառուցվածքային առումով դա դեռ ցուցակ է:
Այնուամենայնիվ, այս ոճը վերաբերում է միայն անմիջական երեխայի տարրերին:
Ներդրված ցուցակներ.
- նրանք չեն ազդում այս ոճի վրա
- դեռ մի փամփուշտ ցույց կտա
- և ունեն համապատասխան ձախ լուսանցք
Սա դեռ կարող է օգտակար լինել որոշ իրավիճակներում:

html

<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>

Inline

Հեռացրեք ցանկի կետերը և կիրառեք լույս marginերկու դասերի համակցությամբ .list-inlineև .list-inline-item.

Սա ցանկի տարր է:
Եվ ևս մեկը։
Բայց դրանք ցուցադրվում են ներդիրում:

html

<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դաս՝ տեքստը էլիպսով կտրելու համար:

Նկարագրության ցուցակներ

Նկարագրության ցանկը կատարյալ է տերմինները սահմանելու համար:

Ժամկետ

Տերմինի սահմանում.

Եվ ևս մի քանի տեղապահի սահմանման տեքստ:

Մեկ այլ տերմին

Այս սահմանումը կարճ է, ուստի ոչ մի լրացուցիչ պարբերություն կամ որևէ այլ բան:

Կտրված տերմինը կտրված է

Սա կարող է օգտակար լինել, երբ տարածությունը սուղ է: Վերջում ավելացնում է էլիպսիս:

Բնադրում

Ներդրված սահմանումների ցուցակ: Ես լսել եմ, որ դուք սիրում եք սահմանումների ցուցակները: Թույլ տվեք սահմանումների ցուցակ դնեմ ձեր սահմանումների ցանկում:

html

<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-ն օգտագործում է Պատասխանատու տառատեսակների չափսեր (RFS) :