Επανεκκίνηση
Η επανεκκίνηση, μια συλλογή αλλαγών CSS για συγκεκριμένα στοιχεία σε ένα μόνο αρχείο, ξεκινά το Bootstrap για να παρέχει μια κομψή, συνεπή και απλή γραμμή βάσης για την αξιοποίηση.
Πλησιάζω
Η επανεκκίνηση βασίζεται στην Κανονικοποίηση, παρέχοντας πολλά στοιχεία HTML με στυλ με κάποια γνώμη χρησιμοποιώντας μόνο επιλογείς στοιχείων. Το πρόσθετο styling γίνεται μόνο με μαθήματα. Για παράδειγμα, κάνουμε επανεκκίνηση ορισμένων <table>
στυλ για μια απλούστερη γραμμή βάσης και αργότερα παρέχουμε .table
, .table-bordered
, και άλλα.
Ακολουθούν οι οδηγίες και οι λόγοι για την επιλογή του τι θα αντικατασταθεί στην Επανεκκίνηση:
- Ενημερώστε ορισμένες προεπιλεγμένες τιμές του προγράμματος περιήγησης για να χρησιμοποιήσετε
rem
s αντί γιαem
s για κλιμακούμενη απόσταση στοιχείων. - Αποφύγετε
margin-top
. Τα κάθετα περιθώρια μπορεί να καταρρεύσουν, προκαλώντας απροσδόκητα αποτελέσματα. Το πιο σημαντικό όμως, μια ενιαία κατεύθυνσηmargin
είναι ένα απλούστερο νοητικό μοντέλο. - Για ευκολότερη κλιμάκωση στα μεγέθη συσκευών, τα στοιχεία μπλοκ θα πρέπει να χρησιμοποιούν
rem
s γιαmargin
s. - Διατηρήστε στο ελάχιστο τις δηλώσεις σχετικά με τα
font
ακίνητα, χρησιμοποιώνταςinherit
όποτε είναι δυνατόν.
Μεταβλητές CSS
Προστέθηκε στην έκδοση 5.1.1
Με την έκδοση 5.1.1, τυποποιήσαμε τα απαιτούμενα @import
σε όλα τα πακέτα CSS (συμπεριλαμβανομένων bootstrap.css
, bootstrap-reboot.css
, και bootstrap-grid.css
για να συμπεριλάβουμε _root.scss
. Αυτό προσθέτει :root
μεταβλητές CSS επιπέδου σε όλα τα πακέτα, ανεξάρτητα από το πόσες από αυτές χρησιμοποιούνται σε αυτό το πακέτο. Τελικά το Bootstrap 5 θα συνεχίσει να δείτε περισσότερες μεταβλητές CSS που προστέθηκαν με την πάροδο του χρόνου.
Προεπιλογές σελίδας
Τα στοιχεία <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,
// 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.
Μεταβλητές CSS
Καθώς το Bootstrap 5 συνεχίζει να ωριμάζει, όλο και περισσότερα στυλ θα δημιουργούνται με μεταβλητές CSS ως μέσο για την παροχή περισσότερων προσαρμογών σε πραγματικό χρόνο χωρίς να χρειάζεται πάντα να μεταγλωττίζετε ξανά το Sass. Η προσέγγισή μας είναι να πάρουμε τις μεταβλητές πηγής Sass και να τις μετατρέψουμε σε μεταβλητές CSS. Με αυτόν τον τρόπο, ακόμα κι αν δεν χρησιμοποιείτε μεταβλητές CSS, εξακολουθείτε να έχετε όλη τη δύναμη του Sass. Αυτό είναι ακόμη σε εξέλιξη και θα χρειαστεί χρόνος για να εφαρμοστεί πλήρως.
Για παράδειγμα, εξετάστε αυτές τις :root
μεταβλητές CSS για κοινά <body>
στυλ:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
Στην πράξη, αυτές οι μεταβλητές εφαρμόζονται στη συνέχεια στην Επανεκκίνηση ως εξής:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-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>
Επικεφαλίδες και παράγραφοι
Όλα τα στοιχεία επικεφαλίδας — π.χ. — και <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
. Επίσης, επαναφέραμε τα στοιχεία padding-left
ενεργοποίησης <ul>
και <ol>
.
- Όλες οι λίστες έχουν αφαιρεθεί το κορυφαίο περιθώριο
- Και το κάτω περιθώριο τους ομαλοποιήθηκε
- Οι ένθετες λίστες δεν έχουν κάτω περιθώριο
- Έτσι έχουν πιο ομοιόμορφη εμφάνιση
- Ιδιαίτερα όταν ακολουθούνται από περισσότερα στοιχεία λίστας
- Το αριστερό γέμισμα έχει επίσης επαναρυθμιστεί
- Εδώ είναι μια ταξινομημένη λίστα
- Με μερικά στοιχεία λίστας
- Έχει την ίδια συνολική εμφάνιση
- Όπως και η προηγούμενη αδιάτακτη λίστα
Για απλούστερο στυλ, σαφή ιεραρχία και καλύτερη απόσταση, οι λίστες περιγραφών έχουν ενημερωθεί margin
. <dd>
s επαναφέρετε margin-left
και 0
προσθέστε margin-bottom: .5rem
. <dt>
s είναι έντονα .
- Λίστες περιγραφής
- Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
- Ορος
- Ορισμός για τον όρο.
- Ένας δεύτερος ορισμός για τον ίδιο όρο.
- Άλλος όρος
- Ορισμός για αυτόν τον άλλο όρο.
Ενσωματωμένος κωδικός
Τυλίξτε ενσωματωμένα αποσπάσματα κώδικα με <code>
. Φροντίστε να ξεφύγετε από αγκύλες HTML.
<section>
θα πρέπει να είναι τυλιγμένο ως inline.
For example, <code><section></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>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Μεταβλητές
Για την ένδειξη μεταβλητών χρησιμοποιήστε την <var>
ετικέτα.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Εισαγωγή χρήστη
Χρησιμοποιήστε το <kbd>
για να υποδείξετε την είσοδο που εισάγεται συνήθως μέσω του πληκτρολογίου.
Για να επεξεργαστείτε τις ρυθμίσεις, πατήστε ctrl + ,
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>
ετικέτα.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Πίνακες
Οι πίνακες προσαρμόζονται ελαφρώς στο στυλ <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 αφαιρεί και τα smargin
και τα θέτειline-height: inherit
.<textarea>
Τα s τροποποιούνται ώστε να μπορούν να αλλάξουν μέγεθος μόνο κατακόρυφα, καθώς η οριζόντια αλλαγή μεγέθους συχνά «σπάει» τη διάταξη της σελίδας.<button>
s και<input>
στοιχεία κουμπιού έχουνcursor: pointer
όταν:not(:disabled)
.
Αυτές οι αλλαγές και άλλες, παρουσιάζονται παρακάτω.
Υποστήριξη εισαγωγής ημερομηνίας και χρώματος
Λάβετε υπόψη ότι οι εισαγωγές ημερομηνίας δεν υποστηρίζονται πλήρως από όλα τα προγράμματα περιήγησης, δηλαδή το Safari.
Δείκτες σε κουμπιά
Η επανεκκίνηση περιλαμβάνει μια βελτίωση για 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Πλήρες Όνομα
[email protected]
Blockquote
Η προεπιλογή margin
στα μπλοκ εισαγωγικά είναι 1em 40px
, οπότε το επαναφέρουμε σε 0 0 1rem
κάτι πιο συνεπές με άλλα στοιχεία.
Ένα πολύ γνωστό απόσπασμα, που περιέχεται σε ένα στοιχείο blockquote.
Κάποιος διάσημος στον τίτλο πηγής
Ενσωματωμένα στοιχεία
Το <abbr>
στοιχείο λαμβάνει βασικό στυλ για να ξεχωρίζει ανάμεσα στο κείμενο της παραγράφου.
Περίληψη
Η προεπιλογή 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
κλάση .