Τυπογραφία

Τεκμηρίωση και παραδείγματα για την τυπογραφία Bootstrap, συμπεριλαμβανομένων καθολικών ρυθμίσεων, επικεφαλίδων, κειμένου σώματος, λιστών και πολλά άλλα.

Σε αυτήν την σελίδα

Γενικές ρυθμίσεις

Το Bootstrap ορίζει βασικά στυλ καθολικής εμφάνισης, τυπογραφίας και συνδέσμων. Όταν χρειάζεται περισσότερος έλεγχος, ελέγξτε τις τάξεις βοηθητικών προγραμμάτων κειμένου .

Χρησιμοποιήστε μια εγγενή στοίβα γραμματοσειρών που επιλέγει το καλύτερο font-familyγια κάθε λειτουργικό σύστημα και συσκευή.
Για μια πιο περιεκτική και προσβάσιμη κλίμακα τύπου, χρησιμοποιούμε την προεπιλεγμένη ρίζα του προγράμματος περιήγησης font-size(συνήθως 16 εικονοστοιχεία), ώστε οι επισκέπτες να μπορούν να προσαρμόσουν τις προεπιλογές του προγράμματος περιήγησής τους ανάλογα με τις ανάγκες.
Χρησιμοποιήστε τα χαρακτηριστικά $font-family-base, $font-size-baseκαι $line-height-baseως τυπογραφική βάση που εφαρμόζεται στο <body>.
Ορίστε το χρώμα καθολικού συνδέσμου μέσω $link-color.
Χρησιμοποιήστε $body-bgτο για να ορίσετε ένα background-colorστο <body>( #fffαπό προεπιλογή).

Αυτά τα στυλ βρίσκονται στο _reboot.scss, και οι καθολικές μεταβλητές ορίζονται στο _variables.scss. Βεβαιωθείτε ότι έχετε $font-size-baseεγκαταστήσει rem.

Επικεφαλίδες

Όλες οι επικεφαλίδες HTML, <h1>μέσω <h6>, είναι διαθέσιμες.

Επικεφαλίδα	Παράδειγμα
`<h1></h1>`	h1. Επικεφαλίδα 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.

h1. Επικεφαλίδα 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

Οθόνη 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-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>

Προσέξτε ότι αυτές οι ετικέτες πρέπει να χρησιμοποιούνται για σημασιολογικούς σκοπούς:

αντιπροσωπεύει κείμενο που επισημαίνεται ή επισημαίνεται για λόγους αναφοράς ή σημειογραφίας.
αντιπροσωπεύει παράπλευρα σχόλια και μικρά γράμματα, όπως πνευματικά δικαιώματα και νομικό κείμενο.
<s>αντιπροσωπεύει στοιχεία που δεν είναι πλέον σχετικά ή δεν είναι πλέον ακριβή.
αντιπροσωπεύει ένα εύρος ενσωματωμένου κειμένου το οποίο θα πρέπει να αποδοθεί με τρόπο που να δείχνει ότι έχει μη κειμενικό σχολιασμό.

Εάν θέλετε να δημιουργήσετε στυλ στο κείμενό σας, θα πρέπει να χρησιμοποιήσετε τις ακόλουθες κλάσεις:

.markθα εφαρμόσει τα ίδια στυλ με το .
.smallθα εφαρμόσει τα ίδια στυλ με το .
.text-decoration-underlineθα εφαρμόσει τα ίδια στυλ με το .
.text-decoration-line-throughθα εφαρμόσει τα ίδια στυλ με το <s>.

Αν και δεν εμφανίζεται παραπάνω, μη διστάσετε να χρησιμοποιήσετε και σε HTML5. προορίζεται για την επισήμανση λέξεων ή φράσεων χωρίς να αποδίδει πρόσθετη σημασία, ενώ είναι κυρίως για φωνή, τεχνικούς όρους κ.λπ.

Βοηθητικά προγράμματα κειμένου

Αλλάξτε τη στοίχιση κειμένου, τη μετατροπή, το στυλ, το βάρος, το ύψος γραμμής, τη διακόσμηση και το χρώμα με τα βοηθητικά προγράμματα κειμένου και τα βοηθητικά προγράμματα χρώματος .

Συντομογραφίες

Στυλιζαρισμένη εφαρμογή του <abbr>στοιχείου HTML για συντομογραφίες και ακρωνύμια για εμφάνιση της διευρυμένης έκδοσης στο δείκτη του ποντικιού. Οι συντομογραφίες έχουν μια προεπιλεγμένη υπογράμμιση και αποκτούν έναν δρομέα βοήθειας για να παρέχουν πρόσθετο πλαίσιο κατά την τοποθέτηση του δείκτη και στους χρήστες υποστηρικτικών τεχνολογιών.

Προσθέστε .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>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Ονομάζοντας μια πηγή

Η προδιαγραφή HTML απαιτεί να τοποθετείται η απόδοση μπλοκ εισαγωγικών εκτός του <blockquote>. Όταν παρέχετε απόδοση, τυλίξτε το <blockquote>σε ένα <figure>και χρησιμοποιήστε ένα <figcaption>ή ένα στοιχείο επιπέδου μπλοκ (π.χ. ) με την .blockquote-footerτάξη. Φροντίστε να τυλίξετε και το όνομα του έργου πηγής <cite>.

Ένα πολύ γνωστό απόσπασμα, που περιέχεται σε ένα στοιχείο blockquote.

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

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

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

Στη γραμμή

Αφαιρέστε τις κουκκίδες μιας λίστας και εφαρμόστε λίγο φως 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 για να μάθετε πώς λειτουργεί αυτό.

Sass

Μεταβλητές

Οι επικεφαλίδες έχουν ορισμένες αποκλειστικές μεταβλητές για το μέγεθος και την απόσταση.

$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 χρησιμοποιεί το Responsive Font Sizing (RFS) .