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

<h1>Όλες οι επικεφαλίδες HTML <h6>είναι διαθέσιμες.

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

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

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

h4. Κεφάλαιο 4

h5. Κεφάλαιο 5

h6. Κεφάλαιο 6

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

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

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 σε μεταβλητές.less : @baseFontSizeκαι @baseLineHeight. Το πρώτο είναι το βασικό μέγεθος γραμματοσειράς που χρησιμοποιείται παντού και το δεύτερο είναι το ύψος γραμμής βάσης. Χρησιμοποιούμε αυτές τις μεταβλητές και μερικά απλά μαθηματικά για να δημιουργήσουμε τα περιθώρια, τα paddings και τα ύψη γραμμής όλων των τύπων μας και πολλά άλλα. Προσαρμόστε τα και το Bootstrap προσαρμόζεται.

Εμφαση

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

`<small>`

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

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

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

Τολμηρός

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

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

<strong> αποδόθηκε ως έντονο κείμενο </strong>

Πλάγια γραφή

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

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

Το <em> αποδόθηκε ως κείμενο με πλάγια γράμματα </em>

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

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

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

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

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

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

<p class = "text-left" > Κείμενο με αριστερή στοίχιση. </p> 
<p class = "κέντρο κειμένου" > Κείμενο στοίχισης στο κέντρο. </p> 
<p class = "text-right" > Κείμενο με στοίχιση δεξιά. </p>

Μαθήματα έμφασης

Μεταφέρετε νόημα μέσω του χρώματος με μια χούφτα βασικές τάξεις χρησιμότητας.

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

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

<p class = "σίγαση" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "σφάλμα κειμένου" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

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

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

`<abbr>`

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

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

<abbr title = "ιδιότητα" > attr </abbr>

`<abbr class="initialism">`

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

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

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

Διευθύνσεις

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

`<address>`

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

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

<διεύθυνση>
  <strong> Twitter, Inc. </strong><br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Τηλέφωνο" > P: </abbr> (123) 456-7890 
</address>
 
<διεύθυνση>
  <strong> Πλήρες Όνομα </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. Ακέραιος posuere erat a ante. </p>
</blockquote>

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

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

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante.
Κάποιος διάσημος στον τίτλο πηγής

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante. </p>
  <small> Κάποιος διάσημος <cite title = "Source Title" > Τίτλος πηγής </cite></small> 
</blockquote>

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

Χρησιμοποιήστε .pull-rightτο για αιωρούμενο, δεξιά στοίχιση μπλοκ.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante.
Κάποιος διάσημος στον τίτλο πηγής

<blockquote class = "pull-right" > 
  ...
</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 = "unstyled" > 
  <li> ... </li>
</ul>

Στη γραμμή

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "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>σειρά δίπλα-δίπλα.

Λίστες περιγραφής: Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.
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-οριζόντια" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

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

Στη γραμμή

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

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

Για παράδειγμα , <code> & lt ; η ενότητα & gt ;</ code > πρέπει να είναι τυλιγμένη ως ενσωματωμένη .

Βασικό μπλοκ

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

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

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

Ψηλά το κεφάλι!Φροντίστε να διατηρείτε τον κώδικα εντός των <pre>ετικετών όσο το δυνατόν πιο κοντά στα αριστερά. θα αποδώσει όλες τις καρτέλες.

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

Προεπιλεγμένα στυλ

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

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

<table class = "table" > 
  …
</table>

Προαιρετικά μαθήματα

Προσθέστε οποιαδήποτε από τις παρακάτω κλάσεις στη .tableβασική κλάση.

`.table-striped`

Προσθέτει ζέβρα σε οποιαδήποτε σειρά πίνακα εντός του επιλογέα <tbody>μέσω του :nth-childCSS (δεν είναι διαθέσιμο στο IE7-8).

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

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

`.table-bordered`

Προσθέστε περιθώρια και στρογγυλεμένες γωνίες στο τραπέζι.

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

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

`.table-hover`

Ενεργοποίηση κατάστασης αιώρησης σε σειρές πίνακα εντός ενός <tbody>.

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

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

`.table-condensed`

Κάνει τα τραπέζια πιο συμπαγή κόβοντας το γέμισμα κελιών στη μέση.

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

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

Προαιρετικές τάξεις σειρών

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

