Source

Τυπογραφία

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

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

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

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

<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>είναι κυρίως για φωνή, τεχνικούς όρους κ.λπ.

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

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

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

Στυλιζαρισμένη εφαρμογή του <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 ως απόσπασμα.

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
Ακέραιος μολυσματικός lorem at massa
Διευκόλυνση σε pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

<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τάξη για να περικόψετε το κείμενο με μια έλλειψη.

Λίστες περιγραφής

Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.

Euismod

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, telus 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-sizeερωτήματα για τα μέσα και τα μέσα θέλετε.

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