Επανεκκίνηση

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

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

Πλησιάζω

Η επανεκκίνηση βασίζεται στην Κανονικοποίηση, παρέχοντας πολλά στοιχεία HTML με στυλ με κάποια γνώμη χρησιμοποιώντας μόνο επιλογείς στοιχείων. Το πρόσθετο styling γίνεται μόνο με μαθήματα. Για παράδειγμα, κάνουμε επανεκκίνηση ορισμένων <table>στυλ για μια απλούστερη γραμμή βάσης και αργότερα παρέχουμε .table, .table-bordered, και άλλα.

Ακολουθούν οι οδηγίες και οι λόγοι για την επιλογή του τι θα αντικατασταθεί στην Επανεκκίνηση:

Ενημερώστε ορισμένες προεπιλεγμένες τιμές του προγράμματος περιήγησης για να χρησιμοποιήσετε rems αντί για ems για κλιμακούμενη απόσταση στοιχείων.
Αποφύγετε margin-top. Τα κάθετα περιθώρια μπορεί να καταρρεύσουν, προκαλώντας απροσδόκητα αποτελέσματα. Το πιο σημαντικό όμως, μια ενιαία κατεύθυνση marginείναι ένα απλούστερο νοητικό μοντέλο.
Για ευκολότερη κλιμάκωση στα μεγέθη συσκευών, τα στοιχεία μπλοκ θα πρέπει να χρησιμοποιούν rems για margins.
Διατηρήστε στο ελάχιστο τις δηλώσεις σχετικά με τα fontακίνητα, χρησιμοποιώντας inheritόποτε είναι δυνατόν.

Μεταβλητές CSS

Προστέθηκε στην έκδοση 5.2.0

Με την έκδοση 5.1.1, τυποποιήσαμε τα απαιτούμενα @importσε όλα τα πακέτα CSS (συμπεριλαμβανομένων των bootstrap.css, bootstrap-reboot.css, και bootstrap-grid.css) για να συμπεριλάβουμε _root.scss. Αυτό προσθέτει :rootμεταβλητές επιπέδου CSS σε όλα τα πακέτα, ανεξάρτητα από το πόσες από αυτές χρησιμοποιούνται σε αυτό το πακέτο. Τελικά, το Bootstrap 5 θα συνεχίσει να βλέπει περισσότερες μεταβλητές CSS να προστίθενται με την πάροδο του χρόνου, προκειμένου να παρέχει περισσότερη προσαρμογή σε πραγματικό χρόνο χωρίς να χρειάζεται πάντα να μεταγλωττίζετε ξανά το Sass. Η προσέγγισή μας είναι να πάρουμε τις μεταβλητές πηγής Sass και να τις μετατρέψουμε σε μεταβλητές CSS. Με αυτόν τον τρόπο, ακόμα κι αν δεν χρησιμοποιείτε μεταβλητές CSS, εξακολουθείτε να έχετε όλη τη δύναμη του Sass. Αυτό είναι ακόμη σε εξέλιξη και θα χρειαστεί χρόνος για να εφαρμοστεί πλήρως.

Για παράδειγμα, εξετάστε αυτές τις :rootμεταβλητές CSS για κοινά <body>στυλ:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Στην πράξη, αυτές οι μεταβλητές εφαρμόζονται στη συνέχεια στην Επανεκκίνηση ως εξής:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Το οποίο σας επιτρέπει να κάνετε προσαρμογές σε πραγματικό χρόνο όπως θέλετε:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Προεπιλογές σελίδας

Τα στοιχεία <html>και <body>ενημερώνονται για να παρέχουν καλύτερες προεπιλογές σε όλη τη σελίδα. Πιο συγκεκριμένα:

Το box-sizingείναι καθολικά ρυθμισμένο σε κάθε στοιχείο—συμπεριλαμβανομένων *::beforeκαι *::after, σε border-box. Αυτό διασφαλίζει ότι το δηλωμένο πλάτος του στοιχείου δεν θα ξεπεραστεί ποτέ λόγω επένδυσης ή περιγράμματος.
- Καμία βάση font-sizeδεν δηλώνεται στο <html>, αλλά 16pxθεωρείται (η προεπιλογή του προγράμματος περιήγησης). font-size: 1remΕφαρμόζεται στο <body>για εύκολη απόκριση κλιμάκωσης τύπων μέσω ερωτημάτων μέσων, ενώ παράλληλα σέβεται τις προτιμήσεις των χρηστών και διασφαλίζει μια πιο προσιτή προσέγγιση. Αυτή η προεπιλογή του προγράμματος περιήγησης μπορεί να παρακαμφθεί τροποποιώντας τη $font-size-rootμεταβλητή.
Ορίζει <body>επίσης ένα καθολικό font-family, font-weight, line-heightκαι color. Αυτό κληρονομείται αργότερα από ορισμένα στοιχεία φόρμας για την αποφυγή ασυνέπειας γραμματοσειρών.
Για ασφάλεια, το <body>έχει δηλωμένο background-color, προεπιλογή σε #fff.

