Source

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

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

Πλησιάζω

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

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

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

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

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

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

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

Οι προεπιλεγμένες γραμματοσειρές ιστού (Helvetica Neue, Helvetica και Arial) έχουν απορριφθεί στο Bootstrap 4 και έχουν αντικατασταθεί με μια "εγγενή στοίβα γραμματοσειρών" για βέλτιστη απόδοση κειμένου σε κάθε συσκευή και λειτουργικό σύστημα. Διαβάστε περισσότερα για τις εγγενείς στοίβες γραμματοσειρών σε αυτό το άρθρο του Smashing Magazine .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Αυτό 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

Τόπος αγώνων

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

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ακέραιος μολυσματικός lorem at massa
Διευκόλυνση σε pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

Λίστες περιγραφής: Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Προμορφοποιημένο κείμενο

Το <pre>στοιχείο επαναφέρεται για να αφαιρεθεί margin-topκαι να χρησιμοποιηθούν remμονάδες για το margin-bottom.

.example-element {
  περιθώριο-κάτω: 1rem;
}

Πίνακες

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

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

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

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

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

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

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

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

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

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

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

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

Διεύθυνση

Το <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κάτι πιο συνεπές με άλλα στοιχεία.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante.

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

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

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

Nulla attr vitae elit libero, a pharetra augue.

Περίληψη

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

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

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

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

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

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

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.