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

Η επανεκκίνηση, μια συλλογή αλλαγών 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,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // 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

Τόπος αγώνων

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

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

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

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

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

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

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

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

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

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

<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>στοιχείο λαμβάνει βασικό στυλ για να ξεχωρίζει ανάμεσα στο κείμενο της παραγράφου.

Nulla attr vitae elit libero, a pharetra augue.

Περίληψη

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

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

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

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

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

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

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

<input type="text" hidden>

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

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

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