in English

ტიპოგრაფია

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

ამ გვერდზე

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

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

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

html

<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-დან მცირე მეორადი სათაურის ტექსტის ხელახლა შესაქმნელად.

ლამაზი საჩვენებელი სათაური გაცვეთილი მეორადი ტექსტით

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

სათაურების ჩვენება

სათაურის ტრადიციული ელემენტები შექმნილია იმისთვის, რომ საუკეთესოდ იმუშაოს თქვენი გვერდის კონტენტით. როდესაც სათაურის გამორჩევა გჭირდებათ, გამოიყენეთ ჩვენების სათაური — უფრო დიდი, ოდნავ უფრო აზრიანი სათაურის სტილი.

ჩვენება 1

ჩვენება 2

ჩვენება 3

ჩვენება 4

ჩვენება 5

ჩვენება 6

<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-familyდა $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

ტყვია

გააკეთეთ აბზაცის გამორჩევა დამატებით .lead.

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

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

ჩასმული ტექსტის ელემენტები

სტილი HTML5 საერთო შიდა ელემენტებისთვის.

შეგიძლიათ გამოიყენოთ ნიშნის ტეგიმონიშნეთტექსტი.

~~ტექსტის ეს ხაზი განიხილება როგორც წაშლილი ტექსტი.~~

~~ტექსტის ეს სტრიქონი მიჩნეულია, რომ აღარ არის ზუსტი.~~

ტექსტის ეს ხაზი განიხილება, როგორც დოკუმენტის დამატება.

ტექსტის ეს ხაზი ხაზგასმული იქნება.

ტექსტის ეს ხაზი განიხილება როგორც წვრილმანი.

ეს სტრიქონი გამოტანილია როგორც თამამი ტექსტი.

ეს სტრიქონი გამოტანილია, როგორც დახრილი ტექსტი.

html

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

გაითვალისწინეთ, რომ ეს ტეგები უნდა იყოს გამოყენებული სემანტიკური მიზნებისთვის:

წარმოადგენს ტექსტს, რომელიც მონიშნულია ან მონიშნულია მითითების ან აღნიშვნის მიზნით.
წარმოადგენს გვერდით კომენტარებს და წვრილმანს, როგორიცაა საავტორო უფლებები და იურიდიული ტექსტი.
<s>წარმოადგენს ელემენტს, რომელიც აღარ არის შესაბამისი ან აღარ არის ზუსტი.
წარმოადგენს ინლაინ ტექსტის დიაპაზონს, რომელიც უნდა იყოს გადმოცემული ისე, რომ მიუთითებდეს, რომ მას აქვს არატექსტუალური ანოტაცია.

თუ გსურთ თქვენი ტექსტის სტილი, ამის ნაცვლად უნდა გამოიყენოთ შემდეგი კლასები:

.markგამოიყენებს იგივე სტილებს, როგორც .
.smallგამოიყენებს იგივე სტილებს, როგორც .
.text-decoration-underlineგამოიყენებს იგივე სტილებს, როგორც .
.text-decoration-line-throughგამოიყენებს იგივე სტილებს, როგორც <s>.

მიუხედავად იმისა, რომ ზემოთ არ არის ნაჩვენები, მოგერიდებათ გამოიყენოთ და HTML5-ში. მიზნად ისახავს სიტყვების ან ფრაზების ხაზგასმას დამატებითი მნიშვნელობის გადმოცემის გარეშე, ხოლო ძირითადად ხმისთვის, ტექნიკური ტერმინებისთვის და ა.შ.

ტექსტური საშუალებები

შეცვალეთ ტექსტის გასწორება, ტრანსფორმაცია, სტილი, წონა, ხაზის სიმაღლე, გაფორმება და ფერი ჩვენი ტექსტის უტილიტებისა და ფერის უტილიტებით .

აბრევიატურები

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

დაამატეთ .initialismაბრევიატურას ოდნავ მცირე ზომის შრიფტი.

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

ბლოკციტატები

თქვენი დოკუმენტის სხვა წყაროდან შინაარსის ბლოკების ციტირებისთვის. გადაიტანეთ <blockquote class="blockquote">ნებისმიერი HTML ციტატის სახით.

ცნობილი ციტატა, რომელიც შეიცავს 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>ან ბლოკის დონის ელემენტი (მაგ., ) .blockquote-footerკლასთან ერთად. აუცილებლად ჩაწერეთ წყაროს ნამუშევრის სახელიც <cite>.

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

html

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

გასწორება

გამოიყენეთ ტექსტური უტილიტები საჭიროებისამებრ თქვენი ბლოკციტატის გასწორების შესაცვლელად.

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

html

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

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

html

<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და მარცხენა ზღვარი სიის ელემენტებზე (მხოლოდ უშუალო ბავშვები). ეს ეხება მხოლოდ უშუალოდ ბავშვების სიის ელემენტებს , რაც ნიშნავს, რომ თქვენ მოგიწევთ კლასის დამატება ნებისმიერი ჩადგმული სიისთვის.

ეს არის სია.
როგორც ჩანს სრულიად უსტიქიურად.
სტრუქტურულად, ეს ჯერ კიდევ სიაა.
თუმცა, ეს სტილი ეხება მხოლოდ ბავშვის უშუალო ელემენტებს.
ჩადგმული სიები:
- ისინი არ განიცდიან ამ სტილს
- მაინც აჩვენებს ტყვიას
- და აქვს შესაბამისი მარცხენა ზღვარი
ეს შეიძლება მაინც გამოგადგებათ ზოგიერთ სიტუაციაში.

html

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

ეს არის სიის ელემენტი.
და კიდევ ერთი.
მაგრამ ისინი ნაჩვენებია ხაზში.

html

<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კლასი ტექსტის ელიფსისით შესაკვეცად.

აღწერილობის სიები

აღწერის სია შესანიშნავია ტერმინების განსაზღვრისთვის.

ვადა

ტერმინის განმარტება.

და კიდევ რამდენიმე ადგილის განმსაზღვრელი ტექსტი.

კიდევ ერთი ტერმინი

ეს განმარტება მოკლეა, ამიტომ არ არის ზედმეტი აბზაცები ან არაფერი.

შეკვეცილი ტერმინი შეკვეცილია

ეს შეიძლება იყოს სასარგებლო, როდესაც სივრცე შეზღუდულია. ბოლოს ამატებს ელიფსისს.

ბუდე

ჩადგმული განმარტებების სია: გავიგე, რომ მოგწონთ განმარტებების სიები. ნება მომეცით დავაყენო განმარტებების სია თქვენი განმარტებების სიაში.

html

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

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

მიქსინები

არ არსებობს გამოყოფილი მიქსები ტიპოგრაფიისთვის, მაგრამ Bootstrap იყენებს საპასუხო შრიფტის ზომას (RFS) .