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

HTML5 doctype

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

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

Το κινητό πρώτα

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

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

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

Μπορείτε να απενεργοποιήσετε τις δυνατότητες ζουμ σε κινητές συσκευές προσθέτοντας user-scalable=noστη μετα-ετικέτα της θύρας προβολής. Αυτό απενεργοποιεί τη μεγέθυνση, πράγμα που σημαίνει ότι οι χρήστες μπορούν μόνο να κάνουν κύλιση και έχει ως αποτέλεσμα τον ιστότοπό σας να αισθάνεται λίγο περισσότερο σαν μια εγγενής εφαρμογή. Συνολικά, δεν το συνιστούμε σε κάθε ιστότοπο, οπότε να είστε προσεκτικοί!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

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

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

Ρυθμίστε background-color: #fff;στοbody
Χρησιμοποιήστε τα χαρακτηριστικά @font-family-base, @font-size-baseκαι @line-height-baseως τυπογραφική βάση μας
Ρυθμίστε το χρώμα του καθολικού συνδέσμου μέσω @link-colorκαι εφαρμόστε μόνο τις υπογραμμίσεις συνδέσμων:hover

Αυτά τα στυλ βρίσκονται στο scaffolding.less.

Normalize.css

Για βελτιωμένη απόδοση μεταξύ προγραμμάτων περιήγησης, χρησιμοποιούμε το Normalize.css , ένα έργο των Nicolas Gallagher και Jonathan Neal .

Εμπορευματοκιβώτια

Το Bootstrap απαιτεί ένα στοιχείο που περιέχει για να αναδιπλώσει τα περιεχόμενα του ιστότοπου και να στεγάσει το σύστημα πλέγματος μας. Μπορείτε να επιλέξετε ένα από τα δύο κοντέινερ για χρήση στα έργα σας. Σημειώστε ότι, λόγω paddingκαι περισσότερο, κανένα από τα δοχεία δεν είναι φωλιάσιμα.

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

<div class="container">
  ...
</div>

Χρησιμοποιήστε .container-fluidτο για ένα κοντέινερ πλήρους πλάτους, που εκτείνεται σε όλο το πλάτος της θύρας προβολής σας.

<div class="container-fluid">
  ...
</div>

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

Εισαγωγή

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

Οι σειρές πρέπει να τοποθετούνται εντός .container(σταθερού πλάτους) ή .container-fluid(πλήρους πλάτους) για σωστή ευθυγράμμιση και επένδυση.
Χρησιμοποιήστε γραμμές για να δημιουργήσετε οριζόντιες ομάδες στηλών.
Το περιεχόμενο θα πρέπει να τοποθετείται μέσα σε στήλες και μόνο οι στήλες μπορούν να είναι αμέσως παιδιά των σειρών.
Προκαθορισμένες κατηγορίες πλέγματος αρέσει .rowκαι .col-xs-4είναι διαθέσιμες για γρήγορη δημιουργία διατάξεων πλέγματος. Μπορούν επίσης να χρησιμοποιηθούν λιγότερα mixins για πιο σημασιολογικές διατάξεις.
Οι στήλες δημιουργούν υδρορροές (κενά μεταξύ του περιεχομένου των στηλών) μέσω padding. Αυτή η συμπλήρωση μετατοπίζεται σε σειρές για την πρώτη και την τελευταία στήλη μέσω αρνητικού περιθωρίου στο .rows.
Το αρνητικό περιθώριο είναι γιατί τα παρακάτω παραδείγματα είναι ξεπερασμένα. Είναι έτσι ώστε το περιεχόμενο εντός των στηλών πλέγματος να ευθυγραμμίζεται με περιεχόμενο που δεν είναι πλέγμα.
Οι στήλες πλέγματος δημιουργούνται καθορίζοντας τον αριθμό των δώδεκα διαθέσιμων στηλών που θέλετε να εκτείνονται. Για παράδειγμα, τρεις ίσες στήλες θα χρησιμοποιούσαν τρεις .col-xs-4.
Εάν τοποθετηθούν περισσότερες από 12 στήλες σε μία μόνο γραμμή, κάθε ομάδα επιπλέον στηλών θα αναδιπλωθεί, ως μία μονάδα, σε μια νέα γραμμή.
Οι κατηγορίες πλέγματος ισχύουν για συσκευές με πλάτη οθόνης μεγαλύτερο ή ίσο με τα μεγέθη των σημείων διακοπής και παρακάμπτουν τις κατηγορίες πλέγματος που στοχεύουν σε μικρότερες συσκευές. Επομένως, π.χ. η εφαρμογή οποιασδήποτε .col-md-*κλάσης σε ένα στοιχείο δεν θα επηρεάσει μόνο το στυλ του σε μεσαίες συσκευές αλλά και σε μεγάλες συσκευές εάν .col-lg-*δεν υπάρχει κλάση.

Δείτε τα παραδείγματα για την εφαρμογή αυτών των αρχών στον κώδικά σας.

Ερωτήματα μέσων ενημέρωσης

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

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Περιστασιακά επεκτείνουμε αυτά τα ερωτήματα πολυμέσων για να συμπεριλάβουμε ένα max-widthγια περιορισμό του CSS σε ένα στενότερο σύνολο συσκευών.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Επιλογές πλέγματος

Δείτε πώς λειτουργούν πτυχές του συστήματος πλέγματος Bootstrap σε πολλές συσκευές με ένα εύχρηστο τραπέζι.

	Πολύ μικρές συσκευές Τηλέφωνα (<768 px)	Tablet για μικρές συσκευές (≥768 px)	Επιτραπέζιοι υπολογιστές μεσαίων συσκευών (≥992 px)	Επιτραπέζιοι υπολογιστές μεγάλων συσκευών (≥1200 px)
Συμπεριφορά πλέγματος	Οριζόντια ανά πάσα στιγμή	Σύμπτυξη για έναρξη, οριζόντια πάνω από τα σημεία διακοπής
Πλάτος δοχείου	Κανένα (αυτόματο)	750 εικονοστοιχεία	970 εικονοστοιχεία	1170 εικονοστοιχεία
Πρόθεμα τάξης	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# στηλών	12
Πλάτος στήλης	Αυτο	~ 62 px	~ 81 px	~ 97 εικονοστοιχεία
Πλάτος υδρορροής	30 εικονοστοιχεία (15 εικονοστοιχεία σε κάθε πλευρά μιας στήλης)
Φωλιασμένος	Ναί
Μετατοπίσεις	Ναί
Παραγγελία στηλών	Ναί

Παράδειγμα: Στοιβαγμένα σε οριζόντια

Χρησιμοποιώντας ένα ενιαίο σύνολο .col-md-*κλάσεων πλέγματος, μπορείτε να δημιουργήσετε ένα βασικό σύστημα πλέγματος που ξεκινά στοιβαγμένο σε κινητές συσκευές και συσκευές tablet (το πολύ μικρό έως μικρό εύρος) προτού γίνει οριζόντιο σε επιτραπέζιες (μεσαίες) συσκευές. Τοποθετήστε στήλες πλέγματος σε οποιοδήποτε .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Παράδειγμα: Δοχείο υγρών

Μετατρέψτε οποιαδήποτε διάταξη πλέγματος σταθερού πλάτους σε διάταξη πλήρους πλάτους αλλάζοντας το εξωτερικό σας .containerσε .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Παράδειγμα: Κινητό και επιτραπέζιο υπολογιστή

Δεν θέλετε οι στήλες σας απλώς να στοιβάζονται σε μικρότερες συσκευές; Χρησιμοποιήστε τις επιπλέον μικρές και μεσαίες κατηγορίες πλέγματος συσκευών προσθέτοντας .col-xs-* .col-md-*στις στήλες σας. Δείτε το παρακάτω παράδειγμα για μια καλύτερη ιδέα για το πώς λειτουργούν όλα.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

Παράδειγμα: Κινητό, tablet, επιτραπέζιος υπολογιστής

Βασιστείτε στο προηγούμενο παράδειγμα δημιουργώντας ακόμα πιο δυναμικές και ισχυρές διατάξεις με .col-sm-*κατηγορίες tablet.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Παράδειγμα: Περιτύλιγμα στήλης

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

.col-xs-9

.col-xs-4
Δεδομένου ότι 9 + 4 = 13 > 12, αυτό το div πλάτους 4 στηλών τυλίγεται σε μια νέα γραμμή ως μία συνεχόμενη μονάδα.

.col-xs-6
Οι επόμενες στήλες συνεχίζονται κατά μήκος της νέας γραμμής.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

Επαναφέρεται η αποκριτική στήλη

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

