Σκαλωσιά

Το Bootstrap είναι χτισμένο σε ένα αποκριτικό πλέγμα 12 στηλών. Έχουμε επίσης συμπεριλάβει διατάξεις σταθερού και ρευστού πλάτους με βάση αυτό το σύστημα.

Απαιτεί HTML5 doctype

Το Bootstrap χρησιμοποιεί στοιχεία HTML και ιδιότητες CSS που απαιτούν τη χρήση του τύπου HTML5. Φροντίστε να το συμπεριλάβετε στην αρχή κάθε σελίδας με Bootstrapped στο έργο σας.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Τυπογραφία και σύνδεσμοι

Μέσα στο αρχείο scaffolding.less , ορίζουμε βασικά στυλ καθολικής εμφάνισης, τυπογραφίας και συνδέσμων. Συγκεκριμένα, εμείς:

Αφαιρέστε το περιθώριο στο σώμα
Ρυθμίστε background-color: white;στοbody
Χρησιμοποιήστε τα χαρακτηριστικά @baseFontFamily, @baseFontSizeκαι @baseLineHeightως τυπογραφική βάση μας
Ρυθμίστε το χρώμα του καθολικού συνδέσμου μέσω @linkColorκαι εφαρμόστε μόνο τις υπογραμμίσεις συνδέσμων:hover

Επαναφορά μέσω Normalize

Από το Bootstrap 2, η παραδοσιακή επαναφορά CSS έχει εξελιχθεί για να χρησιμοποιεί στοιχεία από το Normalize.css , ένα έργο του Nicolas Gallagher που τροφοδοτεί επίσης το HTML5 Boilerplate .

Η νέα επαναφορά μπορεί ακόμα να βρεθεί στο reset.less , αλλά με πολλά στοιχεία που έχουν αφαιρεθεί για λόγους συντομίας και ακρίβειας.

Το προεπιλεγμένο σύστημα πλέγματος που παρέχεται στο Bootstrap χρησιμοποιεί 12 στήλες που αποδίδονται σε πλάτη 724 εικονοστοιχείων, 940 εικονοστοιχείων (προεπιλογή χωρίς απόκριση CSS) και 1170 εικονοστοιχείων. Κάτω από τις θύρες προβολής 767 px, οι στήλες γίνονται ρευστές και στοιβάζονται κάθετα.

<div class = "σειρά" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Όπως φαίνεται εδώ, μια βασική διάταξη μπορεί να δημιουργηθεί με δύο "στήλες", η καθεμία να καλύπτει έναν αριθμό από τις 12 θεμελιώδεις στήλες που ορίσαμε ως μέρος του συστήματος πλέγματος μας.

Μετατόπιση στηλών

4 μετατόπιση 4

3 μετατόπιση 3

8 μετατόπιση 4

<div class = "σειρά" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

Φωλιασμένες στήλες

Με το στατικό (μη υγρό) σύστημα πλέγματος στο Bootstrap, η ένθεση είναι εύκολη. Για να ενσωματώσετε το περιεχόμενό σας, απλώς προσθέστε ένα νέο .rowκαι σύνολο .span*στηλών σε μια υπάρχουσα .span*στήλη.

Παράδειγμα

Οι ένθετες σειρές πρέπει να περιλαμβάνουν ένα σύνολο στηλών που αθροίζονται στον αριθμό των στηλών του γονικού τους. Για παράδειγμα, δύο ένθετες .span3στήλες θα πρέπει να τοποθετηθούν μέσα σε ένα .span6.

Επίπεδο 1 στήλης

Επίπεδο 2

<div class = "σειρά" > 
  <div class = "span6" > 
    Στήλη επιπέδου 1
    <div class = "σειρά" > 
      <div class = "span3" > Επίπεδο 2 </div> 
      <div class = "span3" > Επίπεδο 2 </div> 
    </div>
  </div>
</div>

Ρευστές στήλες

Ποσοστά, όχι pixel

Το σύστημα ρευστού πλέγματος χρησιμοποιεί ποσοστά για πλάτη στηλών αντί για σταθερά pixel. Έχει επίσης τις ίδιες παραλλαγές απόκρισης με το σύστημα σταθερού δικτύου μας, διασφαλίζοντας τις κατάλληλες αναλογίες για βασικές αναλύσεις οθόνης και συσκευές.

Ρευστές σειρές

Κάντε οποιαδήποτε σειρά ρευστή απλά αλλάζοντας .rowσε .row-fluid. Οι στήλες παραμένουν ακριβώς οι ίδιες, καθιστώντας εξαιρετικά απλή την εναλλαγή μεταξύ σταθερών και ρευστών διατάξεων.

