Տպագրություն
Փաստաթղթեր և օրինակներ 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 վերնագիր
<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>
Ցուցադրել վերնագրերը
Ավանդական վերնագրի տարրերը նախատեսված են ձեր էջի բովանդակության մեջ լավագույնս աշխատելու համար: Երբ ձեզ անհրաժեշտ է վերնագիր առանձնանալու համար, մտածեք ցուցադրման վերնագրի օգտագործման մասին ՝ ավելի մեծ, մի փոքր ավելի կարծիք ունեցող վերնագրի ոճ:
<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-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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>
Զգուշացեք, որ այդ պիտակները պետք է օգտագործվեն իմաստաբանական նպատակներով.
<mark>ներկայացնում է տեքստ, որը նշված կամ ընդգծված է հղման կամ նշագրման նպատակով:<small>ներկայացնում է կողմնակի մեկնաբանություններ և մանրատառ, օրինակ՝ հեղինակային իրավունքի և իրավական տեքստի:<s>ներկայացնում է տարր, որն այլևս տեղին չէ կամ այլևս ճշգրիտ չէ:<u>ներկայացնում է ներկառուցված տեքստի մի հատված, որը պետք է ներկայացվի այնպես, որ ցույց տա, որ այն ունի ոչ տեքստային անոտացիա:
Եթե ցանկանում եք ոճավորել ձեր տեքստը, փոխարենը պետք է օգտագործեք հետևյալ դասերը.
.markկկիրառի նույն ոճերը, ինչ<mark>..smallկկիրառի նույն ոճերը, ինչ<small>..text-decoration-underlineկկիրառի նույն ոճերը, ինչ<u>..text-decoration-line-throughկկիրառի նույն ոճերը, ինչ<s>.
Թեև վերևում նշված չէ, ազատ զգալ օգտագործել <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>A well-known quote, contained in a blockquote element.</p>
</blockquote>
Աղբյուրի անվանումը
HTML հատկանիշը պահանջում է, որ blockquote վերագրումը տեղադրվի <blockquote>. Վերագրում տրամադրելիս փաթեթավորեք ձեր <blockquote>a-ով և դասի հետ <figure>օգտագործեք a <figcaption>կամ բլոկի մակարդակի տարր (օրինակ՝ <p>) : .blockquote-footerՀամոզվեք, որ փաթաթեք նաև սկզբնաղբյուրի աշխատանքի անվանումը <cite>:
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
<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>
Հավասարեցում
Անհրաժեշտության դեպքում օգտագործեք տեքստային կոմունալ ծառայություններ՝ ձեր բլոկչակերտի հավասարեցումը փոխելու համար:
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
<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>
Հայտնի մեջբերում, որը պարունակվում է բլոկ չակերտի տարրում:
<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>
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>
Պատասխանատու տառատեսակների չափսեր
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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Միքսիններ
Տպագրության համար հատուկ միքսներ չկան, բայց Bootstrap-ն օգտագործում է Պատասխանատու տառատեսակների չափսեր (RFS) :