.col-xs-6 .col-sm-3
Αλλάξτε το μέγεθος της θύρας προβολής ή ελέγξτε το στο τηλέφωνό σας για παράδειγμα.

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Εκτός από την εκκαθάριση στηλών σε σημεία διακοπής απόκρισης, μπορεί να χρειαστεί να επαναφέρετε τις μετατοπίσεις, τις ωθήσεις ή τις έλξεις . Δείτε το σε δράση στο παράδειγμα πλέγματος .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

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

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

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Μπορείτε επίσης να παρακάμψετε μετατοπίσεις από χαμηλότερες βαθμίδες πλέγματος με .col-*-offset-0κλάσεις.

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

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

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

Επίπεδο 1: .col-sm-9

Επίπεδο 2: .col-xs-8 .col-sm-6

Επίπεδο 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Παραγγελία στηλών

Αλλάξτε εύκολα τη σειρά των ενσωματωμένων στηλών πλέγματος με κατηγορίες .col-md-push-*και .col-md-pull-*τροποποιητές.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Λιγότερες μίξεις και μεταβλητές

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

Μεταβλητές

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

Μείγματα

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

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

Παράδειγμα χρήσης

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

Επικεφαλίδες

Όλες οι επικεφαλίδες HTML, <h1>μέσω <h6>, είναι διαθέσιμες. .h1μέσω .h6τάξεων είναι επίσης διαθέσιμες, για όταν θέλετε να ταιριάξετε το στυλ γραμματοσειράς μιας επικεφαλίδας αλλά εξακολουθείτε να θέλετε το κείμενό σας να εμφανίζεται ενσωματωμένα.

h1. Επικεφαλίδα Bootstrap	Semibold 36px
h2. Επικεφαλίδα Bootstrap	Semibold 30px
h3. Επικεφαλίδα Bootstrap	Semibold 24 px
h4. Επικεφαλίδα Bootstrap	Semibold 18px
h5. Επικεφαλίδα Bootstrap	Semibold 14px
h6. Επικεφαλίδα Bootstrap	Semibold 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Δημιουργήστε ελαφρύτερο, δευτερεύον κείμενο σε οποιαδήποτε επικεφαλίδα με μια γενική <small>ετικέτα ή την .smallκλάση.

h1. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h2. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h3. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h4. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h5. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h6. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

Αντίγραφο σώματος

Η καθολική προεπιλογή του Bootstrap font-sizeείναι 14 px , line-heightμε 1,428 . Αυτό εφαρμόζεται σε <body>όλες τις παραγράφους. Επιπλέον, οι <p>(παράγραφοι) λαμβάνουν ένα κατώτατο περιθώριο του μισού του υπολογισμένου ύψους γραμμής τους (10 εικονοστοιχεία από προεπιλογή).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Αντίγραφο κύριου σώματος

Κάντε μια παράγραφο να ξεχωρίζει προσθέτοντας .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Χτισμένο με Λιγότερο

Η τυπογραφική κλίμακα βασίζεται σε δύο μεταβλητές Less in variables.less : @font-size-baseκαι @line-height-base. Το πρώτο είναι το βασικό μέγεθος γραμματοσειράς που χρησιμοποιείται παντού και το δεύτερο είναι το ύψος γραμμής βάσης. Χρησιμοποιούμε αυτές τις μεταβλητές και μερικά απλά μαθηματικά για να δημιουργήσουμε τα περιθώρια, τα paddings και τα ύψη γραμμής όλων των τύπων μας και πολλά άλλα. Προσαρμόστε τα και το Bootstrap προσαρμόζεται.

Ενσωματωμένα στοιχεία κειμένου

Επισημασμένο κείμενο

Για να επισημάνετε μια σειρά κειμένου λόγω της συνάφειάς του σε άλλο περιβάλλον, χρησιμοποιήστε την <mark>ετικέτα.

Μπορείτε να χρησιμοποιήσετε την ετικέτα σήμανσης για νααποκορύφωμακείμενο.

You can use the mark tag to <mark>highlight</mark> text.

Διαγραμμένο κείμενο

Για να υποδείξετε μπλοκ κειμένου που έχουν διαγραφεί χρησιμοποιήστε την <del>ετικέτα.

~~Αυτή η γραμμή κειμένου προορίζεται να αντιμετωπίζεται ως διαγραμμένο κείμενο.~~

<del>This line of text is meant to be treated as deleted text.</del>

Διαγραφή κειμένου

Για να υποδείξετε μπλοκ κειμένου που δεν είναι πλέον σχετικά, χρησιμοποιήστε την <s>ετικέτα.

~~Αυτή η γραμμή κειμένου προορίζεται να αντιμετωπίζεται ως μη ακριβής.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

Έγινε εισαγωγή κειμένου

Για την ένδειξη των προσθηκών στο έγγραφο χρησιμοποιήστε την <ins>ετικέτα.

Αυτή η γραμμή κειμένου προορίζεται να αντιμετωπίζεται ως προσθήκη στο έγγραφο.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

Υπογραμμισμένο κείμενο

Για να υπογραμμίσετε το κείμενο χρησιμοποιήστε την <u>ετικέτα.

Αυτή η γραμμή κειμένου θα αποδοθεί όπως υπογραμμίζεται

<u>This line of text will render as underlined</u>

Χρησιμοποιήστε τις προεπιλεγμένες ετικέτες έμφασης της HTML με ελαφριά στυλ.

Μικρό κείμενο

Για να αποσυμπιέσετε ενσωματωμένα ή μπλοκ κειμένου, χρησιμοποιήστε την <small>ετικέτα για να ορίσετε το κείμενο στο 85% του μεγέθους του γονικού. Τα στοιχεία επικεφαλίδας λαμβάνουν τα δικά τους font-sizeγια ένθετα <small>στοιχεία.

Μπορείτε εναλλακτικά να χρησιμοποιήσετε ένα ενσωματωμένο στοιχείο με .smallαντί για οποιοδήποτε <small>.

Αυτή η γραμμή κειμένου προορίζεται να αντιμετωπίζεται ως ψιλά γράμματα.

<small>This line of text is meant to be treated as fine print.</small>

Τολμηρός

Για την έμφαση σε ένα απόσπασμα κειμένου με μεγαλύτερο βάρος γραμματοσειράς.

Το παρακάτω απόσπασμα κειμένου αποδίδεται ως έντονο κείμενο .

<strong>rendered as bold text</strong>

Πλάγια γραφή

Για την έμφαση σε ένα απόσπασμα κειμένου με πλάγιους χαρακτήρες.

Το παρακάτω απόσπασμα κειμένου αποδίδεται ως κείμενο με πλάγια γραφή .

<em>rendered as italicized text</em>

Εναλλακτικά στοιχεία

Μη διστάσετε να χρησιμοποιήσετε <b>και <i>σε HTML5. <b>προορίζεται για την επισήμανση λέξεων ή φράσεων χωρίς να αποδίδει πρόσθετη σημασία, ενώ <i>είναι κυρίως για φωνή, τεχνικούς όρους κ.λπ.

Κατηγορίες ευθυγράμμισης

Εύκολη ευθυγράμμιση κειμένου σε στοιχεία με κλάσεις στοίχισης κειμένου.

Κείμενο με αριστερή στοίχιση.

Κείμενο στοίχισης στο κέντρο.

Δεξιά στοίχιση κειμένου.

Αιτιολογημένο κείμενο.

Χωρίς κείμενο αναδίπλωσης.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Μαθήματα μεταμόρφωσης

Μετασχηματισμός κειμένου σε στοιχεία με τάξεις κεφαλαίων κειμένου.

Κείμενο με πεζά γράμματα.

Κείμενο με κεφαλαία γράμματα.

Κείμενο με κεφαλαία.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Συντομογραφίες

Στυλιζαρισμένη εφαρμογή του <abbr>στοιχείου HTML για συντομογραφίες και ακρωνύμια για εμφάνιση της διευρυμένης έκδοσης στο δείκτη του ποντικιού. Οι συντομογραφίες με ένα titleχαρακτηριστικό έχουν ένα ανοιχτόχρωμο διάστικτο κάτω περίγραμμα και έναν δρομέα βοήθειας κατά την αιώρηση, παρέχοντας πρόσθετο πλαίσιο κατά την τοποθέτηση του ποντικιού και στους χρήστες βοηθητικών τεχνολογιών.

Βασική συντομογραφία

Μια συντομογραφία της λέξης χαρακτηριστικό είναι attr .

<abbr title="attribute">attr</abbr>

Πρωτοβουλία

Προσθέστε .initialismσε μια συντομογραφία για λίγο μικρότερο μέγεθος γραμματοσειράς.

Η HTML είναι το καλύτερο πράγμα από το ψωμί σε φέτες.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Διευθύνσεις

Παρουσιάστε στοιχεία επικοινωνίας για τον πλησιέστερο πρόγονο ή ολόκληρο το έργο. Διατηρήστε τη μορφοποίηση τελειώνοντας όλες τις γραμμές με <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Πλήρες Όνομα
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

Μπλοκ εισαγωγικά

Για την παράθεση μπλοκ περιεχομένου από άλλη πηγή στο έγγραφό σας.

Προεπιλεγμένο μπλοκ