Τάξη	Περιγραφή
`.success`	Υποδεικνύει μια επιτυχημένη ή θετική ενέργεια.
`.error`	Υποδεικνύει μια επικίνδυνη ή δυνητικά αρνητική ενέργεια.
`.warning`	Υποδεικνύει μια προειδοποίηση που μπορεί να χρειάζεται προσοχή.
`.info`	Χρησιμοποιείται ως εναλλακτική λύση στα προεπιλεγμένα στυλ.

#	Προϊόν	Η πληρωμή λήφθηκε	Κατάσταση
1	TB - Μηνιαία	01/04/2012	Εγκρίθηκε
2	TB - Μηνιαία	04/02/2012	Απορρίφθηκε
3	TB - Μηνιαία	04/03/2012	εκκρεμής
4	TB - Μηνιαία	04/04/2012	Καλέστε για επιβεβαίωση

...
  < tr class = "επιτυχία" >
    <td> 1 < /td>
    <td>TB - Μηνιαία</ td >
    <td> 01 / 04 / 2012 < /td>
    <td>Εγκρίθηκε</ td >
  </ tr >
...

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

Λίστα υποστηριζόμενων στοιχείων HTML πίνακα και πώς πρέπει να χρησιμοποιηθούν.

Ετικέτα	Περιγραφή
`<table>`	Στοιχείο αναδίπλωσης για την εμφάνιση δεδομένων σε μορφή πίνακα
`<thead>`	Στοιχείο κοντέινερ για σειρές κεφαλίδας πίνακα ( `<tr>`) για την επισήμανση στηλών πίνακα
`<tbody>`	Στοιχείο κοντέινερ για σειρές πίνακα ( `<tr>`) στο σώμα του πίνακα
`<tr>`	Στοιχείο κοντέινερ για ένα σύνολο κελιών πίνακα ( `<td>`ή `<th>`) που εμφανίζεται σε μία γραμμή
`<td>`	Προεπιλεγμένο κελί πίνακα
`<th>`	Ειδικό κελί πίνακα για ετικέτες στηλών (ή γραμμής, ανάλογα με το εύρος και την τοποθέτηση).
`<caption>`	Περιγραφή ή περίληψη του τι περιέχει ο πίνακας, ιδιαίτερα χρήσιμο για προγράμματα ανάγνωσης οθόνης

<πίνακας>
  <caption> ... </caption>
  <κεφάλι>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Προεπιλεγμένα στυλ

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

<φόρμα>
  <σύνολο πεδίων>
    <legend> Θρύλος </legend>
    <label> Όνομα ετικέτας </label>
    <input type = "text" placeholder = "Πληκτρολογήστε κάτι…" >  
    <span class = "help-block" > Παράδειγμα κειμένου βοήθειας σε επίπεδο μπλοκ εδώ. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Ελέγξτε με 
    </label>
    <button type = "submit" class = "btn" > Υποβολή </button>  
  </fieldset>
</form>

Προαιρετικές διατάξεις

Στο Bootstrap περιλαμβάνονται τρεις προαιρετικές διατάξεις φόρμας για περιπτώσεις κοινής χρήσης.

Φόρμα αναζήτησης

Προσθέστε .form-searchστη φόρμα και .search-queryστο <input>για μια επιπλέον στρογγυλεμένη εισαγωγή κειμένου.

<form class = "φόρμα-αναζήτηση" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Αναζήτηση </button>  
</form>

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

Προσθήκη .form-inlineγια ετικέτες με αριστερή στοίχιση και στοιχεία ελέγχου ενσωματωμένου μπλοκ για συμπαγή διάταξη.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Να με θυμάσαι 
  </label>
  <button type = "submit" class = "btn" > Είσοδος </button>  
</form>

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

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

Προσθήκη .form-horizontalστη φόρμα
Τυλίξτε ετικέτες και χειριστήρια.control-group
Προσθέστε .control-labelστην ετικέτα
Τυλίξτε όλα τα σχετικά στοιχεία ελέγχου .controlsγια σωστή ευθυγράμμιση

<form class = "form-horizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Διεύθυνση ηλεκτρονικού ταχυδρομείου </label>  
    <div class = "controls" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > Κωδικός πρόσβασης </label>  
    <div class = "controls" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Να με θυμάσαι 
      </label>
      <button type = "submit" class = "btn" > Είσοδος </button>  
    </div>
  </div>
