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