Εγγενής στοίβα γραμματοσειρών

Το Bootstrap χρησιμοποιεί μια "native font stack" ή "system font stack" για βέλτιστη απόδοση κειμένου σε κάθε συσκευή και λειτουργικό σύστημα. Αυτές οι γραμματοσειρές συστήματος έχουν σχεδιαστεί ειδικά με γνώμονα τις σημερινές συσκευές, με βελτιωμένη απόδοση στις οθόνες, υποστήριξη μεταβλητής γραμματοσειράς και πολλά άλλα. Διαβάστε περισσότερα για τις εγγενείς στοίβες γραμματοσειρών σε αυτό το άρθρο του Smashing Magazine .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Λάβετε υπόψη ότι επειδή η στοίβα γραμματοσειρών περιλαμβάνει γραμματοσειρές emoji, πολλοί συνήθεις χαρακτήρες Unicode συμβόλων/dingbat θα αποδοθούν ως πολύχρωμα εικονογράμματα. Η εμφάνισή τους θα ποικίλλει, ανάλογα με το στυλ που χρησιμοποιείται στην εγγενή γραμματοσειρά emoji του προγράμματος περιήγησης/πλατφόρμας και δεν θα επηρεαστούν από κανένα colorστυλ CSS.

Αυτό font-familyεφαρμόζεται στο <body>και κληρονομείται αυτόματα παγκοσμίως σε όλο το Bootstrap. Για εναλλαγή του καθολικού font-family, ενημερώστε $font-family-baseκαι μεταγλωττίστε ξανά το Bootstrap.

Επικεφαλίδες και παράγραφοι

Όλα τα στοιχεία επικεφαλίδας — π.χ. — και <h1>επαναφέρονται <p>για να margin-topαφαιρεθούν. Προστέθηκαν επικεφαλίδες margin-bottom: .5remκαι παράγραφοι margin-bottom: 1remγια εύκολη απόσταση.

Επικεφαλίδα	Παράδειγμα
`<h1></h1>`	h1. Επικεφαλίδα Bootstrap
`<h2></h2>`	h2. Επικεφαλίδα Bootstrap
`<h3></h3>`	h3. Επικεφαλίδα Bootstrap
`<h4></h4>`	h4. Επικεφαλίδα Bootstrap
`<h5></h5>`	h5. Επικεφαλίδα Bootstrap
`<h6></h6>`	h6. Επικεφαλίδα Bootstrap

Οριζόντιοι κανόνες

Το <hr>στοιχείο έχει απλοποιηθεί. Παρόμοια με τις προεπιλογές του προγράμματος περιήγησης, <hr>τα s διαμορφώνονται μέσω border-top, έχουν προεπιλογή opacity: .25και κληρονομούνται αυτόματα border-colorμέσω colorτου , συμπεριλαμβανομένου του πότε colorορίζεται μέσω του γονέα. Μπορούν να τροποποιηθούν με βοηθητικά προγράμματα κειμένου, περιγράμματος και αδιαφάνειας.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Τόπος αγώνων

Όλες οι λίστες— <ul>, <ol>, και <dl>— έχουν margin-topαφαιρεθεί και ένα margin-bottom: 1rem. Οι ένθετες λίστες δεν έχουν margin-bottom. Επίσης, επαναφέραμε τα στοιχεία padding-leftενεργοποίησης <ul>και <ol>.

Όλες οι λίστες έχουν αφαιρεθεί το κορυφαίο περιθώριο
Και το κάτω περιθώριο τους ομαλοποιήθηκε
Οι ένθετες λίστες δεν έχουν κάτω περιθώριο
- Έτσι έχουν πιο ομοιόμορφη εμφάνιση
- Ιδιαίτερα όταν ακολουθούνται από περισσότερα στοιχεία λίστας
Το αριστερό γέμισμα έχει επίσης επαναρυθμιστεί

Εδώ είναι μια ταξινομημένη λίστα
Με μερικά στοιχεία λίστας
Έχει την ίδια συνολική εμφάνιση
Όπως και η προηγούμενη αδιάτακτη λίστα

Για απλούστερο στυλ, σαφή ιεραρχία και καλύτερη απόσταση, οι λίστες περιγραφών έχουν ενημερωθεί margin. <dd>s επαναφέρετε margin-leftκαι 0προσθέστε margin-bottom: .5rem. <dt>s είναι έντονα .