</form>

Υποστηριζόμενα στοιχεία ελέγχου φορμών

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

Εισροές

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

Απαιτεί τη χρήση ενός καθορισμένου typeανά πάσα στιγμή.

<input type = "text" placeholder = "Text input" >

Textarea

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

<textarea rows = "3" ></textarea>

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

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

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

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  Η πρώτη επιλογή είναι αυτό και αυτό - φροντίστε να συμπεριλάβετε γιατί είναι υπέροχο
</label>
 
<label class = "ραδιόφωνο" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" επιλεγμένο >     
  Η πρώτη επιλογή είναι αυτό και αυτό - φροντίστε να συμπεριλάβετε γιατί είναι υπέροχο
</label>
<label class = "ραδιόφωνο" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Η επιλογή δύο μπορεί να είναι κάτι άλλο και η επιλογή της θα καταργήσει την επιλογή πρώτη
</label>

Ενσωματωμένα πλαίσια ελέγχου

Προσθέστε την .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>

Επιλέγει

Χρησιμοποιήστε την προεπιλεγμένη επιλογή ή καθορίστε a multiple="multiple"για να εμφανίζονται πολλές επιλογές ταυτόχρονα.

<επιλογή>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<επιλογή πολλαπλών = "πολλαπλά" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

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

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

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

Προσθέστε κείμενο ή κουμπιά πριν ή μετά από οποιαδήποτε εισαγωγή βάσει κειμένου. Λάβετε υπόψη ότι selectτα στοιχεία δεν υποστηρίζονται εδώ.

Προεπιλογές

Τυλίξτε an .add-onκαι an inputμε μία από τις δύο κλάσεις για να προσαρτήσετε ή να προσαρτήσετε κείμενο σε μια είσοδο.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Σε συνδυασμό

Χρησιμοποιήστε και τις δύο κλάσεις και δύο περιπτώσεις για .add-onνα προσαρτήσετε και να προσαρτήσετε μια είσοδο.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Κουμπιά αντί για κείμενο

Αντί για ένα <span>με κείμενο, χρησιμοποιήστε το a .btnγια να επισυνάψετε ένα κουμπί (ή δύο) σε μια είσοδο.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > Πήγαινε! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Αναζήτηση </button>  
  <button class = "btn" type = "button" > Επιλογές </button>  
</div>

Αναπτυσσόμενα κουμπιά

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Δράση
      <span class = "caret" ></span> 
    </button>
    <ul class = "αναπτυσσόμενο μενού" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Δράση
      <span class = "caret" ></span> 
    </button>
    <ul class = "αναπτυσσόμενο μενού" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Δράση
      <span class = "caret" ></span> 
    </button>
    <ul class = "αναπτυσσόμενο μενού" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Δράση
      <span class = "caret" ></span> 
    </button>
    <ul class = "αναπτυσσόμενο μενού" > 
      ...
    </ul>
  </div>
</div>

Τμηματοποιημένες αναπτυσσόμενες ομάδες

<φόρμα>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < τύπος εισαγωγής = "κείμενο" > 
  </div>
  <div class = "input-append" > 
    < τύπος εισαγωγής = "κείμενο" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Φόρμα αναζήτησης

<form class = "φόρμα-αναζήτηση" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Αναζήτηση </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Αναζήτηση </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

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

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

Είσοδοι επιπέδου μπλοκ

Κάντε οποιοδήποτε στοιχείο <input>ή <textarea>στοιχείο να συμπεριφέρεται σαν στοιχείο επιπέδου μπλοκ.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Σχετικό μέγεθος

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Ψηλά το κεφάλι!Σε μελλοντικές εκδόσεις, θα αλλάξουμε τη χρήση αυτών των σχετικών κατηγοριών εισόδου για να ταιριάζει με τα μεγέθη των κουμπιών μας. Για παράδειγμα, .input-largeθα αυξήσει το padding και το μέγεθος γραμματοσειράς μιας εισόδου.

Διαστάσεις πλέγματος

Χρησιμοποιήστε .span1το to .span12για εισόδους που αντιστοιχούν στα ίδια μεγέθη των στηλών πλέγματος.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Για πολλαπλές εισόδους πλέγματος ανά γραμμή, χρησιμοποιήστε την .controls-rowκλάση τροποποιητή για σωστή απόσταση . Επιπλέει τις εισόδους για να συμπτύξει το λευκό διάστημα, ορίζει τα κατάλληλα περιθώρια και διαγράφει το float.

