in English

Τυπογραφία

Τεκμηρίωση και παραδείγματα για την τυπογραφία 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.

Αυτή είναι μια κύρια παράγραφος. Ξεχωρίζει από τις κανονικές παραγράφους.

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

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

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

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

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

Αποκριτικά μεγέθη γραμματοσειράς

Από την έκδοση 4.3.0, το Bootstrap παρέχεται με την επιλογή ενεργοποίησης μεγεθών γραμματοσειρών με απόκριση, επιτρέποντας στο κείμενο να κλιμακώνεται πιο φυσικά σε μεγέθη συσκευών και θυρών προβολής. Το RFS μπορεί να ενεργοποιηθεί αλλάζοντας τη $enable-responsive-font-sizesμεταβλητή Sass σε trueκαι μεταγλωττίζοντας εκ νέου το Bootstrap.

Για να υποστηρίξουμε το RFS , χρησιμοποιούμε μια μίξη Sass για να αντικαταστήσουμε τις κανονικές μας font-sizeιδιότητες. Τα μεγέθη γραμματοσειρών με απόκριση θα συγκεντρωθούν σε calc()συναρτήσεις με συνδυασμό remμονάδων και θυρών προβολής για να ενεργοποιηθεί η συμπεριφορά κλιμάκωσης απόκρισης. Περισσότερα για το RFS και τη διαμόρφωσή του μπορείτε να βρείτε στο αποθετήριο GitHub .