Λίστες περιγραφής: Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
Ορος: Ορισμός για τον όρο.; Ένας δεύτερος ορισμός για τον ίδιο όρο.
Άλλος όρος: Ορισμός για αυτόν τον άλλο όρο.

Ενσωματωμένος κωδικός

Τυλίξτε ενσωματωμένα αποσπάσματα κώδικα με <code>. Φροντίστε να ξεφύγετε από αγκύλες HTML.

Για παράδειγμα, <section>θα πρέπει να είναι τυλιγμένο ως inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Μπλοκ κωδικών

Χρησιμοποιήστε <pre>s για πολλές γραμμές κώδικα. Για άλλη μια φορά, φροντίστε να ξεφύγετε από τυχόν αγκύλες στον κώδικα για σωστή απόδοση. Το <pre>στοιχείο επαναφέρεται για να αφαιρεθεί margin-topκαι να χρησιμοποιηθούν remμονάδες για το margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Μεταβλητές

Για την ένδειξη μεταβλητών χρησιμοποιήστε την <var>ετικέτα.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Εισαγωγή χρήστη

Χρησιμοποιήστε το <kbd>για να υποδείξετε την είσοδο που εισάγεται συνήθως μέσω του πληκτρολογίου.

Για εναλλαγή καταλόγων, πληκτρολογήστε cdακολουθούμενο από το όνομα του καταλόγου.
Για να επεξεργαστείτε τις ρυθμίσεις, πατήστε ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Δείγμα εξόδου

Για την ένδειξη της εξόδου δείγματος από ένα πρόγραμμα χρησιμοποιήστε την <samp>ετικέτα.

Αυτό το κείμενο προορίζεται να αντιμετωπίζεται ως δείγμα εξόδου από ένα πρόγραμμα υπολογιστή.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Πίνακες

Οι πίνακες προσαρμόζονται ελαφρώς στο στυλ <caption>s, συμπτύσσονται τα περιγράμματα και εξασφαλίζουν συνέπεια text-alignσε όλη την έκταση. Πρόσθετες αλλαγές για περιγράμματα, padding και άλλα έρχονται με την .tableκατηγορία .

Αυτό είναι ένα παράδειγμα πίνακα και αυτή είναι η λεζάντα του για να περιγράψει τα περιεχόμενα.
Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα
Πίνακας	Πίνακας	Πίνακας	Πίνακας
Πίνακας	Πίνακας	Πίνακας	Πίνακας
Πίνακας	Πίνακας	Πίνακας	Πίνακας

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Έντυπα

Διάφορα στοιχεία φόρμας έχουν επανεκκινηθεί για πιο απλά στυλ βάσης. Εδώ είναι μερικές από τις πιο αξιοσημείωτες αλλαγές:

<fieldset>Δεν έχουν περιθώρια, γέμιση ή περιθώριο, ώστε να μπορούν εύκολα να χρησιμοποιηθούν ως περιτυλίγματα για μεμονωμένες εισόδους ή ομάδες εισόδων.
<legend>Τα s, όπως και τα σύνολα πεδίων, έχουν επίσης επανασχεδιαστεί για να εμφανίζονται ως επικεφαλίδες.
<label>s έχουν οριστεί για display: inline-blockνα επιτρέπεται marginη εφαρμογή.
<input>Τα s, <select>s, <textarea>s και <button>s αντιμετωπίζονται ως επί το πλείστον από το Normalize, αλλά το Reboot αφαιρεί και τα s marginκαι τα θέτει line-height: inherit.
<textarea>Τα s τροποποιούνται ώστε να μπορούν να αλλάξουν μέγεθος μόνο κατακόρυφα, καθώς η οριζόντια αλλαγή μεγέθους συχνά «σπάει» τη διάταξη της σελίδας.
<button>s και <input>στοιχεία κουμπιού έχουν cursor: pointerόταν :not(:disabled).

Αυτές οι αλλαγές και άλλες, παρουσιάζονται παρακάτω.

Παράδειγμα θρύλου

Παράδειγμα εισαγωγής

Παράδειγμα email

Παράδειγμα τηλεφώνου

Παράδειγμα url

Παράδειγμα αριθμός

Παράδειγμα αναζήτησης

Παράδειγμα εύρους

Παράδειγμα εισαγωγής αρχείου

Παράδειγμα επιλογής

Επιλέξτε αυτό το πλαίσιο ελέγχου

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

Παράδειγμα περιοχής κειμένου

Παράδειγμα ημερομηνίας

Παράδειγμα χρόνου

Παράδειγμα κωδικού πρόσβασης

Παράδειγμα datetime-local

Παράδειγμα εβδομάδας

Παράδειγμα μήνα

