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

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

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

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

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

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

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

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

.markև .smallդասերը հասանելի են նաև նույն ոճերը կիրառելու համար, ինչպես <mark>և <small>խուսափելով որևէ անցանկալի իմաստային հետևանքներից, որոնք կբերեն թեգերը:

Թեև վերևում ներկայացված չէ, ազատ զգալ օգտագործել <b>և <i>HTML5-ում: <b>նախատեսված է ընդգծել բառերը կամ արտահայտությունները՝ առանց լրացուցիչ կարևորություն հաղորդելու, մինչդեռ <i>հիմնականում նախատեսված է ձայնի, տեխնիկական տերմինների և այլնի համար:

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

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

հապավումներ

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

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

attr

HTML

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

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

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

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

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

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

Ավելացրեք <footer class="blockquote-footer">աղբյուրը նույնականացնելու համար: Փաթեթավորեք սկզբնաղբյուր աշխատանքի անվանումը <cite>:

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

Աղբյուրի վերնագրում հայտնի մեկը

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

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

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

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

Աղբյուրի վերնագրում հայտնի մեկը

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

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

Աղբյուրի վերնագրում հայտնի մեկը

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

Ցուցակներ

Ոչ ոճավորված

Հեռացրեք լռելյայն 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>

Inline

Հեռացրեք ցանկի կետերը և կիրառեք լույս 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>

Պատասխանատու տառատեսակների չափսեր

V4.3.0-ի դրությամբ, Bootstrap-ը տրամադրվում է արձագանքող տառատեսակների չափերը միացնելու տարբերակով, ինչը թույլ է տալիս տեքստը ավելի բնական կերպով մասշտաբել սարքի և տեսադաշտի չափսերում: RFS- ը կարող է միացված լինել՝ փոխելով $enable-responsive-font-sizesSass փոփոխականը trueև վերակազմավորելով Bootstrap:

RFS- ին աջակցելու համար մենք օգտագործում ենք Sass mixin՝ փոխարինելու մեր սովորական font-sizeհատկությունները: Պատասխանատու տառատեսակների չափերը կկազմավորվեն calc()գործառույթների մեջ՝ միախառնված remև տեսադաշտի միավորներով, որպեսզի հնարավոր լինի արձագանքող մասշտաբային վարքագիծը: RFS- ի և դրա կազմաձևման մասին ավելին կարելի է գտնել նրա GitHub պահոցում :