Τυλίξτε <blockquote>γύρω από οποιοδήποτε HTML ως απόσπασμα. Για ευθεία εισαγωγικά, προτείνουμε ένα <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Επιλογές αποκλεισμού εισαγωγικών

Αλλαγές στυλ και περιεχομένου για απλές παραλλαγές σε ένα πρότυπο <blockquote>.

Ονομάζοντας μια πηγή

Προσθέστε ένα <footer>για τον προσδιορισμό της πηγής. Αναδιπλώστε το όνομα της εργασίας πηγής σε <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante.

Κάποιος διάσημος στον τίτλο πηγής

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Εναλλακτικές οθόνες

Προσθήκη .blockquote-reverseγια μπλοκ με περιεχόμενο δεξιά στοίχιση.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante.

Κάποιος διάσημος στον τίτλο πηγής

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Τόπος αγώνων

Χωρίς παραγγελία

Μια λίστα ειδών στα οποία η σειρά δεν έχει ρητή σημασία.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ακέραιος μολυσματικός lorem at massa
Διευκόλυνση σε pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Διέταξε

Μια λίστα ειδών στα οποία η σειρά έχει ρητώς σημασία.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ακέραιος μολυσματικός lorem at massa
Διευκόλυνση σε pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Αστυλ

Καταργήστε το προεπιλεγμένο list-styleκαι το αριστερό περιθώριο στα στοιχεία της λίστας (μόνο για παιδιά άμεσα). Αυτό ισχύει μόνο για τα στοιχεία της λίστας αμέσως παιδιών , που σημαίνει ότι θα χρειαστεί να προσθέσετε την τάξη και για τυχόν ένθετες λίστες.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ακέραιος μολυσματικός lorem at massa
Διευκόλυνση σε pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

Στη γραμμή

Τοποθετήστε όλα τα στοιχεία της λίστας σε μια γραμμή με display: inline-block;ελαφριά γέμιση.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

Περιγραφή

Μια λίστα όρων με τις σχετικές περιγραφές τους.

Λίστες περιγραφής: Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Οριζόντια περιγραφή

Δημιουργήστε όρους και περιγραφές στη <dl>σειρά δίπλα-δίπλα. Ξεκινά στοιβαγμένα όπως τα προεπιλεγμένα <dl>s, αλλά όταν επεκτείνεται η γραμμή πλοήγησης, κάντε το ίδιο.

Λίστες περιγραφής: Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, telus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

Αυτόματη περικοπή

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

Στη γραμμή

Τυλίξτε ενσωματωμένα αποσπάσματα κώδικα με <code>.

Για παράδειγμα, <section>θα πρέπει να είναι τυλιγμένο ως inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Εισαγωγή χρήστη

Χρησιμοποιήστε το <kbd>για να υποδείξετε την είσοδο που εισάγεται συνήθως μέσω του πληκτρολογίου.

Για εναλλαγή καταλόγων, πληκτρολογήστε cdακολουθούμενο από το όνομα του καταλόγου.
Για να επεξεργαστείτε τις ρυθμίσεις, πατήστε 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>

Βασικό μπλοκ

Χρήση <pre>για πολλές γραμμές κώδικα. Φροντίστε να ξεφύγετε από τυχόν γωνίες στον κώδικα για σωστή απόδοση.

<p>Δείγμα κειμένου εδώ...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

Μπορείτε προαιρετικά να προσθέσετε την .pre-scrollableκλάση, η οποία θα ορίσει μέγιστο ύψος 350 εικονοστοιχεία και θα παρέχει μια γραμμή κύλισης άξονα y.

Μεταβλητές

Για την ένδειξη μεταβλητών χρησιμοποιήστε την <var>ετικέτα.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Δείγμα εξόδου

Για την ένδειξη μπλοκ εξόδου δείγματος από ένα πρόγραμμα χρησιμοποιήστε την <samp>ετικέτα.

Αυτό το κείμενο προορίζεται να αντιμετωπίζεται ως δείγμα εξόδου από ένα πρόγραμμα υπολογιστή.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Βασικό παράδειγμα

Για βασικό στυλ—ελαφριά επένδυση και μόνο οριζόντια διαχωριστικά—προσθέστε τη βασική κατηγορία .tableσε οποιαδήποτε <table>. Μπορεί να φαίνεται εξαιρετικά περιττό, αλλά δεδομένης της ευρείας χρήσης πινάκων για άλλα πρόσθετα, όπως ημερολόγια και επιλογές ημερομηνιών, επιλέξαμε να απομονώσουμε τα προσαρμοσμένα στυλ πίνακα.

Προαιρετική λεζάντα πίνακα.
#	Ονομα	Επίθετο	Όνομα χρήστη
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

<table class="table">
  ...
</table>

Ριγέ σειρές

Χρησιμοποιήστε .table-stripedτο για να προσθέσετε λωρίδες ζέβρας σε οποιαδήποτε σειρά πίνακα εντός του <tbody>.

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Οι πίνακες με ρίγες διαμορφώνονται μέσω του :nth-childεπιλογέα CSS, ο οποίος δεν είναι διαθέσιμος στον Internet Explorer 8.

#	Ονομα	Επίθετο	Όνομα χρήστη
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

<table class="table table-striped">
  ...
</table>

Τραπέζι με περίγραμμα

Προσθήκη .table-borderedγια περιγράμματα σε όλες τις πλευρές του πίνακα και των κελιών.

#	Ονομα	Επίθετο	Όνομα χρήστη
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

<table class="table table-bordered">
  ...
</table>

Τοποθετήστε το δείκτη του ποντικιού σε σειρές

Προσθήκη .table-hoverγια να ενεργοποιήσετε μια κατάσταση αιώρησης σε σειρές πίνακα εντός ενός <tbody>.

#	Ονομα	Επίθετο	Όνομα χρήστη
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Λάρι	το πουλί	@κελάδημα

<table class="table table-hover">
  ...
</table>

Συμπυκνωμένο τραπέζι

Προσθέστε .table-condensedτο για να κάνετε τα τραπέζια πιο συμπαγή, κόβοντας τα κελιά στη μέση.

#	Ονομα	Επίθετο	Όνομα χρήστη
1	Σημάδι	Οθων	@mdo
2	Ιάκωβος	Θόρντον	@Λίπος
3	Larry the Bird		@κελάδημα

<table class="table table-condensed">
  ...
</table>

Τάξεις με βάση τα συμφραζόμενα

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

Τάξη	Περιγραφή
`.active`	Εφαρμόζει το χρώμα του δείκτη σε μια συγκεκριμένη σειρά ή κελί
`.success`	Υποδεικνύει μια επιτυχημένη ή θετική ενέργεια
`.info`	Υποδεικνύει μια ουδέτερη πληροφοριακή αλλαγή ή ενέργεια
`.warning`	Υποδεικνύει μια προειδοποίηση που μπορεί να χρειάζεται προσοχή
`.danger`	Υποδεικνύει μια επικίνδυνη ή δυνητικά αρνητική ενέργεια

#	Επικεφαλίδα στήλης	Επικεφαλίδα στήλης	Επικεφαλίδα στήλης
1	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης
2	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης
3	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης
4	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης
5	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης
6	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης
7	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης
8	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης
9	Περιεχόμενο στήλης	Περιεχόμενο στήλης	Περιεχόμενο στήλης

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

Η χρήση χρώματος για να προσθέσετε νόημα σε μια σειρά πίνακα ή μεμονωμένο κελί παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί σε χρήστες υποστηρικτικών τεχνολογιών – όπως συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (το ορατό κείμενο στη σχετική γραμμή/κελί του πίνακα) είτε περιλαμβάνονται μέσω εναλλακτικών μέσων, όπως πρόσθετο κείμενο κρυμμένο με την .sr-onlyτάξη.

Αποκριτικοί πίνακες

Δημιουργήστε πίνακες που ανταποκρίνονται τυλίγοντας οποιονδήποτε προς τα .tableμέσα .table-responsiveγια να τους κάνετε οριζόντια κύλιση σε μικρές συσκευές (κάτω από 768 εικονοστοιχεία). Κατά την προβολή σε οτιδήποτε μεγαλύτερο από 768 px πλάτος, δεν θα δείτε καμία διαφορά σε αυτούς τους πίνακες.

Κατακόρυφη αποκοπή/περικοπή

Οι αποκριτικοί πίνακες χρησιμοποιούν το overflow-y: hidden, το οποίο αποκόπτει κάθε περιεχόμενο που υπερβαίνει το κάτω ή το επάνω άκρο του πίνακα. Συγκεκριμένα, αυτό μπορεί να αποκόψει τα αναπτυσσόμενα μενού και άλλα γραφικά στοιχεία τρίτων.

Firefox και σύνολα πεδίων

