Source

ტიპოგრაფია

დოკუმენტაცია და მაგალითები Bootstrap ტიპოგრაფიისთვის, მათ შორის გლობალური პარამეტრები, სათაურები, ძირითადი ტექსტი, სიები და სხვა.

გლობალური პარამეტრები

Bootstrap ადგენს ძირითად გლობალურ ჩვენებას, ტიპოგრაფიას და ბმულის სტილებს. როდესაც მეტი კონტროლია საჭირო, შეამოწმეთ ტექსტური სასარგებლო კლასები .

გამოიყენეთ მშობლიური შრიფტის დასტა , რომელიც ირჩევს საუკეთესოს font-familyთითოეული OS და მოწყობილობისთვის.
უფრო ინკლუზიური და ხელმისაწვდომი ტიპის სკალისთვის, ჩვენ ვივარაუდებთ, რომ ბრაუზერის ნაგულისხმევი ფესვი font-size(ჩვეულებრივ 16 პიქსელია), ასე რომ ვიზიტორებს შეუძლიათ საჭიროებისამებრ დააკონფიგურირონ ბრაუზერის ნაგულისხმევი პარამეტრები.
გამოიყენეთ $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>`	h1. ჩატვირთვის სათაური
`<h2></h2>`	h2. ჩატვირთვის სათაური
`<h3></h3>`	h3. ჩატვირთვის სათაური
`<h4></h4>`	h4. ჩატვირთვის სათაური
`<h5></h5>`	h5. ჩატვირთვის სათაური
`<h6></h6>`	h6. ჩატვირთვის სათაური

<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 ელემენტი.

h1. ჩატვირთვის სათაური

h2. ჩატვირთვის სათაური

h3. ჩატვირთვის სათაური

h4. ჩატვირთვის სათაური

h5. ჩატვირთვის სათაური

h6. ჩატვირთვის სათაური

<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, est non commodo luctus.

<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>ელემენტის სტილიზებული იმპლემენტაცია აბრევიატურებისა და აკრონიმებისთვის გაფართოებული ვერსიის საჩვენებლად hover-ზე. აბრევიატურებს აქვთ ნაგულისხმევი ხაზგასმა და იღებენ დამხმარე კურსორს, რათა უზრუნველყონ დამატებითი კონტექსტი ჰოვერზე და დამხმარე ტექნოლოგიების მომხმარებლებისთვის.

დაამატეთ .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
მთელი რიცხვი molestie lorem at massa
გამარტივება პრეტიუმ ნისლ ალიკეტში
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
ენეან იჯდეს ამეთ ერატ ნუნც
ეგეთი პორტტიტორი ლორემი

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

Ხაზში

ამოიღეთ სიის პუნქტები და გამოიყენეთ შუქი marginორი კლასის კომბინაციით .list-inlineდა .list-inline-item.

Lorem ipsum
Phasellus iaculis
ნულა ვოლუტპატი

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