Σήμανση

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Ρευστή φωλιά

Η ένθεση με ρευστά πλέγματα είναι λίγο διαφορετική: ο αριθμός των ένθετων στηλών δεν χρειάζεται να ταιριάζει με τον γονικό. Αντίθετα, οι στήλες σας επαναφέρονται σε κάθε επίπεδο, επειδή κάθε σειρά καταλαμβάνει το 100% της γονικής στήλης.

Υγρό 12

Υγρό 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    Επίπεδο 1 στήλης
    <div class = "row-fluid" > 
      <div class = "span6" > Επίπεδο 2 </div> 
      <div class = "span6" > Επίπεδο 2 </div> 
    </div>
  </div>
</div>

Μεταβλητός	Προεπιλεγμένη τιμή	Περιγραφή
`@gridColumns`	12	Αριθμός στηλών
`@gridColumnWidth`	60 εικονοστοιχεία	Πλάτος κάθε στήλης
`@gridGutterWidth`	20 εικονοστοιχεία	Αρνητικό διάστημα μεταξύ των στηλών

Μεταβλητές σε LESS

Ενσωματωμένα στο Bootstrap είναι μια χούφτα μεταβλητών για την προσαρμογή του προεπιλεγμένου συστήματος πλέγματος 940 px, που τεκμηριώνεται παραπάνω. Όλες οι μεταβλητές για το πλέγμα αποθηκεύονται σε variables.less.

Πώς να προσαρμόσετε

Η τροποποίηση του πλέγματος σημαίνει αλλαγή των τριών @grid*μεταβλητών και εκ νέου μεταγλώττιση του Bootstrap. Αλλάξτε τις μεταβλητές πλέγματος στο variables.less και χρησιμοποιήστε έναν από τους τέσσερις τρόπους που τεκμηριώνονται για την εκ νέου μεταγλώττιση . Εάν προσθέτετε περισσότερες στήλες, φροντίστε να προσθέσετε το CSS για εκείνες στο grid.less.

Παραμένοντας ανταποκρινόμενος

Η προσαρμογή του πλέγματος λειτουργεί μόνο στο προεπιλεγμένο επίπεδο, το πλέγμα 940 px. Για να διατηρήσετε τις αποκριτικές πτυχές του Bootstrap, θα πρέπει επίσης να προσαρμόσετε τα πλέγματα στο responsive.less.

Σταθερή διάταξη

Η προεπιλεγμένη και απλή διάταξη πλάτους 940 εικονοστοιχείων, κεντραρισμένη για σχεδόν οποιονδήποτε ιστότοπο ή σελίδα παρέχεται από ένα μόνο <div class="container">.

<σώμα>
  <div class = "container" > 
    ...
  </div>
</body>

Ρευστή διάταξη

<div class="container-fluid">παρέχει ευέλικτη δομή σελίδας, ελάχιστα και μέγιστα πλάτη και μια αριστερή πλαϊνή γραμμή. Είναι εξαιρετικό για εφαρμογές και έγγραφα.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--Περιεχόμενο πλευρικής γραμμής-->
    </div>
    <div class = "span10" > 
      <!--Σωματικό περιεχόμενο-->
    </div>
  </div>
</div>

Αποκριτικές συσκευές

Ο, τι κάνουν

Τα ερωτήματα πολυμέσων επιτρέπουν προσαρμοσμένο CSS με βάση έναν αριθμό συνθηκών—αναλογίες, πλάτη, τύπος οθόνης κ.λπ.—αλλά συνήθως εστιάζει γύρω από min-widthκαι max-width.

Τροποποιήστε το πλάτος της στήλης στο πλέγμα μας
Στοιβάζετε στοιχεία αντί να επιπλέουν όπου χρειάζεται
Αλλάξτε το μέγεθος των επικεφαλίδων και του κειμένου ώστε να είναι πιο κατάλληλα για συσκευές

Χρησιμοποιήστε τα ερωτήματα πολυμέσων με υπευθυνότητα και μόνο ως αρχή για το κοινό σας για κινητά. Για μεγαλύτερα έργα, λάβετε υπόψη τις αποκλειστικές βάσεις κώδικα και όχι τα επίπεδα ερωτημάτων μέσων.

Υποστηριζόμενες συσκευές

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

Επιγραφή	Πλάτος διάταξης	Πλάτος στήλης	Πλάτος υδρορροής
Smartphones	480px και κάτω	Ρευστές στήλες, χωρίς σταθερά πλάτη
Smartphone σε tablet	767 px και κάτω	Ρευστές στήλες, χωρίς σταθερά πλάτη
Ταμπλέτες πορτρέτου	768 px και άνω	42 εικονοστοιχεία	20 εικονοστοιχεία
Προκαθορισμένο	980px και πάνω	60 εικονοστοιχεία	20 εικονοστοιχεία
Μεγάλη οθόνη	1200px και πάνω	70 εικονοστοιχεία	30 εικονοστοιχεία

Απαιτεί μετα-ετικέτα

Για να διασφαλίσετε ότι οι συσκευές εμφανίζουν σωστά αποκριτικές σελίδες, συμπεριλάβετε τη μετα-ετικέτα της θύρας προβολής.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

Χρησιμοποιώντας τα ερωτήματα πολυμέσων

Το Bootstrap δεν περιλαμβάνει αυτόματα αυτά τα ερωτήματα πολυμέσων, αλλά η κατανόηση και η προσθήκη τους είναι πολύ εύκολη και απαιτεί ελάχιστη ρύθμιση. Έχετε μερικές επιλογές για να συμπεριλάβετε τις αποκριτικές λειτουργίες του Bootstrap:

Χρησιμοποιήστε τη μεταγλωττισμένη αποκριτική έκδοση, bootstrap-responsive.css
Προσθέστε το @import "responsive.less" και μεταγλωττίστε ξανά το Bootstrap
Τροποποιήστε και μεταγλωττίστε ξανά το responsive.less ως ξεχωριστό αρχείο

Γιατί να μην το συμπεριλάβετε; Για να λέμε την αλήθεια, δεν χρειάζεται να ανταποκρίνονται όλα. Αντί να ενθαρρύνουμε τους προγραμματιστές να καταργήσουν αυτήν τη δυνατότητα, θεωρούμε ότι είναι καλύτερο να την ενεργοποιήσουμε.

  /* Οριζόντια τηλέφωνα και κάτω */
  @media ( μέγιστο πλάτος : 480 εικονοστοιχεία ) { ... }     
 
  /* Τηλέφωνο με οριζόντιο προσανατολισμό σε tablet με πορτραίτο */
  @media ( μέγ . πλάτος : 767 εικονοστοιχεία ) { ... }     
 
  /* Πορτραίτο tablet σε οριζόντιο και επιτραπέζιο υπολογιστή */
  @media ( ελάχ . πλάτος : 768 εικονοστοιχεία ) και ( μέγ . πλάτος : 979 εικονοστοιχεία ) { ... }        
 
  /* Μεγάλη επιφάνεια εργασίας */
  @media ( ελάχ . πλάτος : 1200 px ) { ... }

Αποκριτικές τάξεις χρησιμότητας

Τι είναι

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

Πότε να χρησιμοποιείται

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

Για παράδειγμα, μπορείτε να εμφανίσετε ένα <select>στοιχείο για πλοήγηση σε διατάξεις για κινητά, αλλά όχι σε tablet ή επιτραπέζιους υπολογιστές.

Υποστηρικτικά μαθήματα

Εμφανίζεται εδώ ένας πίνακας με τις κλάσεις που υποστηρίζουμε και την επίδρασή τους σε μια δεδομένη διάταξη ερωτήματος μέσων (με ετικέτα ανά συσκευή). Μπορούν να βρεθούν στο responsive.less.

Τάξη	Τηλέφωνα480px και κάτω	Ταμπλέτες767 px και κάτω	Επιτραπέζιοι υπολογιστές768 px και άνω
`.visible-phone`	Ορατός	Κρυμμένος	Κρυμμένος
`.visible-tablet`	Κρυμμένος	Ορατός	Κρυμμένος
`.visible-desktop`	Κρυμμένος	Κρυμμένος	Ορατός
`.hidden-phone`	Κρυμμένος	Ορατός	Ορατός
`.hidden-tablet`	Ορατός	Κρυμμένος	Ορατός
`.hidden-desktop`	Ορατός	Ορατός	Κρυμμένος

Δοκιμαστική υπόθεση

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

Ορατό στο...

Τα πράσινα σημάδια ελέγχου υποδεικνύουν ότι η τάξη είναι ορατή στην τρέχουσα θύρα προβολής σας.

Τηλέφωνο✔ Τηλέφωνο
Δισκίο✔ Tablet
Επιφάνεια εργασίας✔ Επιτραπέζιος υπολογιστής

Κρυμμένο σε...

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

Τηλέφωνο✔ Τηλέφωνο
Δισκίο✔ Tablet
Επιφάνεια εργασίας✔ Επιτραπέζιος υπολογιστής