Source

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

Փաստաթղթեր և օրինակներ 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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, դա ոչ կոմոդո Կասետային.

<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>հիմնականում նախատեսված է ձայնի, տեխնիկական տերմինների և այլնի համար:

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

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

հապավումներ

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- ի շուրջը որպես մեջբերում:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

<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. Ամբողջ թիվը posuere erat a ante.

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ամբողջ թիվը posuere erat a ante.

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

<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. Ամբողջ թիվը posuere erat a ante.

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

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ամբողջական մոլեստի լորեմ և մասսա
Հեշտացում պրետիում նիսլ ալիքում
Նալլա volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Էնեան նստել ամետ էրատ նունց
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>

Inline

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

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

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

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

Էվիզմոդ

Vestibulum id 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-sizes և լրատվամիջոցների հարցումներ, որոնք ցանկանում եք:

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