<div class = "controls" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Μη επεξεργάσιμες εισροές

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

<span class = "input-xlarge uneditable-input" > Κάποια τιμή εδώ </span>

Σχηματίστε ενέργειες

Τερματίστε μια φόρμα με μια ομάδα ενεργειών (κουμπιά). Όταν τοποθετηθούν μέσα σε ένα .form-actions, τα κουμπιά θα εμφανίζονται αυτόματα σε εσοχή για να ευθυγραμμιστούν με τα στοιχεία ελέγχου της φόρμας.

<div class = "φόρμα-δράσεις" > 
  <button type = "submit" class = "btn btn-primary" > Αποθήκευση αλλαγών </button>  
  <button type = "button" class = "btn" > Ακύρωση </button>  
</div>

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

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

Ενσωματωμένη βοήθεια

<input type = "text" ><span class = "help-inline" > Ενσωματωμένο κείμενο βοήθειας </span>

Αποκλεισμός βοήθειας

<input type = "text" ><span class = "help-block" > Ένα μεγαλύτερο μπλοκ κειμένου βοήθειας που σπάει σε μια νέα γραμμή και μπορεί να εκτείνεται πέρα από μία γραμμή. </span>

Καταστάσεις ελέγχου φόρμας

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

Εστίαση εισόδου

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

<input class = "input-xlarge" id = "focusedInput" type = "text" value = "Αυτό είναι εστιασμένο..." >

Μη έγκυρες εισροές

Προσαρμόστε τις εισαγωγές στυλ μέσω της προεπιλεγμένης λειτουργικότητας του προγράμματος περιήγησης με :invalid. Καθορίστε ένα type, προσθέστε το requiredχαρακτηριστικό εάν το πεδίο δεν είναι προαιρετικό και (αν ισχύει) καθορίστε ένα pattern.

Αυτό δεν είναι διαθέσιμο στις εκδόσεις του Internet Explorer 7-9 λόγω έλλειψης υποστήριξης για ψευδοεπιλογείς CSS.

<input class = "span3" type = "email" απαιτείται >

Απενεργοποιημένες είσοδοι

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

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Απενεργοποιημένη εισαγωγή εδώ..." απενεργοποιημένη >

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

Το Bootstrap περιλαμβάνει στυλ επικύρωσης για μηνύματα σφάλματος, προειδοποίησης, πληροφοριών και επιτυχίας. Για χρήση, προσθέστε την κατάλληλη κλάση στο περιβάλλον .control-group.

<div class = "προειδοποίηση ομάδας ελέγχου" > 
  <label class = "control-label" for = "inputWarning" > Εισαγωγή με προειδοποίηση </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Κάτι μπορεί να πήγε στραβά </span> 
  </div>
</div>
 
<div class = "σφάλμα ομάδας ελέγχου" > 
  <label class = "control-label" for = "inputError" > Εισαγωγή με σφάλμα </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Διορθώστε το σφάλμα </span> 
  </div>
</div>
 
<div class = "πληροφορίες ομάδας ελέγχου" > 
  <label class = "control-label" for = "inputInfo" > Εισαγωγή με πληροφορίες </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Το όνομα χρήστη έχει ήδη ληφθεί </span> 
  </div>
</div>
 
<div class = "επιτυχία ομάδας ελέγχου" > 
  <label class = "control-label" for = "inputSuccess" > Εισαγωγή με επιτυχία </label>  
  <div class = "controls" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Woohoo! </span> 
  </div>
</div>

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

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

Κουμπί	class=""	Περιγραφή
	`btn`	Τυπικό γκρι κουμπί με ντεγκραντέ
	`btn btn-primary`	Παρέχει επιπλέον οπτικό βάρος και προσδιορίζει την κύρια ενέργεια σε ένα σύνολο κουμπιών
	`btn btn-info`	Χρησιμοποιείται ως εναλλακτική λύση στα προεπιλεγμένα στυλ
	`btn btn-success`	Υποδεικνύει μια επιτυχημένη ή θετική ενέργεια
	`btn btn-warning`	Υποδεικνύει ότι πρέπει να δίνεται προσοχή με αυτήν την ενέργεια
	`btn btn-danger`	Υποδεικνύει μια επικίνδυνη ή δυνητικά αρνητική ενέργεια
	`btn btn-inverse`	Εναλλακτικό σκούρο γκρι κουμπί, που δεν συνδέεται με σημασιολογική ενέργεια ή χρήση
	`btn btn-link`	Δώστε έμφαση σε ένα κουμπί κάνοντάς το να μοιάζει με σύνδεσμο, διατηρώντας παράλληλα τη συμπεριφορά του κουμπιού

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

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

