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

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

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

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

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

Παράδειγμα

<div class = "σειρά" > 
  <div class = "span12" > 
    Επίπεδο 1 στήλης
    <div class = "σειρά" > 
      <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 υποστηρίζει μια χούφτα ερωτήματα πολυμέσων για να σας βοηθήσει να κάνετε τα έργα σας πιο κατάλληλα σε διαφορετικές συσκευές και αναλύσεις οθόνης. Εδώ είναι τι περιλαμβάνεται:

Ο, τι κάνουν

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

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

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

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

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

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