Πάνω από τα ικριώματα, βασικά στοιχεία 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> |
Αναδιπλώνει τις συντομογραφίες και τα ακρωνύμια για να εμφανίζει την εκτεταμένη έκδοση στον δείκτη του ποντικιού | Συμπεριλάβετε προαιρετικό titleγια διευρυμένο κείμενο |
<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>μπορεί να χρησιμοποιηθεί η ετικέτα:
Οι συντομογραφίες έχουν στυλ με κεφαλαία γράμματα και ανοιχτόχρωμο διάστικτο κάτω περίγραμμα. Έχουν επίσης έναν κέρσορα βοήθειας στο δείκτη του ποντικιού, ώστε οι χρήστες να έχουν επιπλέον ένδειξη ότι κάτι θα εμφανίζεται κατά την τοποθέτηση.
Η 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>
Τυλίξτε ενσωματωμένα αποσπάσματα κώδικα με <code>.
- Για παράδειγμα , η ενότητα < code> </ code > πρέπει να είναι τυλιγμένη ως ενσωματωμένη .
Χρήση <pre>για πολλές γραμμές κώδικα. Φροντίστε να μετατρέψετε τυχόν καρετάκια στους χαρακτήρες unicode τους για σωστή απόδοση.
<p>Δείγμα κειμένου εδώ...</p>
- <προ>
- <p>Δείγμα κειμένου εδώ...</p>
- </pre>
Σημείωση: Βεβαιωθείτε ότι διατηρείτε τον κώδικα εντός των <pre>ετικετών όσο το δυνατόν πιο κοντά στα αριστερά. θα αποδώσει όλες τις καρτέλες.
Πάρτε το ίδιο <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 | Σημάδι | Οθων | CSS |
| 2 | Ιάκωβος | Θόρντον | Javascript |
| 3 | Stu | Βαθούλωμα | HTML |
Διασκεδάστε λίγο με τα τραπέζια σας προσθέτοντας ζέβρα-απλώς προσθέστε την .table-stripedτάξη.
Σημείωση: Οι πίνακες Sprited χρησιμοποιούν τον :nth-childεπιλογέα CSS και δεν είναι διαθέσιμος στο IE7-IE8.
- <table class = "table table-striped" >
- …
- </table>
| # | Ονομα | Επίθετο | Γλώσσα |
|---|---|---|---|
| 1 | Σημάδι | Οθων | CSS |
| 2 | Ιάκωβος | Θόρντον | Javascript |
| 3 | Stu | Βαθούλωμα | HTML |
Προσθέστε περιγράμματα γύρω από ολόκληρο το τραπέζι και στρογγυλεμένες γωνίες για αισθητικούς λόγους.
- <table class = "table-bordered" >
- …
- </table>
| # | Ονομα | Επίθετο | Γλώσσα |
|---|---|---|---|
| 1 | Mark Otto | CSS | |
| 2 | Ιάκωβος | Θόρντον | Javascript |
| 3 | Stu | Βαθούλωμα | |
| 3 | Brosef | Ο Στάλιν | HTML |
Κάντε τα τραπέζια σας πιο συμπαγή προσθέτοντας την .table-condensedκλάση για να κόψετε τα κελιά του πίνακα στη μέση (από 8 εικονοστοιχεία σε 4 εικονοστοιχεία).
- <table class = "table table-condensed" >
- …
- </table>
| # | Ονομα | Επίθετο | Γλώσσα |
|---|---|---|---|
| 1 | Σημάδι | Οθων | CSS |
| 2 | Ιάκωβος | Θόρντον | Javascript |
| 3 | Stu | Βαθούλωμα | HTML |
Μη διστάσετε να συνδυάσετε οποιαδήποτε από τις κατηγορίες τραπεζιών για να επιτύχετε διαφορετικές εμφανίσεις χρησιμοποιώντας οποιαδήποτε από τις διαθέσιμες κατηγορίες.
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
| # | Ονομα | Επίθετο | Γλώσσα |
|---|---|---|---|
| 1 | Σημάδι | Οθων | CSS |
| 2 | Ιάκωβος | Θόρντον | Javascript |
| 3 | Stu | Βαθούλωμα | HTML |
| 4 | Brosef | Ο Στάλιν | HTML |
Το καλύτερο μέρος για τις φόρμες στο Bootstrap είναι ότι όλες οι εισροές και τα στοιχεία ελέγχου φαίνονται υπέροχα ανεξάρτητα από το πώς τα δημιουργείτε στη σήμανση. Δεν απαιτείται περιττός HTML, αλλά παρέχουμε τα μοτίβα για όσους το χρειάζονται.
Οι πιο περίπλοκες διατάξεις συνοδεύονται από συνοπτικές και κλιμακούμενες κλάσεις για εύκολο στυλ και δέσιμο εκδηλώσεων, ώστε να είστε καλυμμένοι σε κάθε βήμα.
Το Bootstrap έρχεται με υποστήριξη για τέσσερις τύπους διατάξεων φορμών:
Διαφορετικοί τύποι διατάξεων φορμών απαιτούν ορισμένες αλλαγές για τη σήμανση, αλλά τα ίδια τα στοιχεία ελέγχου παραμένουν και συμπεριφέρονται ίδια.
Οι φόρμες του Bootstrap περιλαμβάνουν στυλ για όλα τα βασικά στοιχεία ελέγχου φόρμας, όπως εισαγωγή, περιοχή κειμένου και επιλογή που θα περιμένατε. Έρχεται όμως επίσης με μια σειρά από προσαρμοσμένα στοιχεία, όπως προσαρτημένες και προσαρτημένες εισόδους και υποστήριξη για λίστες πλαισίων ελέγχου.
Καταστάσεις όπως το σφάλμα, η προειδοποίηση και η επιτυχία περιλαμβάνονται για κάθε τύπο ελέγχου φόρμας. Περιλαμβάνονται επίσης στυλ για απενεργοποιημένα στοιχεία ελέγχου.
Το Bootstrap παρέχει απλή σήμανση και στυλ για τέσσερα στυλ κοινών φορμών ιστού.
| Ονομα | Τάξη | Περιγραφή |
|---|---|---|
| Κάθετη (προεπιλογή) | .form-vertical (δεν απαιτείται) |
Στοιβαγμένες, αριστερή στοίχιση ετικέτες πάνω από στοιχεία ελέγχου |
| Στη γραμμή | .form-inline |
Ετικέτα με αριστερή στοίχιση και χειριστήρια inline-block για συμπαγές στυλ |
| Αναζήτηση | .form-search |
Εξαιρετικά στρογγυλεμένη εισαγωγή κειμένου για μια τυπική αισθητική αναζήτησης |
| Οριζόντιος | .form-horizontal |
Τοποθετήστε ετικέτες αριστερά, δεξιά στοίχιση στην ίδια γραμμή με τα στοιχεία ελέγχου |
Με την έκδοση 2.0, έχουμε ελαφρύτερες και πιο έξυπνες προεπιλογές για στυλ φόρμας. Χωρίς επιπλέον σήμανση, απλώς στοιχεία ελέγχου φόρμας.
Αντανακλά τα προεπιλεγμένα στυλ WebKit, απλώς προσθέστε τα .form-searchγια επιπλέον στρογγυλεμένα πεδία αναζήτησης.
Οι είσοδοι είναι επίπεδο μπλοκ για εκκίνηση. Για .form-inlineκαι .form-horizontal, χρησιμοποιούμε ενσωματωμένο μπλοκ.
Στα αριστερά εμφανίζονται όλα τα προεπιλεγμένα στοιχεία ελέγχου φόρμας που υποστηρίζουμε. Ακολουθεί η λίστα με κουκκίδες:
Μέχρι την έκδοση 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">μετά το στοιχείο εισαγωγής.
:after. Στα έγγραφα, δείχνουμε ένα ανοιχτό κόκκινο χρώμα φόντου στον δείκτη του ποντικιού για να τονίσουμε το μέγεθος του εικονιδίου.
Αντί να κάνουμε κάθε εικονίδιο ένα επιπλέον αίτημα, τα έχουμε μεταγλωττίσει σε ένα sprite—μια δέσμη εικόνων σε ένα αρχείο που χρησιμοποιεί CSS για να τοποθετήσει τις εικόνες με background-position. Αυτή είναι η ίδια μέθοδος που χρησιμοποιούμε στο Twitter.com και μας λειτούργησε καλά.
Όλες οι τάξεις εικονιδίων έχουν πρόθεμα .icon-για σωστή χωροθέτηση ονομάτων και εύρος, όπως και τα άλλα στοιχεία μας. Αυτό θα βοηθήσει στην αποφυγή συγκρούσεων με άλλα εργαλεία.
Η Glyphicons μάς έχει παραχωρήσει τη χρήση του σετ Halflings στην εργαλειοθήκη ανοιχτού κώδικα, εφόσον παρέχουμε σύνδεσμο και πίστωση εδώ στα έγγραφα. Σκεφτείτε να κάνετε το ίδιο και στα έργα σας.
Με την έκδοση 2.0.0, επιλέξαμε να χρησιμοποιήσουμε μια <i>ετικέτα για όλα τα εικονίδια μας, αλλά δεν έχουν κατηγορία πεζών-κεφαλαίων — μόνο κοινό πρόθεμα. Για χρήση, τοποθετήστε τον ακόλουθο κώδικα σχεδόν οπουδήποτε:
- <i class = "icon-search" ></i>
Υπάρχουν επίσης διαθέσιμα στυλ για ανεστραμμένα (λευκά) εικονίδια, έτοιμα με μία επιπλέον κατηγορία:
- <i class = "icon-search icon-white" ></i>
Υπάρχουν 120 κατηγορίες για να διαλέξετε για τα εικονίδια σας. Απλώς προσθέστε μια <i>ετικέτα με τις σωστές κλάσεις και είστε έτοιμοι. Μπορείτε να βρείτε την πλήρη λίστα στο sprites.less ή ακριβώς εδώ σε αυτό το έγγραφο.
Τα εικονίδια είναι υπέροχα, αλλά πού θα τα χρησιμοποιούσε κανείς; Εδώ είναι μερικές ιδέες:
Ουσιαστικά, οπουδήποτε μπορείτε να βάλετε μια <i>ετικέτα, μπορείτε να βάλετε ένα εικονίδιο.
Χρησιμοποιήστε τα σε κουμπιά, ομάδες κουμπιών για εισαγωγές γραμμής εργαλείων, πλοήγησης ή προσαρτημένης φόρμας.