Μεγέθη κουμπιών

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

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Μεγάλο κουμπί </button>  
  <button class = "btn btn-large" type = "button" > Μεγάλο κουμπί </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Προεπιλεγμένο κουμπί </button>  
  <button class = "btn" type = "button" > Προεπιλεγμένο κουμπί </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Μικρό κουμπί </button>  
  <button class = "btn btn-small" type = "button" > Μικρό κουμπί </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Κουμπί μίνι </button>  
  <button class = "btn btn-mini" type = "button" > Κουμπί μίνι </button>  
</p>

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

<button class = "btn btn-large btn-block btn-primary" type = "button" > Κουμπί επιπέδου μπλοκ </button>  
<button class = "btn btn-large btn-block" type = "button" > Κουμπί επιπέδου αποκλεισμού </button>

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

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

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

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

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

<a href = "#" class = "btn btn-large btn-primary disabled" > Κύριος σύνδεσμος </a>  
<a href = "#" class = "btn btn-large disabled" > Σύνδεσμος </a>

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

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

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

<button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Κύριο κουμπί </button>   
<button type = "button" class = "btn btn-large" απενεργοποιημένο > Κουμπί </button>

Μία τάξη, πολλές ετικέτες

Χρησιμοποιήστε την .btnκλάση σε ένα στοιχείο <a>, <button>, ή <input>.

<a class = "btn" href = "" > Σύνδεσμος </a>  
<button class = "btn" type = "submit" > Κουμπί </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Submit" >

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

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

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Ψηλά το κεφάλι! .img-roundedκαι .img-circleδεν λειτουργούν στον IE7-8 λόγω έλλειψης border-radiusυποστήριξης.

Γλυφικά εικονιδίων

140 εικονίδια σε μορφή sprite, διαθέσιμα σε σκούρο γκρι (προεπιλογή) και λευκό, παρέχονται από την Glyphicons .