Παράδειγμα χρώματος

Παράδειγμα εξόδου 100

Υποστήριξη εισαγωγής ημερομηνίας και χρώματος

Λάβετε υπόψη ότι οι εισαγωγές ημερομηνίας δεν υποστηρίζονται πλήρως από όλα τα προγράμματα περιήγησης, δηλαδή το Safari.

Δείκτες σε κουμπιά

Η επανεκκίνηση περιλαμβάνει μια βελτίωση για role="button"την αλλαγή του προεπιλεγμένου δρομέα σε pointer. Προσθέστε αυτό το χαρακτηριστικό σε στοιχεία για να υποδείξετε ότι τα στοιχεία είναι διαδραστικά. Αυτός ο ρόλος δεν είναι απαραίτητος για <button>στοιχεία που παίρνουν τη δική τους cursorαλλαγή.

Κουμπί στοιχείου χωρίς κουμπί

html

<span role="button" tabindex="0">Non-button element button</span>

Διάφορα στοιχεία

Διεύθυνση

Το <address>στοιχείο ενημερώνεται για να επαναφέρει την προεπιλογή του προγράμματος περιήγησης font-styleαπό italicσε normal. line-heightέχει επίσης κληρονομηθεί τώρα και margin-bottom: 1remέχει προστεθεί. <address>Τα s προορίζονται για την παρουσίαση στοιχείων επικοινωνίας για τον πλησιέστερο πρόγονο (ή ένα ολόκληρο έργο). Διατηρήστε τη μορφοποίηση τελειώνοντας τις γραμμές με <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Πλήρες Όνομα
[email protected]

Blockquote

Η προεπιλογή marginστα μπλοκ εισαγωγικά είναι 1em 40px, οπότε το επαναφέρουμε σε 0 0 1remκάτι πιο συνεπές με άλλα στοιχεία.

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

Κάποιος διάσημος στον τίτλο πηγής

Ενσωματωμένα στοιχεία

Το <abbr>στοιχείο λαμβάνει βασικό στυλ για να ξεχωρίζει ανάμεσα στο κείμενο της παραγράφου.

Το στοιχείο συντομογραφίας HTML .

Περίληψη

Η προεπιλογή cursorστη σύνοψη είναι text, επομένως επαναφέρουμε το σε για pointerνα μεταφέρουμε ότι το στοιχείο μπορεί να αλληλεπιδράσει κάνοντας κλικ σε αυτό.

Μερικές λεπτομέρειες

Περισσότερες πληροφορίες για τις λεπτομέρειες.

Ακόμα περισσότερες λεπτομέρειες

Ακολουθούν ακόμη περισσότερες λεπτομέρειες σχετικά με τις λεπτομέρειες.

`[hidden]`Χαρακτηριστικό HTML5

Η HTML5 προσθέτει ένα νέο καθολικό χαρακτηριστικό με το όνομα[hidden] , το οποίο έχει το στιλ ως display: noneαπό προεπιλογή. Με δανεισμό μιας ιδέας από το PureCSS , βελτιώνουμε αυτήν την προεπιλογή κάνοντας [hidden] { display: none !important; }για να αποτρέψουμε την displayκατά λάθος παράκαμψή της.

<input type="text" hidden>

Ασυμβατότητα jQuery

[hidden]δεν είναι συμβατό με jQuery $(...).hide()και $(...).show()μεθόδους. Επομένως, επί του παρόντος δεν υποστηρίζουμε ιδιαίτερα [hidden]άλλες τεχνικές για τη διαχείριση displayτων στοιχείων.

Για να αλλάξετε απλώς την ορατότητα ενός στοιχείου, που σημαίνει ότι displayδεν έχει τροποποιηθεί και το στοιχείο μπορεί να επηρεάσει τη ροή του εγγράφου, χρησιμοποιήστε την .invisibleκλάση .

Επανεκκίνηση

Πλησιάζω

Μεταβλητές CSS

Προεπιλογές σελίδας

Εγγενής στοίβα γραμματοσειρών

Επικεφαλίδες και παράγραφοι

Οριζόντιοι κανόνες

Τόπος αγώνων

Ενσωματωμένος κωδικός

Μπλοκ κωδικών

Μεταβλητές

Εισαγωγή χρήστη

Δείγμα εξόδου

Πίνακες

Έντυπα

Υποστήριξη εισαγωγής ημερομηνίας και χρώματος

Δείκτες σε κουμπιά

Διάφορα στοιχεία

Διεύθυνση

Blockquote

Ενσωματωμένα στοιχεία

Περίληψη

[hidden]Χαρακτηριστικό HTML5

Ασυμβατότητα jQuery

`[hidden]`Χαρακτηριστικό HTML5