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