εικονίδιο-γυαλί
εικονίδιο-μουσική
εικονίδιο-αναζήτηση
εικονίδιο-φάκελος
εικονίδιο-καρδιά
εικονίδιο-αστέρι
εικονίδιο-αστέρι-άδειο
εικονίδιο χρήστη
εικονίδιο-ταινία
εικονίδιο-μεγάλο
εικονίδιο-ου
εικονίδιο-η-λίστα
εικονίδιο-οκ
εικονίδιο-αφαίρεση
εικονίδιο μεγέθυνσης
εικονίδιο-σμίκρυνση
εικονίδιο απενεργοποίηση
εικονίδιο-σήμα
εικονίδιο-γρανάζι
εικονίδιο-σκουπίδια
εικονίδιο-σπίτι
εικονίδιο-αρχείο
εικονίδιο-χρόνος
εικονίδιο-δρόμος
εικονίδιο-λήψη-αλτ
εικονίδιο λήψης
εικονίδιο-φόρτωση
εικονίδιο-εισερχόμενα
εικονίδιο-παιχνίδι-κύκλος
εικονίδιο-επανάληψη
εικονίδιο-ανανέωση
εικονίδιο-λίστα-αλτ
εικονίδιο-κλείδωμα
εικονίδιο-σημαία
εικονίδιο-ακουστικά
εικονίδιο-όγκος-απενεργοποίηση
εικονίδιο-μείωση όγκου
εικονίδιο αύξησης όγκου
εικονίδιο-qrcode
εικονίδιο-γραμμωτός κώδικας
εικονίδιο-ετικέτα
εικονίδια-ετικέτες
εικονίδιο-βιβλίο
εικονίδιο-σελιδοδείκτη
εικονίδιο-εκτύπωση
εικονίδιο-κάμερα
εικονίδιο-γραμματοσειρά
εικονίδιο-έντονη
εικονίδιο-πλάγιο
εικονίδιο-κείμενο-ύψος
εικονίδιο-κείμενο-πλάτος
εικονίδιο-στοίχιση-αριστερά
εικονίδιο-ευθυγράμμιση-κέντρο
εικονίδιο-στοίχιση-δεξιά
εικονίδιο-ευθυγράμμιση-δικαιολογώ
λίστα εικονιδίων
εικονίδιο-εσοχή-αριστερά
εικονίδιο-εσοχή-δεξιά
εικονίδιο-facetime-βίντεο
εικόνα-εικόνα
εικονίδιο-μολύβι
εικονίδιο-χάρτης-δείκτης
εικονίδιο-προσαρμογή
εικονίδιο-απόχρωση
εικονίδιο-επεξεργασία
εικονίδιο-κοινή χρήση
εικονίδιο-έλεγχος
εικονίδιο-μετακίνηση
εικονίδιο-βήμα-πίσω
εικονίδιο-γρήγορη-προς τα πίσω
εικονίδιο προς τα πίσω
εικονίδιο-παιχνίδι
εικονίδιο-παύση
εικονίδιο-στάση
εικονίδιο προς τα εμπρός
εικονίδιο-γρήγορη προώθηση
εικονίδιο-βήμα-προς τα εμπρός
εικονίδιο-εξαγωγή
εικονίδιο-σεβρόν-αριστερά
εικονίδιο-σεβρόν-δεξιά
εικονίδιο-συν-σύμβολο
εικονίδιο-πλην-σημάδι
εικονίδιο-αφαίρεση-σημάδι
εικονίδιο-ok-sign
εικονίδιο-ερώτηση-σημάδι
εικονίδιο-πληροφορία-σημάδι
εικονίδιο-στιγμιότυπο οθόνης
εικονίδιο-αφαίρεση-κύκλος
εικονίδιο-οκ-κύκλος
εικονίδιο-απαγόρευση-κύκλος
εικονίδιο-βέλος-αριστερά
εικονίδιο-βέλος-δεξιά
εικονίδιο-βέλος-επάνω
εικονίδιο-βέλος-κάτω
εικονίδιο-κοινή χρήση-αλτ
εικονίδιο-αλλαγή μεγέθους-γεμάτο
εικονίδιο-μεταβολή μεγέθους-μικρό
εικονίδιο-συν
εικονίδιο-πλην
εικονίδιο-αστερίσκος
εικονίδιο-θαυμαστικό-σημάδι
εικονίδιο-δώρο
εικονίδιο-φύλλο
εικονίδιο-φωτιά
εικονίδιο με τα μάτια ανοιχτά
εικονίδιο-μάτι-κλείσιμο
εικονίδιο-προειδοποιητικό σημάδι
εικονίδιο-αεροπλάνο
εικονίδιο-ημερολόγιο
εικονίδιο-τυχαίο
εικονίδιο-σχόλιο
εικονίδιο-μαγνήτης
εικονίδιο-chevron-up
εικονίδιο-κάτω
εικονίδιο-retweet
εικονίδιο-καλάθι αγορών
εικονίδιο-φάκελος-κλείσιμο
εικονίδιο-φάκελος-άνοιγμα
εικονίδιο-αλλαγή μεγέθους-κάθετο
εικονίδιο-αλλαγή μεγέθους-οριζόντια
εικονίδιο-hdd
εικονίδιο-bullhorn
εικονίδιο-καμπάνα
εικονίδιο-πιστοποιητικό
εικονίδιο-αντίχειρες-επάνω
εικονίδιο-αντίχειρες-κάτω
εικονίδιο-χέρι-δεξιά
εικονίδιο-χέρι-αριστερά
εικονίδιο-χέρι προς τα πάνω
εικονίδιο-κάτω
εικονίδιο-κύκλος-βέλος-δεξιά
εικονίδιο-κύκλος-βέλος-αριστερά
εικονίδιο-κύκλος-βέλος-επάνω
εικονίδιο-κύκλος-βέλος-κάτω
εικονίδιο-σφαίρα
εικονίδιο κλειδί
εικονίδιο-εργασίες
εικονίδιο-φίλτρο
εικονίδιο-χαρτοφύλακας
εικονίδιο σε πλήρη οθόνη

Γλυφικά απόδοση

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

Τρόπος χρήσης

