Bootstrap

Σκαλωσιά

Το Bootstrap είναι χτισμένο σε αποκριτικά πλέγματα, διατάξεις και στοιχεία 12 στηλών.

Γενικές ρυθμίσεις

Απαιτεί HTML5 doctype

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

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

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

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

Αυτά τα στυλ μπορούν να βρεθούν σε σκαλωσιές.less .

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

Με το Bootstrap 2, το παλιό μπλοκ επαναφοράς απορρίφθηκε υπέρ του Normalize.css , ενός έργου των Nicolas Gallagher και Jonathan Neal που τροφοδοτεί επίσης το HTML5 Boilerplate . Ενώ χρησιμοποιούμε μεγάλο μέρος του Normalize στο reset.less , έχουμε αφαιρέσει ορισμένα στοιχεία ειδικά για το Bootstrap.

Προεπιλεγμένο σύστημα πλέγματος

Παράδειγμα ζωντανού πλέγματος

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

Βασικό πλέγμα HTML

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

  1. <div class = "σειρά" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Δεδομένου αυτού του παραδείγματος, έχουμε .span4και .span8, δημιουργώντας 12 συνολικά στήλες και μια πλήρη σειρά.

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

Μετακινήστε τις στήλες προς τα δεξιά χρησιμοποιώντας .offset*κλάσεις. Κάθε κλάση αυξάνει το αριστερό περιθώριο μιας στήλης κατά μια ολόκληρη στήλη. Για παράδειγμα, .offset4μετακινείται .span4σε τέσσερις στήλες.

4
3 μετατόπιση 2
3 μετατόπιση 1
3 μετατόπιση 2
6 μετατόπιση 3 
  1. <div class = "σειρά" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

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

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

Στήλη επιπέδου 1
Επίπεδο 2
Επίπεδο 2 
  1. <div class = "σειρά" > 
  2.   <div class = "span9" > 
  3.     Στήλη επιπέδου 1
  4.     <div class = "σειρά" > 
  5.       <div class = "span6" > Επίπεδο 2 </div> 
  6.       <div class = "span3" > Επίπεδο 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

Σύστημα δικτύου ρευστών

Παράδειγμα πλέγματος ζωντανού υγρού

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

Βασικό ρευστό πλέγμα HTML

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

Μετατόπιση ρευστού

Λειτουργεί με τον ίδιο τρόπο όπως η μετατόπιση του συστήματος σταθερού δικτύου: προσθέστε .offset*σε οποιαδήποτε στήλη για να αντισταθμίσετε τόσες στήλες.

4
4 μετατόπιση 4
3 μετατόπιση 3
3 μετατόπιση 3
6 μετατόπιση 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

Ρευστή φωλιά

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

Υγρό 12
Υγρό 6
Υγρό 6
Υγρό 6
Υγρό 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     Υγρό 12
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > 
  6.         Υγρό 6
  7.         <div class = "row-fluid" > 
  8.           <div class = "span6" > Ρευστό 6 </div> 
  9.           <div class = "span6" > Ρευστό 6 </div> 
  10.         </div>
  11.       </div>
  12.       <div class = "span6" > Ρευστό 6 </div> 
  13.     </div>
  14.   </div>
  15. </div>

Διατάξεις

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

Παρέχει μια κοινή διάταξη σταθερού πλάτους (και προαιρετικά απόκριση) με μόνο <div class="container">απαιτούμενη.

  1. <σώμα>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

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

Δημιουργήστε μια ρευστή σελίδα δύο στηλών με <div class="container-fluid">—ιδανική για εφαρμογές και έγγραφα.

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--Περιεχόμενο πλευρικής γραμμής-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--Σωματικό περιεχόμενο-->
  8.     </div>
  9.   </div>
  10. </div>

Ανταποκρίσιμος σχεδιασμός

Ενεργοποίηση λειτουργιών απόκρισης

Ενεργοποιήστε το αποκριτικό CSS στο έργο σας, συμπεριλαμβάνοντας την κατάλληλη μετα-ετικέτα και πρόσθετο φύλλο στυλ μέσα στο <head>έγγραφό σας. Εάν έχετε μεταγλωττίσει το Bootstrap από τη σελίδα Προσαρμογή, χρειάζεται μόνο να συμπεριλάβετε τη μετα-ετικέτα.

  1. <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  2. <link href = "assets/css/bootstrap-responsive.css" rel = "φύλλο στυλ" >

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

Σχετικά με το Responsive Bootstrap

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

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

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

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

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

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

Επιγραφή Πλάτος διάταξης Πλάτος στήλης Πλάτος υδρορροής
Μεγάλη οθόνη 1200px και πάνω 70 εικονοστοιχεία 30 εικονοστοιχεία
Προκαθορισμένο 980px και πάνω 60 εικονοστοιχεία 20 εικονοστοιχεία
Ταμπλέτες πορτρέτου 768 px και άνω 42 εικονοστοιχεία 20 εικονοστοιχεία
Τηλέφωνα σε tablet 767 px και κάτω Ρευστές στήλες, χωρίς σταθερά πλάτη
Τηλέφωνα 480px και κάτω Ρευστές στήλες, χωρίς σταθερά πλάτη 
  1. /* Μεγάλη επιφάνεια εργασίας */
  2. @media ( ελάχ . πλάτος : 1200 px ) { ... }     
  3.  
  4. /* Πορτραίτο tablet σε οριζόντιο και επιτραπέζιο υπολογιστή */
  5. @media ( ελάχ . πλάτος : 768 εικονοστοιχεία ) και ( μέγ . πλάτος : 979 εικονοστοιχεία ) { ... }        
  6.  
  7. /* Τηλέφωνο με οριζόντιο προσανατολισμό σε tablet με πορτραίτο */
  8. @media ( μέγ . πλάτος : 767 εικονοστοιχεία ) { ... }     
  9.  
  10. /* Οριζόντια τηλέφωνα και κάτω */
  11. @media ( μέγιστο πλάτος : 480 εικονοστοιχεία ) { ... }

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

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

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

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

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

Δοκιμαστική περίπτωση απόκρισης βοηθητικών προγραμμάτων

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

Ορατό στο...

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

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

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

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

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