Τυπογραφική κλίμακα

Ολόκληρο το τυπογραφικό πλέγμα βασίζεται σε δύο μεταβλητές Less στο αρχείο μας variables.less: @baseFontSizeκαι @baseLineHeight. Το πρώτο είναι το βασικό μέγεθος γραμματοσειράς που χρησιμοποιείται παντού και το δεύτερο είναι το ύψος γραμμής βάσης.

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

Παράδειγμα κειμένου σώματος

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.

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

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

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

Χρησιμοποιώντας έμφαση

Fusce dapibus , telus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, μια pharetra augue.

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

Παραδείγματα διευθύνσεων

Ακολουθούν δύο παραδείγματα για το πώς <address>μπορεί να χρησιμοποιηθεί η ετικέτα:

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

Ονοματεπώνυμο
[email protected]

Παραδείγματα συντομογραφιών

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

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

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

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

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

Συμπεριλάβετε ένα προαιρετικό <small>στοιχείο για να αναφέρετε την πηγή σας και θα λάβετε μια παύλα —πριν από αυτό για λόγους στυλ.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ακέραιος posuere erat a ante venenatis. </p>
  <small> Κάποιος διάσημος </small>
</blockquote>

Τα προεπιλεγμένα μπλοκ εισαγωγικά διαμορφώνονται ως εξής:

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

Κάποιος διάσημος στο Body of work

Για να μετακινήσετε το μπλοκ σας στα δεξιά, προσθέστε class="pull-right":

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

Κάποιος διάσημος στο Body of work

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

<ul>

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

• 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

Διέταξε

<ol>

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

Περιγραφή

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

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

<dl class="dl-horizontal">

Λίστες περιγραφής

Μια λίστα περιγραφής είναι ιδανική για τον καθορισμό όρων.

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.

---

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

Στη γραμμή

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

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

Βασικό μπλοκ

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

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

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

Σημείωση: Βεβαιωθείτε ότι διατηρείτε τον κώδικα εντός των <pre>ετικετών όσο το δυνατόν πιο κοντά στα αριστερά. θα αποδώσει όλες τις καρτέλες.

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

Google Prettify

Πάρτε το ίδιο <pre>στοιχείο και προσθέστε δύο προαιρετικές κλάσεις για βελτιωμένη απόδοση.

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

<pre class = "prettyprint 
     λινά» >
  <p>Δείγμα κειμένου εδώ...</p>
</pre>

Κατεβάστε το google-code-prettify και δείτε το readme για τον τρόπο χρήσης.

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

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

Οι πίνακες διαμορφώνονται αυτόματα με λίγα μόνο περιγράμματα για να διασφαλιστεί η αναγνωσιμότητα και η διατήρηση της δομής. Με το 2.0 .tableαπαιτείται η κλάση.

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

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

Διασκεδάστε λίγο με τα τραπέζια σας προσθέτοντας ζέβρα-απλώς προσθέστε την .table-stripedτάξη.

Σημείωση: Οι ριγέ πίνακες χρησιμοποιούν τον :nth-childεπιλογέα CSS και δεν είναι διαθέσιμος στο IE7-IE8.

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

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

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

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

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

Κάντε τα τραπέζια σας πιο συμπαγή προσθέτοντας την .table-condensedκλάση για να κόψετε τα κελιά του πίνακα στη μέση (από 8 εικονοστοιχεία σε 4 εικονοστοιχεία).

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

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

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

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

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

Ευέλικτο HTML και CSS

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

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

Περιλαμβάνονται τέσσερις διατάξεις

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

• Κάθετη (προεπιλογή)
• Αναζήτηση
• Στη γραμμή
• Οριζόντιος

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

Έλεγχος καταστάσεων και πολλά άλλα

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

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

Βασική μορφή

Έξυπνες και ελαφριές προεπιλογές χωρίς επιπλέον σήμανση.

Όνομα ετικέτας

Παράδειγμα κειμένου βοήθειας σε επίπεδο μπλοκ εδώ.

Ελέγξτε με υποβάλλουν

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

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

Προσθέστε .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 = "well 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>

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

• εισαγωγή κειμένου (κείμενο, κωδικός πρόσβασης, email, κ.λπ.)
• πλαίσιο ελέγχου
• ραδιόφωνο
• επιλέγω
• πολλαπλή επιλογή
• εισαγωγή αρχείου
• textarea

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

Εκτός από το κείμενο ελεύθερης μορφής, οποιαδήποτε είσοδος που βασίζεται σε κείμενο HTML5 εμφανίζεται έτσι.

Πλαίσιο ελέγχου

Η πρώτη επιλογή είναι αυτό και αυτό - φροντίστε να συμπεριλάβετε γιατί είναι υπέροχο

Επιλέξτε λίστα

κάτι 2 3 4 5

Επιλογή πολλαπλών συνθηκών

1 2 3 4 5

Εισαγωγή αρχείου

Textarea

Αποθήκευσε τις αλλαγές Ματαίωση

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

Δεδομένου του παραπάνω παραδείγματος διάταξης φόρμας, ακολουθεί η σήμανση που σχετίζεται με την πρώτη ομάδα εισαγωγής και ελέγχου. Τα .control-group, .control-label, και .controlsοι κλάσεις είναι όλα απαραίτητα για το styling.

<form class = "form-horizontal" > 
  <σύνολο πεδίων>
    <legend> Κείμενο μύθου </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Εισαγωγή κειμένου </label>  
      <div class = "controls" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Υποστήριξη κειμένου βοήθειας </p> 
      </div>
    </div>
  </fieldset>
</form>

Το Bootstrap διαθέτει στυλ για εστίες και disabledκαταστάσεις που υποστηρίζονται από πρόγραμμα περιήγησης. Αφαιρούμε το προεπιλεγμένο Webkit outlineκαι εφαρμόζουμε ένα box-shadowστη θέση του για :focus.

---

Επικύρωση φόρμας

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

<σύνολο πεδίων
  class = "σφάλμα ομάδας ελέγχου" >
  …
</fieldset>

Εστιασμένη είσοδος

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

Κάποια αξία εδώ

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

Απενεργοποιημένο πλαίσιο ελέγχου

Αυτό είναι ένα απενεργοποιημένο πλαίσιο ελέγχου

Εισαγωγή με προειδοποίηση

Κάτι μπορεί να πήγε στραβά

Εισαγωγή με σφάλμα

Διορθώστε το σφάλμα

Εισαγωγή με επιτυχία

Ουάου!

Επιλέξτε με επιτυχία

1 2 3 4 5 Ουάου!

Αποθήκευσε τις αλλαγές Ματαίωση

Προσθήκη και προσθήκη εισόδων

Οι ομάδες εισαγωγής —με επισυναπτόμενο ή προσαρτημένο κείμενο— παρέχουν έναν εύκολο τρόπο για να δώσετε περισσότερο πλαίσιο για τις εισαγωγές σας. Καλά παραδείγματα περιλαμβάνουν το σύμβολο @ για ονόματα χρήστη Twitter ή $ για οικονομικά.

---

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

Μέχρι την έκδοση 1.4, το Bootstrap απαιτούσε επιπλέον σήμανση γύρω από τα πλαίσια ελέγχου και τα ραδιόφωνα για τη στοίβαξή τους. Τώρα, είναι απλό να επαναλάβουμε το <label class="checkbox">που τυλίγει το <input type="checkbox">.

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

---

Ενσωματωμένες φόρμες και προσάρτηση/προσάρτηση

Για να χρησιμοποιήσετε εισόδους προσάρτησης ή προσθήκης σε ενσωματωμένη μορφή, φροντίστε να τοποθετήσετε το .add-onκαι inputστην ίδια γραμμή, χωρίς κενά.

---

Κείμενο βοήθειας φόρμας

Για να προσθέσετε κείμενο βοήθειας για τις εισαγωγές της φόρμας σας, συμπεριλάβετε ενσωματωμένο κείμενο βοήθειας με <span class="help-inline">ή ένα μπλοκ κειμένου βοήθειας <p class="help-block">μετά το στοιχείο εισαγωγής.

Σχηματίστε μεγέθη πλέγματος

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

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

Εναλλακτικά μεγέθη

Μπορείτε επίσης να χρησιμοποιήσετε στατικές κλάσεις που δεν αντιστοιχίζονται στο πλέγμα, δεν προσαρμόζονται στα αποκριτικά στυλ CSS ή δεν λαμβάνουν υπόψη διαφορετικούς τύπους στοιχείων ελέγχου (π.χ. inputέναντι select).

Προτεινόμενο κείμενο

@

Ακολουθεί κάποιο κείμενο βοήθειας

Προσαρτημένο κείμενο

.00

Ακολουθεί περισσότερο κείμενο βοήθειας

Προσάρτηση και προσθήκη

$ .00

Προσθήκη με κουμπί

Πηγαίνω!

Προσάρτημα δύο κουμπιών

Αναζήτηση Επιλογές

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

1 2 3

Πλαίσια ελέγχου

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

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

Κουμπιά ραδιοφώνου

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

Αποθήκευσε τις αλλαγές Ματαίωση

Κουμπιά για ενέργειες

Κατά κανόνα, τα κουμπιά πρέπει να χρησιμοποιούνται μόνο για ενέργειες, ενώ οι υπερσύνδεσμοι πρέπει να χρησιμοποιούνται για αντικείμενα. Για παράδειγμα, η "Λήψη" θα πρέπει να είναι ένα κουμπί ενώ η "πρόσφατη δραστηριότητα" θα πρέπει να είναι ένας σύνδεσμος.

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

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

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

Πολλαπλά μεγέθη

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

Πρωταρχική δράση Δράση

Πρωταρχική δράση Δράση

Πρωταρχική δράση Δράση

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

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

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

Κύριο κουμπί Κουμπί

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

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

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

Σύνδεσμος Κουμπί

<a class = "btn" href = "" > Σύνδεσμος </a>  
<button class = "btn" type = "submit" >  
  Κουμπί
</button>
<input class = "btn" type = "button"  
         value = "Είσοδος" >
<input class = "btn" type = "submit"  
         value = "Υποβολή" >

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

• εικονίδιο-γυαλί
• εικονίδιο-μουσική
• εικονίδιο-αναζήτηση
• εικονίδιο-φάκελος
• εικονίδιο-καρδιά
• εικονίδιο-αστέρι
• εικονίδιο-αστέρι-άδειο
• εικονίδιο χρήστη
• εικονίδιο-ταινία
• εικονίδιο-μεγάλο
• εικονίδιο-ου
• εικονίδιο-η-λίστα
• εικονίδιο-οκ
• εικονίδιο-αφαίρεση
• εικονίδιο μεγέθυνσης
• εικονίδιο-σμίκρυνση
• εικονίδιο απενεργοποίηση
• εικονίδιο-σήμα
• εικονίδιο-γρανάζι
• εικονίδιο-σκουπίδια
• εικονίδιο-σπίτι
• εικονίδιο-αρχείο
• εικονίδιο-χρόνος
• εικονίδιο-δρόμος
• εικονίδιο-λήψη-αλτ
• εικονίδιο λήψης
• εικονίδιο-φόρτωση
• εικονίδιο-εισερχόμενα
• εικονίδιο-παιχνίδι-κύκλος
• εικονίδιο-επανάληψη
• εικονίδιο-ανανέωση
• εικονίδιο-λίστα-αλτ
• εικονίδιο-κλείδωμα
• εικονίδιο-σημαία
• εικονίδιο-ακουστικά

• εικονίδιο-όγκος-απενεργοποίηση
• εικονίδιο-μείωση όγκου
• εικονίδιο αύξησης όγκου
• εικονίδιο-qrcode
• εικονίδιο-γραμμωτός κώδικας
• εικονίδιο-ετικέτα
• εικονίδια-ετικέτες
• εικονίδιο-βιβλίο
• εικονίδιο-σελιδοδείκτη
• εικονίδιο-εκτύπωση
• εικονίδιο-κάμερα
• εικονίδιο-γραμματοσειρά
• εικονίδιο-έντονη
• εικονίδιο-πλάγιο
• εικονίδιο-κείμενο-ύψος
• εικονίδιο-κείμενο-πλάτος
• εικονίδιο-στοίχιση-αριστερά
• εικονίδιο-ευθυγράμμιση-κέντρο
• εικονίδιο-στοίχιση-δεξιά
• εικονίδιο-ευθυγράμμιση-δικαιολογώ
• λίστα εικονιδίων
• εικονίδιο-εσοχή-αριστερά
• εικονίδιο-εσοχή-δεξιά
• εικονίδιο-facetime-βίντεο
• εικόνα-εικόνα
• εικονίδιο-μολύβι
• εικονίδιο-χάρτης-δείκτης
• εικονίδιο-προσαρμογή
• εικονίδιο-απόχρωση
• εικονίδιο-επεξεργασία
• εικονίδιο-κοινή χρήση
• εικονίδιο-έλεγχος
• εικονίδιο-μετακίνηση
• εικονίδιο-βήμα-πίσω
• εικονίδιο-γρήγορη-προς τα πίσω