Ο Firefox έχει ένα περίεργο στυλ σετ πεδίων widthπου παρεμβαίνει στον αποκριτικό πίνακα. Αυτό δεν μπορεί να παρακαμφθεί χωρίς ένα hack ειδικά για τον Firefox που δεν παρέχουμε στο Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Για περισσότερες πληροφορίες, διαβάστε αυτήν την απάντηση στο Stack Overflow .

#	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα
1	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας
2	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας
3	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας

#	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα	Επικεφαλίδα πίνακα
1	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας
2	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας
3	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας	Πίνακας

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Βασικό παράδειγμα

Τα μεμονωμένα στοιχεία ελέγχου φόρμας λαμβάνουν αυτόματα κάποιο καθολικό στυλ. Όλα τα κείμενα <input>, <textarea>και <select>τα στοιχεία με .form-controlέχουν οριστεί σε width: 100%;από προεπιλογή. Τυλίξτε ετικέτες και χειριστήρια .form-groupγια βέλτιστη απόσταση.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Μην αναμιγνύετε ομάδες φόρμας με ομάδες εισόδου

Μην αναμιγνύετε ομάδες φόρμας απευθείας με ομάδες εισόδου . Αντίθετα, τοποθετήστε την ομάδα εισόδου μέσα στην ομάδα φόρμας.

Ενσωματωμένη φόρμα

Προσθέστε .form-inlineστη φόρμα σας (η οποία δεν χρειάζεται να είναι <form>) για στοιχεία ελέγχου αριστερής στοίχισης και ενσωματωμένου μπλοκ. Αυτό ισχύει μόνο για φόρμες εντός θυρών προβολής που έχουν πλάτος τουλάχιστον 768 pixel.

Μπορεί να απαιτεί προσαρμοσμένα πλάτη

Οι είσοδοι και οι επιλογές έχουν width: 100%;εφαρμοστεί από προεπιλογή στο Bootstrap. Μέσα στις ενσωματωμένες φόρμες, επαναφέρουμε ότι width: auto;πολλά στοιχεία ελέγχου μπορούν να βρίσκονται στην ίδια γραμμή. Ανάλογα με τη διάταξή σας, ενδέχεται να απαιτούνται πρόσθετα προσαρμοσμένα πλάτη.

Πάντα να προσθέτετε ετικέτες

Οι αναγνώστες οθόνης θα έχουν πρόβλημα με τις φόρμες σας, εάν δεν συμπεριλάβετε μια ετικέτα για κάθε εισαγωγή. Για αυτές τις ενσωματωμένες φόρμες, μπορείτε να αποκρύψετε τις ετικέτες χρησιμοποιώντας την .sr-onlyκλάση. Υπάρχουν περαιτέρω εναλλακτικές μέθοδοι παροχής ετικέτας για υποστηρικτικές τεχνολογίες, όπως το χαρακτηριστικό aria-label, aria-labelledbyή title. Εάν δεν υπάρχει κανένα από αυτά, οι αναγνώστες οθόνης ενδέχεται να καταφύγουν στη χρήση του placeholderχαρακτηριστικού, εάν υπάρχει, αλλά σημειώστε ότι η χρήση του placeholderως αντικατάσταση για άλλες μεθόδους επισήμανσης δεν συνιστάται.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Οριζόντια μορφή

Χρησιμοποιήστε τις προκαθορισμένες κατηγορίες πλέγματος του Bootstrap για να ευθυγραμμίσετε ετικέτες και ομάδες στοιχείων ελέγχου φόρμας σε οριζόντια διάταξη προσθέτοντας .form-horizontalστη φόρμα (η οποία δεν χρειάζεται να είναι <form>). Με αυτόν τον τρόπο αλλάζει .form-groupη συμπεριφορά του ως σειρές πλέγματος, οπότε δεν χρειάζεται .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

Υποστηριζόμενα χειριστήρια

Παραδείγματα τυπικών στοιχείων ελέγχου φόρμας που υποστηρίζονται σε μια διάταξη παραδείγματος φόρμας.

Εισροές

Τα πιο κοινά στοιχεία ελέγχου φόρμας, πεδία εισαγωγής που βασίζονται σε κείμενο. Περιλαμβάνει υποστήριξη για όλους τους τύπους HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, και color.

Απαιτείται δήλωση τύπου

Οι είσοδοι θα διαμορφωθούν πλήρως μόνο εάν typeέχουν δηλωθεί σωστά.

<input type="text" class="form-control" placeholder="Text input">

Ομάδες εισόδου

Για να προσθέσετε ενσωματωμένο κείμενο ή κουμπιά πριν και/ή μετά από οποιοδήποτε κείμενο <input>, ελέγξτε το στοιχείο της ομάδας εισαγωγής .

Textarea

Έλεγχος φόρμας που υποστηρίζει πολλές γραμμές κειμένου. Αλλάξτε rowsτο χαρακτηριστικό όπως απαιτείται.

<textarea class="form-control" rows="3"></textarea>

Πλαίσια ελέγχου και ραδιόφωνα

Τα πλαίσια ελέγχου είναι για την επιλογή μιας ή περισσότερων επιλογών σε μια λίστα, ενώ τα ραδιόφωνα είναι για την επιλογή μιας επιλογής από πολλές.

Υποστηρίζονται απενεργοποιημένα πλαίσια ελέγχου και ραδιόφωνα, αλλά για να παράσχετε έναν "μη επιτρεπόμενο" δρομέα στον δείκτη του ποντικιού του γονέα <label>, θα πρέπει να προσθέσετε την .disabledκλάση στο γονικό .radio, .radio-inline, .checkboxή .checkbox-inline.

Προεπιλογή (στοιβάζονται)

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Ενσωματωμένα πλαίσια ελέγχου και ραδιόφωνα

Χρησιμοποιήστε τις κλάσεις .checkbox-inlineή .radio-inlineσε μια σειρά από πλαίσια ελέγχου ή ραδιόφωνα για στοιχεία ελέγχου που εμφανίζονται στην ίδια γραμμή.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Πλαίσια ελέγχου και ραδιόφωνα χωρίς κείμενο ετικέτας

