Το προεπιλεγμένο σύστημα πλέγματος που παρέχεται ως μέρος του Bootstrap είναι ένα πλέγμα 12 στηλών πλάτους 940 εικονοστοιχείων .

Διαθέτει επίσης τέσσερις παραλλαγές απόκρισης για διάφορες συσκευές και αναλύσεις: τηλέφωνο, κατακόρυφο tablet, οριζόντιος πίνακας και μικρούς επιτραπέζιους υπολογιστές και μεγάλους επιτραπέζιους υπολογιστές ευρείας οθόνης.

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

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

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

Παράδειγμα

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

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

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

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

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

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

Σήμανση

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

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

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

Μεταβλητές σε 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>

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

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

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

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

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

Ο, τι κάνουν

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

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

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

1. Χρησιμοποιήστε τη μεταγλωττισμένη αποκριτική έκδοση, bootstrap-responsive.css
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }