Πάνω από τα ικριώματα, βασικά στοιχεία HTML είναι διαμορφωμένα και βελτιωμένα με επεκτάσιμες κλάσεις για να παρέχουν μια φρέσκια, συνεπή εμφάνιση και αίσθηση.
Ολόκληρο το τυπογραφικό πλέγμα βασίζεται σε δύο μεταβλητές 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 ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
| Στοιχείο | Χρήση | Προαιρετικός |
|---|---|---|
<strong> |
Για την έμφαση σε ένα απόσπασμα κειμένου με σημαντικά | Κανένας |
<em> |
Για να τονίσετε ένα απόσπασμα κειμένου με άγχος | Κανένας |
<abbr> |
Αναδιπλώνει τις συντομογραφίες και τα ακρωνύμια για να εμφανίζει την εκτεταμένη έκδοση στον δείκτη του ποντικιού | Συμπεριλάβετε προαιρετικό .initialismτην κλάση για κεφαλαία συντομογραφίες. |
<address> |
Για στοιχεία επικοινωνίας για τον πλησιέστερο πρόγονό του ή ολόκληρο το έργο | Διατηρήστε τη μορφοποίηση τερματίζοντας όλες τις γραμμές με<br> |
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>μπορεί να χρησιμοποιηθεί η ετικέτα:
Οι συντομογραφίες με ένα titleχαρακτηριστικό έχουν ένα ελαφρύ διάστικτο κάτω περίγραμμα και έναν κέρσορα βοήθειας στον δείκτη του ποντικιού. Αυτό δίνει στους χρήστες πρόσθετη ένδειξη ότι κάτι θα εμφανίζεται στο δείκτη του ποντικιού.
Προσθέστε την initialismτάξη σε μια συντομογραφία για να αυξήσετε την τυπογραφική αρμονία δίνοντάς της ένα ελαφρώς μικρότερο μέγεθος κειμένου.
Η HTML είναι το καλύτερο πράγμα από το ψωμί σε φέτες.
Μια συντομογραφία της λέξης χαρακτηριστικό είναι attr .
| Στοιχείο | Χρήση | Προαιρετικός |
|---|---|---|
<blockquote> |
Στοιχείο σε επίπεδο μπλοκ για την παράθεση περιεχομένου από άλλη πηγή | Προσθήκη .pull-leftκαι .pull-rightκλάσεις για αιωρούμενες επιλογές |
<small> |
Προαιρετικό στοιχείο για την προσθήκη μιας αναφοράς που απευθύνεται στον χρήστη, συνήθως ένας συγγραφέας με τίτλο εργασίας | Τοποθετήστε το <cite>γύρω από τον τίτλο ή το όνομα της πηγής |
Για να συμπεριλάβετε ένα 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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Τυλίξτε ενσωματωμένα αποσπάσματα κώδικα με <code>.
- Για παράδειγμα , η ενότητα < code> </ code > πρέπει να είναι τυλιγμένη ως ενσωματωμένη .
Χρήση <pre>για πολλές γραμμές κώδικα. Φροντίστε να ξεφύγετε από τυχόν γωνίες στον κώδικα για σωστή απόδοση.
<p>Δείγμα κειμένου εδώ...</p>
- <προ>
- <p>Δείγμα κειμένου εδώ...</p>
- </pre>
Σημείωση: Βεβαιωθείτε ότι διατηρείτε τον κώδικα εντός των <pre>ετικετών όσο το δυνατόν πιο κοντά στα αριστερά. θα αποδώσει όλες τις καρτέλες.
Μπορείτε προαιρετικά να προσθέσετε την .pre-scrollableκλάση που θα ορίσει μέγιστο ύψος 350 εικονοστοιχεία και θα παρέχει μια γραμμή κύλισης άξονα y.
Πάρτε το ίδιο <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>
| Ονομα | Τάξη | Περιγραφή |
|---|---|---|
| Προκαθορισμένο | Κανένας | Χωρίς στυλ, μόνο στήλες και σειρές |
| Βασικός | .table |
Μόνο οριζόντιες γραμμές μεταξύ των σειρών |
| Με σύνορα | .table-bordered |
Στρογγυλοποιεί τις γωνίες και προσθέτει εξωτερικό περίγραμμα |
| Ζέβρα-ρίγα | .table-striped |
Προσθέτει ανοιχτό γκρι χρώμα φόντου σε μονές σειρές (1, 3, 5, κ.λπ.) |
| Συμπυκνωμένο | .table-condensed |
Κόβει την κάθετη επένδυση στη μέση, από 8px σε 4px, μέσα σε όλα tdκαι thτα στοιχεία |
Οι πίνακες διαμορφώνονται αυτόματα με λίγα μόνο περιγράμματα για να διασφαλιστεί η αναγνωσιμότητα και η διατήρηση της δομής. Με το 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 | @κελάδημα | |
Το καλύτερο μέρος για τις φόρμες στο Bootstrap είναι ότι όλες οι εισροές και τα στοιχεία ελέγχου φαίνονται υπέροχα ανεξάρτητα από το πώς τα δημιουργείτε στη σήμανση. Δεν απαιτείται περιττός HTML, αλλά παρέχουμε τα μοτίβα για όσους το χρειάζονται.
Οι πιο περίπλοκες διατάξεις συνοδεύονται από συνοπτικές και κλιμακούμενες κλάσεις για εύκολο στυλ και δέσιμο εκδηλώσεων, ώστε να είστε καλυμμένοι σε κάθε βήμα.
Το Bootstrap έρχεται με υποστήριξη για τέσσερις τύπους διατάξεων φορμών:
Διαφορετικοί τύποι διατάξεων φορμών απαιτούν ορισμένες αλλαγές για τη σήμανση, αλλά τα ίδια τα στοιχεία ελέγχου παραμένουν και συμπεριφέρονται ίδια.
Οι φόρμες του Bootstrap περιλαμβάνουν στυλ για όλα τα βασικά στοιχεία ελέγχου φόρμας, όπως εισαγωγή, περιοχή κειμένου και επιλογή που θα περιμένατε. Έρχεται όμως επίσης με μια σειρά από προσαρμοσμένα στοιχεία, όπως προσαρτημένες και προσαρτημένες εισόδους και υποστήριξη για λίστες πλαισίων ελέγχου.
Καταστάσεις όπως το σφάλμα, η προειδοποίηση και η επιτυχία περιλαμβάνονται για κάθε τύπο ελέγχου φόρμας. Περιλαμβάνονται επίσης στυλ για απενεργοποιημένα στοιχεία ελέγχου.
Το Bootstrap παρέχει απλή σήμανση και στυλ για τέσσερα στυλ κοινών φορμών ιστού.
| Ονομα | Τάξη | Περιγραφή |
|---|---|---|
| Κάθετη (προεπιλογή) | .form-vertical (δεν απαιτείται) |
Στοιβαγμένες, αριστερή στοίχιση ετικέτες πάνω από στοιχεία ελέγχου |
| Στη γραμμή | .form-inline |
Ετικέτα με αριστερή στοίχιση και χειριστήρια inline-block για συμπαγές στυλ |
| Αναζήτηση | .form-search |
Εξαιρετικά στρογγυλεμένη εισαγωγή κειμένου για μια τυπική αισθητική αναζήτησης |
| Οριζόντιος | .form-horizontal |
Τοποθετήστε ετικέτες αριστερά, δεξιά στοίχιση στην ίδια γραμμή με τα στοιχεία ελέγχου |
Με την έκδοση 2.0, έχουμε ελαφρύτερες και πιο έξυπνες προεπιλογές για στυλ φόρμας. Χωρίς επιπλέον σήμανση, απλώς στοιχεία ελέγχου φόρμας.
- <form class = "καλά" >
- <label> Όνομα ετικέτας </label>
- <input type = "text" class = "span3" placeholder = "Πληκτρολογήστε κάτι…" >
- <span class = "help-inline" > Σχετικό κείμενο βοήθειας! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > Ελέγξτε με
- </label>
- <button type = "submit" class = "btn" > Υποβολή </button>
- </form>
Αντανακλά τα προεπιλεγμένα στυλ WebKit, απλώς προσθέστε τα .form-searchγια επιπλέον στρογγυλεμένα πεδία αναζήτησης.
- <form class = "καλά φόρμα-αναζήτηση" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > Αναζήτηση </button>
- </form>
Οι είσοδοι είναι επίπεδο μπλοκ για εκκίνηση. Για .form-inlineκαι .form-horizontal, χρησιμοποιούμε ενσωματωμένο μπλοκ.
- <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>
Δεδομένου του παραπάνω παραδείγματος διάταξης φόρμας, ακολουθεί η σήμανση που σχετίζεται με την πρώτη ομάδα εισαγωγής και ελέγχου. Τα .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>
Στα αριστερά εμφανίζονται όλα τα προεπιλεγμένα στοιχεία ελέγχου φόρμας που υποστηρίζουμε. Ακολουθεί η λίστα με κουκκίδες:
Μέχρι την έκδοση 1.4, τα προεπιλεγμένα στυλ φόρμας του Bootstrap χρησιμοποιούσαν την οριζόντια διάταξη. Με το Bootstrap 2, καταργήσαμε αυτόν τον περιορισμό για να έχουμε πιο έξυπνες, πιο επεκτάσιμες προεπιλογές για οποιαδήποτε μορφή.
Το Bootstrap διαθέτει στυλ για εστίες και disabledκαταστάσεις που υποστηρίζονται από πρόγραμμα περιήγησης. Αφαιρούμε το προεπιλεγμένο Webkit outlineκαι εφαρμόζουμε ένα box-shadowστη θέση του για :focus.
Περιλαμβάνει επίσης στυλ επικύρωσης για σφάλματα, προειδοποιήσεις και επιτυχία. Για χρήση, προσθέστε την κλάση σφάλματος στο περιβάλλον .control-group.
- <σύνολο πεδίων
- class = "σφάλμα ομάδας ελέγχου" >
- …
- </fieldset>
Οι ομάδες εισαγωγής —με επισυναπτόμενο ή προσαρτημένο κείμενο— παρέχουν έναν εύκολο τρόπο για να δώσετε περισσότερο πλαίσιο για τις εισαγωγές σας. Καλά παραδείγματα περιλαμβάνουν το σύμβολο @ για ονόματα χρήστη Twitter ή $ για οικονομικά.
Μέχρι την έκδοση 1.4, το Bootstrap απαιτούσε επιπλέον σήμανση γύρω από τα πλαίσια ελέγχου και τα ραδιόφωνα για τη στοίβαξή τους. Τώρα, είναι απλό να επαναλάβουμε το <label class="checkbox">που τυλίγει το <input type="checkbox">.
Υποστηρίζονται επίσης ενσωματωμένα πλαίσια ελέγχου και ραδιόφωνα. Απλά προσθέστε .inlineσε οποιοδήποτε .checkboxή .radioκαι τελειώσατε.
Για να χρησιμοποιήσετε εισόδους προσάρτησης ή προσθήκης σε ενσωματωμένη μορφή, φροντίστε να τοποθετήσετε το .add-onκαι inputστην ίδια γραμμή, χωρίς κενά.
Για να προσθέσετε κείμενο βοήθειας για τις εισαγωγές της φόρμας σας, συμπεριλάβετε ενσωματωμένο κείμενο βοήθειας με <span class="help-inline">ή ένα μπλοκ κειμένου βοήθειας <p class="help-block">μετά το στοιχείο εισαγωγής.
Αντί να κάνουμε κάθε εικονίδιο ένα επιπλέον αίτημα, τα έχουμε μεταγλωττίσει σε ένα sprite—μια δέσμη εικόνων σε ένα αρχείο που χρησιμοποιεί CSS για να τοποθετήσει τις εικόνες με background-position. Αυτή είναι η ίδια μέθοδος που χρησιμοποιούμε στο Twitter.com και μας λειτούργησε καλά.
Όλες οι τάξεις εικονιδίων έχουν πρόθεμα .icon-για σωστή χωροθέτηση ονομάτων και εύρος, όπως και τα άλλα στοιχεία μας. Αυτό θα βοηθήσει στην αποφυγή συγκρούσεων με άλλα εργαλεία.
Η Glyphicons μάς έχει παραχωρήσει τη χρήση του σετ Halflings στην εργαλειοθήκη ανοιχτού κώδικα, εφόσον παρέχουμε σύνδεσμο και πίστωση εδώ στα έγγραφα. Σκεφτείτε να κάνετε το ίδιο και στα έργα σας.
Το Bootstrap χρησιμοποιεί μια <i>ετικέτα για όλα τα εικονίδια, αλλά δεν έχουν κατηγορία πεζών-κεφαλαίων — μόνο ένα κοινόχρηστο πρόθεμα. Για χρήση, τοποθετήστε τον ακόλουθο κώδικα σχεδόν οπουδήποτε:
- <i class = "icon-search" ></i>
Υπάρχουν επίσης διαθέσιμα στυλ για ανεστραμμένα (λευκά) εικονίδια, έτοιμα με μία επιπλέον κατηγορία:
- <i class = "icon-search icon-white" ></i>
Υπάρχουν 120 κατηγορίες για να διαλέξετε για τα εικονίδια σας. Απλώς προσθέστε μια <i>ετικέτα με τις σωστές κλάσεις και είστε έτοιμοι. Μπορείτε να βρείτε την πλήρη λίστα στο sprites.less ή ακριβώς εδώ σε αυτό το έγγραφο.
Ψηλά το κεφάλι! Όταν χρησιμοποιείτε δίπλα σε συμβολοσειρές κειμένου, όπως στα κουμπιά ή στους συνδέσμους πλοήγησης, φροντίστε να αφήσετε ένα κενό διάστημα μετά την <i>ετικέτα για σωστή απόσταση.
Τα εικονίδια είναι υπέροχα, αλλά πού θα τα χρησιμοποιούσε κανείς; Εδώ είναι μερικές ιδέες:
Ουσιαστικά, οπουδήποτε μπορείτε να βάλετε μια <i>ετικέτα, μπορείτε να βάλετε ένα εικονίδιο.
Χρησιμοποιήστε τα σε κουμπιά, ομάδες κουμπιών για εισαγωγές γραμμής εργαλείων, πλοήγησης ή προσαρτημένης φόρμας.