Εάν δεν έχετε κείμενο μέσα στο <label>, η εισαγωγή τοποθετείται όπως θα περιμένατε. Προς το παρόν λειτουργεί μόνο σε μη ενσωματωμένα πλαίσια ελέγχου και ραδιόφωνα. Θυμηθείτε να παρέχετε ακόμα κάποια μορφή ετικέτας για υποστηρικτικές τεχνολογίες (για παράδειγμα, χρησιμοποιώντας aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Επιλέγει

Λάβετε υπόψη ότι πολλά εγγενή επιλεγμένα μενού—συγκεκριμένα στο Safari και στο Chrome—έχουν στρογγυλεμένες γωνίες που δεν μπορούν να τροποποιηθούν μέσω border-radiusιδιοτήτων.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

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

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Στατικός έλεγχος

Όταν πρέπει να τοποθετήσετε απλό κείμενο δίπλα σε μια ετικέτα φόρμας μέσα σε μια φόρμα, χρησιμοποιήστε την .form-control-staticκλάση σε ένα <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Κατάσταση εστίασης

Αφαιρούμε τα προεπιλεγμένα outlineστυλ σε ορισμένα στοιχεία ελέγχου φόρμας και εφαρμόζουμε ένα box-shadowστη θέση του για :focus.

Επίδειξη `:focus`κατάσταση

Το παραπάνω παράδειγμα εισαγωγής χρησιμοποιεί προσαρμοσμένα στυλ στην τεκμηρίωσή μας για να δείξει την :focusκατάσταση σε ένα .form-control.

Κατάσταση αναπηρίας

Προσθέστε το disabledχαρακτηριστικό boolean σε μια είσοδο για να αποτρέψετε τις αλληλεπιδράσεις των χρηστών. Οι απενεργοποιημένες είσοδοι εμφανίζονται πιο ανοιχτές και προσθέτουν not-allowedδρομέα.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Απενεργοποιημένα σύνολα πεδίων

Προσθέστε το disabledχαρακτηριστικό στο a <fieldset>για να απενεργοποιήσετε όλα τα στοιχεία ελέγχου εντός του <fieldset>ταυτόχρονα.

Προειδοποίηση σχετικά με τη λειτουργικότητα του συνδέσμου`<a>`

Από προεπιλογή, τα προγράμματα περιήγησης θα αντιμετωπίζουν όλα τα εγγενή στοιχεία ελέγχου φόρμας ( <input>, <select>και <button>στοιχεία) μέσα σε ένα <fieldset disabled>ως απενεργοποιημένα, αποτρέποντας τις αλληλεπιδράσεις τόσο του πληκτρολογίου όσο και του ποντικιού σε αυτά. Ωστόσο, εάν η φόρμα σας περιλαμβάνει επίσης <a ... class="btn btn-*">στοιχεία, θα δοθεί μόνο ένα στυλ pointer-events: none. Όπως σημειώθηκε στην ενότητα σχετικά με την κατάσταση απενεργοποίησης για κουμπιά (και συγκεκριμένα στην υποενότητα για στοιχεία αγκύρωσης), αυτή η ιδιότητα CSS δεν είναι ακόμη τυποποιημένη και δεν υποστηρίζεται πλήρως στην Opera 18 και νεότερη έκδοση ή στον Internet Explorer 11 και κέρδισε Δεν εμποδίζετε τους χρήστες του πληκτρολογίου να μπορούν να εστιάσουν ή να ενεργοποιήσουν αυτούς τους συνδέσμους. Για να είστε ασφαλείς, χρησιμοποιήστε προσαρμοσμένη JavaScript για να απενεργοποιήσετε τέτοιους συνδέσμους.

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Ενώ το Bootstrap θα εφαρμόσει αυτά τα στυλ σε όλα τα προγράμματα περιήγησης, ο Internet Explorer 11 και παρακάτω δεν υποστηρίζουν πλήρως το disabledχαρακτηριστικό σε ένα <fieldset>. Χρησιμοποιήστε προσαρμοσμένη JavaScript για να απενεργοποιήσετε το σύνολο πεδίων σε αυτά τα προγράμματα περιήγησης.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Κατάσταση μόνο για ανάγνωση

Προσθέστε το readonlyχαρακτηριστικό boolean σε μια είσοδο για να αποτρέψετε την τροποποίηση της τιμής της εισόδου. Οι είσοδοι μόνο για ανάγνωση εμφανίζονται πιο ελαφριές (όπως οι απενεργοποιημένες είσοδοι), αλλά διατηρούν τον τυπικό δρομέα.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Βοήθεια ΚΕΙΜΕΝΟΥ

Κείμενο βοήθειας επιπέδου αποκλεισμού για στοιχεία ελέγχου φορμών.

Συσχέτιση κειμένου βοήθειας με στοιχεία ελέγχου φόρμας

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

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Καταστάσεις επικύρωσης

Το Bootstrap περιλαμβάνει στυλ επικύρωσης για καταστάσεις σφάλματος, προειδοποίησης και επιτυχίας στα στοιχεία ελέγχου φορμών. Για χρήση, προσθήκη .has-warning, .has-errorή .has-successστο γονικό στοιχείο. Οποιοδήποτε .control-label, .form-control, και .help-blockεντός αυτού του στοιχείου θα λάβει τα στυλ επικύρωσης.

Μεταφορά κατάστασης επικύρωσης σε υποστηρικτικές τεχνολογίες και χρήστες αχρωματοψίας

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

Βεβαιωθείτε ότι παρέχεται επίσης μια εναλλακτική ένδειξη κατάστασης. Για παράδειγμα, μπορείτε να συμπεριλάβετε μια υπόδειξη για την κατάσταση στο <label>ίδιο το κείμενο του ελέγχου φόρμας (όπως συμβαίνει στο ακόλουθο παράδειγμα κώδικα), να συμπεριλάβετε ένα Glyphicon (με κατάλληλο εναλλακτικό κείμενο χρησιμοποιώντας την .sr-onlyκλάση - δείτε τα παραδείγματα Glyphicon ) ή παρέχοντας ένα πρόσθετο μπλοκ κειμένου βοήθειας . Ειδικά για τις υποστηρικτικές τεχνολογίες, μπορούν επίσης να εκχωρηθούν ένα aria-invalid="true"χαρακτηριστικό σε μη έγκυρα στοιχεία ελέγχου φόρμας.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

Με προαιρετικά εικονίδια

Μπορείτε επίσης να προσθέσετε προαιρετικά εικονίδια σχολίων με την προσθήκη .has-feedbackκαι το δεξί εικονίδιο.

Τα εικονίδια σχολίων λειτουργούν μόνο με στοιχεία κειμένου <input class="form-control">.

Εικονίδια, ετικέτες και ομάδες εισόδου

Απαιτείται η μη αυτόματη τοποθέτηση εικονιδίων ανατροφοδότησης για εισόδους χωρίς ετικέτα και για ομάδες εισόδου με πρόσθετο στα δεξιά. Σας ενθαρρύνουμε να παρέχετε ετικέτες για όλες τις εισροές για λόγους προσβασιμότητας. Εάν θέλετε να αποτρέψετε την εμφάνιση ετικετών, αποκρύψτε τις με την .sr-onlyτάξη. Εάν πρέπει να κάνετε χωρίς ετικέτες, προσαρμόστε την topτιμή του εικονιδίου σχολίων. Για ομάδες εισόδου, προσαρμόστε την rightτιμή σε μια κατάλληλη τιμή pixel ανάλογα με το πλάτος του πρόσθετου σας.

Μετάδοση της σημασίας του εικονιδίου στις υποστηρικτικές τεχνολογίες

Για να διασφαλιστεί ότι οι υποστηρικτικές τεχνολογίες – όπως οι συσκευές ανάγνωσης οθόνης – μεταφέρουν σωστά το νόημα ενός εικονιδίου, θα πρέπει να συμπεριληφθεί πρόσθετο κρυφό κείμενο στην .sr-onlyτάξη και να συσχετιστεί ρητά με το στοιχείο ελέγχου φόρμας με το οποίο σχετίζεται με τη χρήση aria-describedby. Εναλλακτικά, βεβαιωθείτε ότι το νόημα (για παράδειγμα, το γεγονός ότι υπάρχει μια προειδοποίηση για ένα συγκεκριμένο πεδίο εισαγωγής κειμένου) μεταφέρεται με κάποια άλλη μορφή, όπως αλλαγή του κειμένου του πραγματικού <label>που σχετίζεται με το στοιχείο ελέγχου φόρμας.

Αν και τα ακόλουθα παραδείγματα αναφέρουν ήδη την κατάσταση επικύρωσης των αντίστοιχων στοιχείων ελέγχου φόρμας στο <label>ίδιο το κείμενο, η παραπάνω τεχνική (χρησιμοποιώντας .sr-onlyκείμενο και aria-describedby) έχει συμπεριληφθεί για επεξηγηματικούς σκοπούς.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Προαιρετικά εικονίδια σε οριζόντιες και ενσωματωμένες φόρμες

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Προαιρετικά εικονίδια με κρυφές `.sr-only`ετικέτες

Εάν χρησιμοποιείτε την .sr-onlyκλάση για να αποκρύψετε ένα στοιχείο ελέγχου φόρμας <label>(αντί να χρησιμοποιήσετε άλλες επιλογές επισήμανσης, όπως το aria-labelχαρακτηριστικό), το Bootstrap θα προσαρμόσει αυτόματα τη θέση του εικονιδίου μόλις προστεθεί.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Έλεγχος μεγέθους

Ορίστε ύψη χρησιμοποιώντας κλάσεις όπως .input-lgκαι ορίστε πλάτη χρησιμοποιώντας κατηγορίες στηλών πλέγματος όπως .col-lg-*.

Μέγεθος ύψους

Δημιουργήστε ψηλότερα ή μικρότερα στοιχεία ελέγχου φόρμας που ταιριάζουν με τα μεγέθη κουμπιών.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Μεγέθη ομάδων οριζόντιας μορφής

Γρήγορη διάσταση ετικετών και στοιχείων ελέγχου φόρμας μέσα .form-horizontalπροσθέτοντας .form-group-lgή .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Μέγεθος στήλης

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

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Ετικέτες κουμπιών

Χρησιμοποιήστε τις κατηγορίες κουμπιών σε ένα στοιχείο <a>, <button>, ή <input>.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Χρήση σε συγκεκριμένο πλαίσιο

Ενώ οι κατηγορίες κουμπιών μπορούν να χρησιμοποιηθούν σε <a>και <button>στοιχεία, υποστηρίζονται μόνο <button>στοιχεία στα στοιχεία πλοήγησης και γραμμής πλοήγησης.

Σύνδεσμοι που λειτουργούν ως κουμπιά

Εάν τα <a>στοιχεία χρησιμοποιούνται για να λειτουργούν ως κουμπιά – ενεργοποιώντας τη λειτουργία στη σελίδα, αντί για πλοήγηση σε άλλο έγγραφο ή ενότητα στην τρέχουσα σελίδα – θα πρέπει επίσης να τους δοθεί το κατάλληλο role="button".

Απόδοση μεταξύ προγραμμάτων περιήγησης

Ως βέλτιστη πρακτική, συνιστούμε ανεπιφύλακτα τη χρήση του <button>στοιχείου όποτε είναι δυνατόν για να διασφαλιστεί η αντιστοίχιση απόδοσης μεταξύ προγραμμάτων περιήγησης.

Μεταξύ άλλων, υπάρχει ένα σφάλμα στον Firefox <30 που μας εμποδίζει να ρυθμίσουμε τα κουμπιά line-heightπου <input>βασίζονται, με αποτέλεσμα να μην ταιριάζουν ακριβώς με το ύψος άλλων κουμπιών στον Firefox.

Επιλογές

Χρησιμοποιήστε οποιαδήποτε από τις διαθέσιμες κατηγορίες κουμπιών για να δημιουργήσετε γρήγορα ένα στυλισμένο κουμπί.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

Η χρήση χρώματος για να προσθέσετε νόημα σε ένα κουμπί παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταφερθεί στους χρήστες υποστηρικτικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδηλώνονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (το ορατό κείμενο του κουμπιού) είτε περιλαμβάνονται μέσω εναλλακτικών μέσων, όπως πρόσθετο κείμενο κρυμμένο με την .sr-onlyτάξη.

Μεγέθη

Θέλετε μεγαλύτερα ή μικρότερα κουμπιά; Προσθέστε .btn-lg, .btn-sm, ή .btn-xsγια επιπλέον μεγέθη.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Δημιουργήστε κουμπιά επιπέδου μπλοκ—αυτά που εκτείνονται σε όλο το πλάτος ενός γονέα— προσθέτοντας .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Ενεργή κατάσταση

Τα κουμπιά θα εμφανίζονται πατημένα (με πιο σκούρο φόντο, πιο σκούρο περίγραμμα και ένθετη σκιά) όταν είναι ενεργά. Για <button>στοιχεία, αυτό γίνεται μέσω :active. Για <a>στοιχεία, γίνεται με .active. Ωστόσο, μπορείτε να χρησιμοποιήσετε .activeστο <button>s (και να συμπεριλάβετε το aria-pressed="true"χαρακτηριστικό) εάν χρειαστεί να αναπαραγάγετε την ενεργή κατάσταση μέσω προγραμματισμού.

Στοιχείο κουμπιού

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

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Στοιχείο άγκυρας

Προσθέστε την .activeτάξη στα <a>κουμπιά.

Κύριος σύνδεσμος Σύνδεσμος

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Κατάσταση αναπηρίας

Κάντε τα κουμπιά να φαίνονται χωρίς κλικ, ξεθωριάζοντάς τα ξανά με opacity.

Στοιχείο κουμπιού

Προσθέστε το disabledχαρακτηριστικό στα <button>κουμπιά.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Εάν προσθέσετε το disabledχαρακτηριστικό σε ένα <button>, ο Internet Explorer 9 και παρακάτω θα αποδώσει το κείμενο γκρι με μια δυσάρεστη σκιά κειμένου που δεν μπορούμε να διορθώσουμε.

Στοιχείο άγκυρας

Προσθέστε την .disabledτάξη στα <a>κουμπιά.

Κύριος σύνδεσμος Σύνδεσμος

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

Προειδοποίηση λειτουργικότητας συνδέσμου

Αυτή η κλάση χρησιμοποιεί pointer-events: noneγια να προσπαθήσει να απενεργοποιήσει τη λειτουργία συνδέσμου του <a>s, αλλά αυτή η ιδιότητα CSS δεν είναι ακόμη τυποποιημένη και δεν υποστηρίζεται πλήρως στην Opera 18 και νεότερη έκδοση ή στον Internet Explorer 11. Επιπλέον, ακόμη και σε προγράμματα περιήγησης που υποστηρίζουν pointer-events: none, πληκτρολόγιο Η πλοήγηση παραμένει ανεπηρέαστη, πράγμα που σημαίνει ότι οι χρήστες πληκτρολογίου με όραση και οι χρήστες υποστηρικτικών τεχνολογιών θα εξακολουθούν να μπορούν να ενεργοποιούν αυτούς τους συνδέσμους. Για να είστε ασφαλείς, χρησιμοποιήστε προσαρμοσμένη JavaScript για να απενεργοποιήσετε τέτοιους συνδέσμους.

Αποκριτικές εικόνες

Οι εικόνες στο Bootstrap 3 μπορούν να γίνουν φιλικές προς την απόκριση μέσω της προσθήκης της .img-responsiveκλάσης. Αυτό ισχύει max-width: 100%;και height: auto;για display: block;την εικόνα, ώστε να κλιμακώνεται όμορφα στο γονικό στοιχείο.

Για να κεντράρετε εικόνες που χρησιμοποιούν την .img-responsiveκλάση, χρησιμοποιήστε .center-blockαντί για .text-center. Δείτε την ενότητα βοηθητικών τάξεων για περισσότερες λεπτομέρειες σχετικά με τη .center-blockχρήση.

Εικόνες SVG και IE 8-10

Στον Internet Explorer 8-10, οι εικόνες SVG με .img-responsiveέχουν δυσανάλογο μέγεθος. Για να το διορθώσετε, προσθέστε width: 100% \9;όπου χρειάζεται. Το Bootstrap δεν το εφαρμόζει αυτόματα, καθώς προκαλεί επιπλοκές σε άλλες μορφές εικόνας.

<img src="..." class="img-responsive" alt="Responsive image">

Σχήματα εικόνας

Προσθέστε κλάσεις σε ένα <img>στοιχείο για εύκολο στυλ εικόνων σε οποιοδήποτε έργο.

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Λάβετε υπόψη ότι ο Internet Explorer 8 δεν υποστηρίζει στρογγυλεμένες γωνίες.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Χρώματα με βάση τα συμφραζόμενα

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

Fusce dapibus, telus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Η ενασχόληση με την ιδιαιτερότητα

Μερικές φορές οι κλάσεις έμφασης δεν μπορούν να εφαρμοστούν λόγω της ιδιαιτερότητας ενός άλλου επιλογέα. Στις περισσότερες περιπτώσεις, μια επαρκής λύση είναι να τυλίξετε το κείμενό σας σε ένα <span>με την τάξη.

Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

Η χρήση χρώματος για να προσθέσετε νόημα παρέχει μόνο μια οπτική ένδειξη, η οποία δεν θα μεταδοθεί στους χρήστες βοηθητικών τεχνολογιών – όπως οι συσκευές ανάγνωσης οθόνης. Βεβαιωθείτε ότι οι πληροφορίες που υποδεικνύονται με το χρώμα είναι είτε προφανείς από το ίδιο το περιεχόμενο (τα χρώματα με βάση τα συμφραζόμενα χρησιμοποιούνται μόνο για να ενισχύσουν το νόημα που υπάρχει ήδη στο κείμενο/σήμανση) είτε περιλαμβάνονται μέσω εναλλακτικών μέσων, όπως πρόσθετο κείμενο κρυμμένο με την .sr-onlyτάξη .

Συμφραζόμενα υπόβαθρα

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Η ενασχόληση με την ιδιαιτερότητα

Μερικές φορές οι κλάσεις παρασκηνίου με βάση τα συμφραζόμενα δεν μπορούν να εφαρμοστούν λόγω της ιδιαιτερότητας ενός άλλου επιλογέα. Σε ορισμένες περιπτώσεις, μια επαρκής λύση είναι να τυλίξετε το περιεχόμενο του στοιχείου σας σε ένα <div>με την τάξη.

Μετάδοση νοήματος στις υποστηρικτικές τεχνολογίες

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

Κλείσιμο εικονίδιο

Χρησιμοποιήστε το γενικό εικονίδιο κλεισίματος για να απορρίψετε περιεχόμενο όπως τρόπους λειτουργίας και ειδοποιήσεις.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

Χρησιμοποιήστε καρέ για να υποδείξετε τη λειτουργικότητα και την κατεύθυνση του αναπτυσσόμενου μενού. Σημειώστε ότι το προεπιλεγμένο καρέ θα αντιστραφεί αυτόματα στα αναπτυσσόμενα μενού .

<span class="caret"></span>

Γρήγορες πλωτήρες

Μετακινήστε ένα στοιχείο προς τα αριστερά ή τα δεξιά με μια κλάση. !importantπεριλαμβάνεται για την αποφυγή προβλημάτων ειδικότητας. Οι τάξεις μπορούν επίσης να χρησιμοποιηθούν ως mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Κεντράρετε μπλοκ περιεχομένου

Ορίστε ένα στοιχείο display: blockκαι κεντράρετε μέσω margin. Διατίθεται ως mixin και class.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Διόρθωση

Διαγράψτε εύκολα floatτα s προσθέτοντας .clearfix στο γονικό στοιχείο . Χρησιμοποιεί το micro clearfix όπως διαδόθηκε από τον Nicolas Gallagher. Μπορεί να χρησιμοποιηθεί και ως mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Εμφάνιση και απόκρυψη περιεχομένου

Επιβολή εμφάνισης ή απόκρυψης ενός στοιχείου ( συμπεριλαμβανομένων των προγραμμάτων ανάγνωσης οθόνης ) με τη χρήση των .showκαι .hiddenκλάσεων. Αυτές οι κλάσεις χρησιμοποιούνται !importantγια την αποφυγή διενέξεων ειδικοτήτων, όπως ακριβώς και οι γρήγορες floats . Διατίθενται μόνο για εναλλαγή επιπέδου μπλοκ. Μπορούν επίσης να χρησιμοποιηθούν ως μείγματα.

.hideείναι διαθέσιμο, αλλά δεν επηρεάζει πάντα τα προγράμματα ανάγνωσης οθόνης και έχει καταργηθεί από την έκδοση 3.0.1. Χρησιμοποιήστε .hiddenή .sr-onlyαντί.

Επιπλέον, .invisibleμπορεί να χρησιμοποιη��εί για την εναλλαγή μόνο της ορατότητας ενός στοιχείου, που σημαίνει ότι displayδεν τροποποιείται και το στοιχείο μπορεί να επηρεάσει τη ροή του εγγράφου.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Περιεχόμενο πλοήγησης με πρόγραμμα ανάγνωσης οθόνης και πληκτρολογίου

Απόκρυψη στοιχείου σε όλες τις συσκευές εκτός από τα προγράμματα ανάγνωσης οθόνης με .sr-only. Συνδυάστε .sr-onlyμε .sr-only-focusableγια να εμφανιστεί ξανά το στοιχείο όταν είναι εστιασμένο (π.χ. από χρήστη μόνο με πληκτρολόγιο). Απαραίτητο για την παρακολούθηση βέλτιστων πρακτικών προσβασιμότητας . Μπορεί να χρησιμοποιηθεί και ως mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Αντικατάσταση εικόνας

Χρησιμοποιήστε την .text-hideκλάση ή τη μίξη για να αντικαταστήσετε το περιεχόμενο κειμένου ενός στοιχείου με μια εικόνα φόντου.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

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

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

Διαθέσιμες τάξεις

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

	Εξαιρετικά μικρές συσκευέςΤηλέφωνα (<768 px)	Μικρές συσκευέςTablet (≥768 px)	Μεσαίες συσκευέςΕπιτραπέζιοι υπολογιστές (≥992 px)	Μεγάλες συσκευέςΕπιτραπέζιοι υπολογιστές (≥1200 px)
`.visible-xs-*`	Ορατός	Κρυμμένος	Κρυμμένος	Κρυμμένος
`.visible-sm-*`	Κρυμμένος	Ορατός	Κρυμμένος	Κρυμμένος
`.visible-md-*`	Κρυμμένος	Κρυμμένος	Ορατός	Κρυμμένος
`.visible-lg-*`	Κρυμμένος	Κρυμμένος	Κρυμμένος	Ορατός
`.hidden-xs`	Κρυμμένος	Ορατός	Ορατός	Ορατός
`.hidden-sm`	Ορατός	Κρυμμένος	Ορατός	Ορατός
`.hidden-md`	Ορατός	Ορατός	Κρυμμένος	Ορατός
`.hidden-lg`	Ορατός	Ορατός	Ορατός	Κρυμμένος

Από την έκδοση 3.2.0, οι .visible-*-*κλάσεις για κάθε σημείο διακοπής διατίθενται σε τρεις παραλλαγές, μία για κάθε displayτιμή ιδιότητας CSS που παρατίθεται παρακάτω.

Ομάδα τάξεων	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

Έτσι, για πολύ μικρές ( xs) οθόνες για παράδειγμα, οι διαθέσιμες .visible-*-*κλάσεις είναι: .visible-xs-block, .visible-xs-inline, και .visible-xs-inline-block.

Οι κλάσεις .visible-xs, .visible-sm, .visible-mdκαι .visible-lgυπάρχουν επίσης, αλλά έχουν καταργηθεί από την έκδοση 3.2.0 . Είναι περίπου ισοδύναμα με .visible-*-block, εκτός από πρόσθετες ειδικές περιπτώσεις για εναλλαγή <table>που σχετίζονται με στοιχεία.

Εκτύπωση μαθημάτων

Παρόμοια με τις κανονικές αποκριτικές κλάσεις, χρησιμοποιήστε τις για εναλλαγή περιεχομένου για εκτύπωση.

Τάξεις	Πρόγραμμα περιήγησης	Τυπώνω
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	Κρυμμένος	Ορατός
`.hidden-print`	Ορατός	Κρυμμένος

Η κλάση .visible-printυπάρχει επίσης, αλλά έχει καταργηθεί από την έκδοση 3.2.0. Είναι περίπου ισοδύναμο με .visible-print-block, εκτός από πρόσθετες ειδικές περιπτώσεις για <table>σχετικά στοιχεία.

Δοκιμαστικές περιπτώσεις

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

Ορατό στο...

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

Πολύ μικρό ✔ Ορατό σε x-small

Μικρό ✔ Ορατό σε μικρό

Μεσαίο ✔ Ορατό σε μεσαίο

Μεγάλο ✔ Ορατό σε μεγάλο μέγεθος

Εξαιρετικά μικρό και μικρό ✔ Ορατό σε x-small και small

Μεσαία και μεγάλη ✔ Ορατό σε μεσαίο και μεγάλο

Εξαιρετικά μικρό και μεσαίο ✔ Ορατό σε x-small και medium

Μικρά και μεγάλα ✔ Ορατό σε μικρό και μεγάλο

Εξαιρετικά μικρό και μεγάλο ✔ Ορατό σε x-small και large

Μικρές και μεσαίες ✔ Ορατό σε μικρό και μεσαίο

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

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

Πολύ μικρό ✔ Κρυφό στο x-small

Μικρό ✔ Κρυμμένο σε μικρό

Μεσαίο ✔ Κρυφό σε μεσαίο

Μεγάλο ✔ Κρυμμένο σε μεγάλο

Εξαιρετικά μικρό και μικρό ✔ Κρυφό σε x-small και small

Μεσαία και μεγάλη ✔ Κρυφό σε μεσαίο και μεγάλο

Εξαιρετικά μικρό και μεσαίο ✔ Κρυφό σε x-small και medium

Μικρά και μεγάλα ✔ Κρυμμένο σε μικρά και μεγάλα

Εξαιρετικά μικρό και μεγάλο ✔ Κρυφό σε x-small και large

Μικρές και μεσαίες ✔ Κρυφό σε μικρό και μεσαίο

Το CSS του Bootstrap είναι χτισμένο σε Less, έναν προεπεξεργαστή με πρόσθετες λειτουργίες όπως μεταβλητές, mixins και λειτουργίες για μεταγλώττιση CSS. Όσοι θέλουν να χρησιμοποιήσουν την πηγή Less αρχεία αντί για τα μεταγλωττισμένα αρχεία CSS μπορούν να χρησιμοποιήσουν τις πολυάριθμες μεταβλητές και τα mixins που χρησιμοποιούμε σε όλο το πλαίσιο.

Οι μεταβλητές πλέγματος και οι μίξεις καλύπτονται στην ενότητα Σύστημα πλέγματος .

Σύνταξη Bootstrap

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

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

Μεταβλητές

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

Χρωματιστά

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

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

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Σκαλωσιά

Μια χούφτα μεταβλητών για γρήγορη προσαρμογή βασικών στοιχείων του σκελετού του ιστότοπού σας.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Συνδέσεις

Διαμορφώστε εύκολα τους συνδέσμους σας με το σωστό χρώμα με μία μόνο τιμή.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Σημειώστε ότι @link-hover-colorχρησιμοποιεί μια συνάρτηση, ένα άλλο φοβερό εργαλείο από το Less, για να δημιουργήσει αυτόματα το σωστό χρώμα αιώρησης. Μπορείτε να χρησιμοποιήσετε darken, lighten, saturate, και desaturate.

Τυπογραφία

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

εικονίδια

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

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Συστατικά

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

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Μίξη προμηθευτών

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

Διαστάσεις κουτιού

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

Το mixin έχει καταργηθεί από την έκδοση 3.2.0, με την εισαγωγή του Autoprefixer. Για να διατηρήσει τη συμβατότητα προς τα πίσω, το Bootstrap θα συνεχίσει να χρησιμοποιεί το mixin εσωτερικά μέχρι το Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Στρογγυλεμένες γωνίες

Σήμερα, όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν την border-radiusιδιότητα χωρίς πρόθεμα. Ως εκ τούτου, δεν υπάρχει .border-radius()mixin, αλλά το Bootstrap περιλαμβάνει συντομεύσεις για γρήγορη στρογγυλοποίηση δύο γωνιών σε μια συγκεκριμένη πλευρά ενός αντικειμένου.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Σκιές κουτιού (Drop).

Εάν το κοινό-στόχος σας χρησιμοποιεί τα πιο πρόσφατα και καλύτερα προγράμματα περιήγησης και συσκευές, φροντίστε να χρησιμοποιήσετε μόνο του την box-shadowιδιοκτησία. Εάν χρειάζεστε υποστήριξη για παλαιότερες συσκευές Android (pre-v4) και iOS (pre-iOS 5), χρησιμοποιήστε το καταργημένο mixin για να λάβετε τα απαιτούμενα-webkit πρόθεμα.

Το mixin έχει καταργηθεί από την έκδοση 3.1.0, καθώς το Bootstrap δεν υποστηρίζει επίσημα τις ξεπερασμένες πλατφόρμες που δεν υποστηρίζουν την τυπική ιδιότητα. Για να διατηρήσει τη συμβατότητα προς τα πίσω, το Bootstrap θα συνεχίσει να χρησιμοποιεί το mixin εσωτερικά μέχρι το Bootstrap v4.

Φροντίστε να χρησιμοποιείτε rgba()χρώματα στις σκιές του κουτιού σας, ώστε να συνδυάζονται όσο το δυνατόν πιο άψογα με φόντο.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Μεταβάσεις

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

Τα mixins έχουν καταργηθεί από την έκδοση 3.2.0, με την εισαγωγή του Autoprefixer. Για να διατηρήσει τη συμβατότητα προς τα πίσω, το Bootstrap θα συνεχίσει να χρησιμοποιεί εσωτερικά τα mixins μέχρι το Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Μεταμορφώσεις

Περιστρέψτε, κλιμακώστε, μεταφράστε (μετακινήστε) ή παραμορφώστε οποιοδήποτε αντικείμενο.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Κινούμενα σχέδια

Μια μοναδική μίξη για τη χρήση όλων των ιδιοτήτων κινούμενων σχεδίων του CSS3 σε μια δήλωση και άλλες μίξεις για μεμονωμένες ιδιότητες.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Αδιαφάνεια

Ορίστε την αδιαφάνεια για όλα τα προγράμματα περιήγησης και παρέχετε μια filterεναλλακτική για τον IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Κείμενο κράτησης θέσης

Παρέχετε πλαίσιο για στοιχεία ελέγχου φορμών σε κάθε πεδίο.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Στήλες

Δημιουργήστε στήλες μέσω CSS σε ένα μόνο στοιχείο.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Διαβαθμίσεις

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

Μπορείτε επίσης να καθορίσετε τη γωνία μιας τυπικής γραμμικής κλίσης δύο χρωμάτων:

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

Ανεβάστε το ante και χρησιμοποιήστε τρία χρώματα. Ρυθμίστε το πρώτο χρώμα, το δεύτερο χρώμα, τη στάση χρώματος του δεύτερου χρώματος (μια ποσοστιαία τιμή όπως 25%) και το τρίτο χρώμα με αυτές τις μίξεις:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Ψηλά το κεφάλι! Σε περίπτωση που χρειαστεί να αφαιρέσετε μια διαβάθμιση, φροντίστε να αφαιρέσετε τυχόν IE filterπου μπορεί να έχετε προσθέσει. Μπορείτε να το κάνετε χρησιμοποιώντας το .reset-filter()mixin παράλληλα background-image: none;.

Μείγματα χρησιμότητας

Τα Utility mixins είναι mixins που συνδυάζουν άσχετες κατά τα άλλα ιδιότητες CSS για την επίτευξη ενός συγκεκριμένου στόχου ή εργασίας.

Διόρθωση

Ξεχάστε την προσθήκη class="clearfix"σε οποιοδήποτε στοιχείο και αντ 'αυτού προσθέστε το .clearfix()mixin όπου χρειάζεται. Χρησιμοποιεί το micro clearfix από τον Nicolas Gallagher .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Οριζόντιο κεντράρισμα

Επικεντρώστε γρήγορα οποιοδήποτε στοιχείο στο γονικό του. Απαιτεί widthή max-widthπρόκειται να οριστεί.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Βοηθοί ταξινόμησης μεγέθους

Καθορίστε τις διαστάσεις ενός αντικειμένου πιο εύκολα.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Περιοχές κειμένου με δυνατότητα αλλαγής μεγέθους

Διαμορφώστε εύκολα τις επιλογές αλλαγής μεγέθους για οποιαδήποτε περιοχή κειμένου ή οποιοδήποτε άλλο στοιχείο. Προεπιλογές στην κανονική συμπεριφορά του προγράμματος περιήγησης ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Περικοπή κειμένου

Περικόψτε εύκολα το κείμενο με μια έλλειψη με ένα μόνο mixin. Απαιτεί το στοιχείο να είναι blockή inline-blockεπίπεδο.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Εικόνες αμφιβληστροειδούς

Καθορίστε δύο διαδρομές εικόνας και τις διαστάσεις εικόνας @1x και το Bootstrap θα παρέχει ένα ερώτημα μέσων @2x. Εάν έχετε πολλές εικόνες για προβολή, σκεφτείτε να γράψετε την εικόνα CSS του αμφιβληστροειδούς σας με μη αυτόματο τρόπο σε ένα ερώτημα πολυμέσων.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Ενώ το Bootstrap είναι χτισμένο στο Less, έχει επίσης μια επίσημη θύρα Sass . Το διατηρούμε σε ξεχωριστό αποθετήριο GitHub και χειριζόμαστε ενημερώσεις με ένα σενάριο μετατροπής.

Τι περιλαμβάνεται

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

Μονοπάτι	Περιγραφή
`lib/`	Κώδικας Ruby Gem (Διαμόρφωση Sass, ενσωματώσεις Rails και Compass)
`tasks/`	Σενάρια μετατροπέα (μετατροπή ανάντη Less σε Sass)
`test/`	Τεστ μεταγλώττισης
`templates/`	Μανιφέστο πακέτου πυξίδας
`vendor/assets/`	Αρχεία Sass, JavaScript και γραμματοσειρών
`Rakefile`	Εσωτερικές εργασίες, όπως γκανιότα και μετατροπή

Επισκεφτείτε το αποθετήριο GitHub της θύρας Sass για να δείτε αυτά τα αρχεία σε δράση.

Εγκατάσταση

Για πληροφορίες σχετικά με τον τρόπο εγκατάστασης και χρήσης του Bootstrap για Sass, συμβουλευτείτε το αποθετήριο GitHub readme . Είναι η πιο ενημερωμένη πηγή και περιλαμβάνει πληροφορίες για χρήση με Rails, Compass και τυπικά έργα Sass.

Bootstrap για Sass

CSS

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

HTML5 doctype

Το κινητό πρώτα

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

Normalize.css

Εμπορευματοκιβώτια

Σύστημα πλέγματος

Εισαγωγή

Ερωτήματα μέσων ενημέρωσης

Επιλογές πλέγματος

Παράδειγμα: Στοιβαγμένα σε οριζόντια

Παράδειγμα: Δοχείο υγρών

Παράδειγμα: Κινητό και επιτραπέζιο υπολογιστή

Παράδειγμα: Κινητό, tablet, επιτραπέζιος υπολογιστής

Παράδειγμα: Περιτύλιγμα στήλης

Επαναφέρεται η αποκριτική στήλη

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

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

Παραγγελία στηλών

Λιγότερες μίξεις και μεταβλητές

Μεταβλητές

Μείγματα

Παράδειγμα χρήσης

Τυπογραφία

Επικεφαλίδες

h1. Επικεφαλίδα Bootstrap

h2. Επικεφαλίδα Bootstrap

h3. Επικεφαλίδα Bootstrap

h4. Επικεφαλίδα Bootstrap

h5. Επικεφαλίδα Bootstrap

h6. Επικεφαλίδα Bootstrap

h1. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h2. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h3. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h4. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h5. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

h6. Επικεφαλίδα εκκίνησης Δευτερεύον κείμενο

Αντίγραφο σώματος

Αντίγραφο κύριου σώματος

Χτισμένο με Λιγότερο

Ενσωματωμένα στοιχεία κειμένου

Επισημασμένο κείμενο

Διαγραμμένο κείμενο

Διαγραφή κειμένου

Έγινε εισαγωγή κειμένου

Υπογραμμισμένο κείμενο

Μικρό κείμενο

Τολμηρός

Πλάγια γραφή

Εναλλακτικά στοιχεία

Κατηγορίες ευθυγράμμισης

Μαθήματα μεταμόρφωσης

Συντομογραφίες

Βασική συντομογραφία

Πρωτοβουλία

Διευθύνσεις

Μπλοκ εισαγωγικά

Προεπιλεγμένο μπλοκ

Επιλογές αποκλεισμού εισαγωγικών

Ονομάζοντας μια πηγή

Εναλλακτικές οθόνες

Τόπος αγώνων

Χωρίς παραγγελία

Διέταξε

Αστυλ

Στη γραμμή

Περιγραφή

Οριζόντια περιγραφή

Αυτόματη περικοπή

Κώδικας

Στη γραμμή

Εισαγωγή χρήστη

Βασικό μπλοκ

Μεταβλητές

Δείγμα εξόδου

Πίνακες

Βασικό παράδειγμα

Ριγέ σειρές

Συμβατότητα μεταξύ προγραμμάτων περιήγησης

Επίδειξη `:focus`κατάσταση

Προειδοποίηση σχετικά με τη λειτουργικότητα του συνδέσμου`<a>`

Προαιρετικά εικονίδια με κρυφές `.sr-only`ετικέτες