Όλα τα εικονίδια απαιτούν μια <i>ετικέτα με μια μοναδική κλάση, με πρόθεμα icon-. Για χρήση, τοποθετήστε τον ακόλουθο κώδικα σχεδόν οπουδήποτε:

<i class = "icon-search" ></i>

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

<i class = "icon-search icon-white" ></i>

Ψηλά το κεφάλι!Όταν χρησιμοποιείτε δίπλα σε συμβολοσειρές κειμένου, όπως στα κουμπιά ή στους συνδέσμους πλοήγησης, φροντίστε να αφήσετε ένα κενό διάστημα μετά την <i>ετικέτα για σωστή απόσταση.

Παραδείγματα εικονιδίων

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

Κουμπιά

Ομάδα κουμπιών σε μια γραμμή εργαλείων κουμπιών

<div class = "btn-γραμμή εργαλείων" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
    <a class = "btn" href = "#" ><i class = "icon-align-justify" </i></a>   
  </div>
</div>

Αναπτυσσόμενο μενού σε μια ομάδα κουμπιών

Χρήστης

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Χρήστης </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  <ul class = "αναπτυσσόμενο μενού" > 
    <li><a href = "#" ><i class = "icon-pencil" ></i> Επεξεργασία </a></li>  
    <li><a href = "#" ><i class = "icon-trash" ></i> Διαγραφή </a></li>  
    <li><a href = "#" ><i class = "icon-ban-circle" ></i> Απαγόρευση </a></li>  
    <li class = "διαιρέτης" ></li> 
    <li><a href = "#" ><i class = "i" ></i> Ορισμός διαχειριστή </a></li>  
  </ul>
</div>

Μεγέθη κουμπιών

Αστέρι Αστέρι Αστέρι

<a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> αστέρι </a>   
<a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> αστέρι </a>   
<a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> αστέρι </a>

Πλοήγηση

<ul class = "nav nav-list" > 
  <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" ></i> Αρχική σελίδα </a></li>   
  <li><a href = "#" ><i class = "icon-book" ></i> Βιβλιοθήκη </a></li>  
  <li><a href = "#" ><i class = "icon-pencil" ></i> Εφαρμογές </a></li>  
  <li><a href = "#" ><i class = "i" ></i> Διάφορα </a></li>  
</ul>

Πεδία φόρμας

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > Διεύθυνση ηλεκτρονικού ταχυδρομείου </label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
      <span class = "add-on" ><i class = "icon-envelope" ></i></span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Τυπογραφία

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

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

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

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

h4. Κεφάλαιο 4

h5. Κεφάλαιο 5

h6. Κεφάλαιο 6

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

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

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

Εμφαση

<small>

Τολμηρός

Πλάγια γραφή

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

Μαθήματα έμφασης

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

<abbr>

<abbr class="initialism">

Διευθύνσεις

<address>

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

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

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

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

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

Τόπος αγώνων

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

Διέταξε

Αστυλ

Στη γραμμή

Περιγραφή

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

Κώδικας

Στη γραμμή

Βασικό μπλοκ

Πίνακες

Προεπιλεγμένα στυλ

Προαιρετικά μαθήματα

.table-striped

.table-bordered

.table-hover

.table-condensed

Προαιρετικές τάξεις σειρών

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

Έντυπα

Προεπιλεγμένα στυλ

Προαιρετικές διατάξεις

Φόρμα αναζήτησης

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

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

Υποστηριζόμενα στοιχεία ελέγχου φορμών

Εισροές

Textarea

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

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

Ενσωματωμένα πλαίσια ελέγχου

Επιλέγει

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

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

Προεπιλογές

Σε συνδυασμό

Κουμπιά αντί για κείμενο

Αναπτυσσόμενα κουμπιά

Τμηματοποιημένες αναπτυσσόμενες ομάδες

Φόρμα αναζήτησης

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

Είσοδοι επιπέδου μπλοκ

Σχετικό μέγεθος

Διαστάσεις πλέγματος

Μη επεξεργάσιμες εισροές

Σχηματίστε ενέργειες

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

Ενσωματωμένη βοήθεια

Αποκλεισμός βοήθειας

Καταστάσεις ελέγχου φόρμας

Εστίαση εισόδου

Μη έγκυρες εισροές

Απενεργοποιημένες είσοδοι

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`