ტიპოგრაფია

დოკუმენტაცია და მაგალითები 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.

ეს არის წამყვანი აბზაცი. ის გამოირჩევა ჩვეულებრივი აბზაცებიდან.

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

ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

წყაროს დასახელება

დაამატეთ <footer class="blockquote-footer">წყაროს იდენტიფიცირებისთვის. ჩაწერეთ წყაროს ნამუშევრის სახელი <cite>.

ცნობილი ციტატა, რომელიც შეიცავს blockquote ელემენტს.

ვინმე ცნობილი წყაროს სათაურში

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

ვინმე ცნობილი წყაროს სათაურში

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

ვინმე ცნობილი წყაროს სათაურში

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

Ხაზში

ამოიღეთ სიის პუნქტები და გამოიყენეთ შუქი 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 საცავში .