• εικονίδιο προς τα πίσω
• εικονίδιο-παιχνίδι
• εικονίδιο-παύση
• εικονίδιο-στάση
• εικονίδιο προς τα εμπρός
• εικονίδιο-γρήγορη προώθηση
• εικονίδιο-βήμα-προς τα εμπρός
• εικονίδιο-εξαγωγή
• εικονίδιο-σεβρόν-αριστερά
• εικονίδιο-σεβρόν-δεξιά
• εικονίδιο-συν-σύμβολο
• εικονίδιο-πλην-σημάδι
• εικονίδιο-αφαίρεση-σημάδι
• εικονίδιο-ok-sign
• εικονίδιο-ερώτηση-σημάδι
• εικονίδιο-πληροφορία-σημάδι
• εικονίδιο-στιγμιότυπο οθόνης
• εικονίδιο-αφαίρεση-κύκλος
• εικονίδιο-οκ-κύκλος
• εικονίδιο-απαγόρευση-κύκλος
• εικονίδιο-βέλος-αριστερά
• εικονίδιο-βέλος-δεξιά
• εικονίδιο-βέλος-επάνω
• εικονίδιο-βέλος-κάτω
• εικονίδιο-κοινή χρήση-αλτ
• εικονίδιο-αλλαγή μεγέθους-γεμάτο
• εικονίδιο-μεταβολή μεγέθους-μικρό
• εικονίδιο-συν
• εικονίδιο-πλην
• εικονίδιο-αστερίσκος
• εικονίδιο-θαυμαστικό-σημάδι
• εικονίδιο-δώρο
• εικονίδιο-φύλλο
• εικονίδιο-φωτιά
• εικονίδιο με τα μάτια ανοιχτά

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

Χτισμένο ως sprite

Αντί να κάνουμε κάθε εικονίδιο ένα επιπλέον αίτημα, τα έχουμε μεταγλωττίσει σε ένα sprite—μια δέσμη εικόνων σε ένα αρχείο που χρησιμοποιεί CSS για να τοποθετήσει τις εικόνες με background-position. Αυτή είναι η ίδια μέθοδος που χρησιμοποιούμε στο Twitter.com και μας λειτούργησε καλά.

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

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

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

Το Bootstrap χρησιμοποιεί μια <i>ετικέτα για όλα τα εικονίδια, αλλά δεν έχουν κατηγορία πεζών-κεφαλαίων — μόνο ένα κοινόχρηστο πρόθεμα. Για χρήση, τοποθετήστε τον ακόλουθο κώδικα σχεδόν οπουδήποτε:

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

Υπάρχουν επίσης διαθέσιμα στυλ για ανεστραμμένα (λευκά) εικονίδια, έτοιμα με μία επιπλέον κατηγορία:

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

Υπάρχουν 140 κατηγορίες για να διαλέξετε για τα εικονίδια σας. Απλώς προσθέστε μια <i>ετικέτα με τις σωστές κλάσεις και είστε έτοιμοι. Μπορείτε να βρείτε την πλήρη λίστα στο sprites.less ή ακριβώς εδώ σε αυτό το έγγραφο.

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

Θήκες χρήσης

Τα εικονίδια είναι υπέροχα, αλλά πού θα τα χρησιμοποιούσε κανείς; Εδώ είναι μερικές ιδέες:

• Ως γραφικά για την πλοήγησή σας στην πλαϊνή γραμμή
• Για μια πλοήγηση που βασίζεται αποκλειστικά σε εικονίδια
• Για κουμπιά που βοηθούν στη μετάδοση του νοήματος μιας ενέργειας
• Με συνδέσμους για κοινή χρήση του περιβάλλοντος στον προορισμό ενός χρήστη

Ουσιαστικά, οπουδήποτε μπορείτε να βάλετε μια <i>ετικέτα, μπορείτε να βάλετε ένα εικονίδιο.

Φρεσκάρω Ολοκλήρωση αγοράς Διαγράφω

Σχόλιο Ρυθμίσεις Περισσότερες πληροφορίες

Διεύθυνση ηλεκτρονικού ταχυδρομείου