Ξεκινώντας
Μια επισκόπηση του Bootstrap, πώς να κατεβάσετε και να χρησιμοποιήσετε, βασικά πρότυπα και παραδείγματα και πολλά άλλα.
Μια επισκόπηση του Bootstrap, πώς να κατεβάσετε και να χρησιμοποιήσετε, βασικά πρότυπα και παραδείγματα και πολλά άλλα.
Το Bootstrap (προς το παρόν έκδοση 3.4.1) έχει μερικούς εύκολους τρόπους για να ξεκινήσετε γρήγορα, ο καθένας από τους οποίους απευθύνεται σε διαφορετικό επίπεδο δεξιοτήτων και περίπτωση χρήσης. Διαβάστε αναλυτικά για να δείτε τι ταιριάζει στις ιδιαίτερες ανάγκες σας.
Μεταγλώττιση και ελαχιστοποίηση CSS, JavaScript και γραμματοσειρών. Δεν περιλαμβάνονται έγγραφα ή πρωτότυπα αρχεία πηγής.
Πηγή Less, JavaScript και αρχεία γραμματοσειρών, μαζί με τα έγγραφά μας. Απαιτεί λιγότερο μεταγλωττιστή και κάποιες ρυθμίσεις.
Το Bootstrap μεταφέρθηκε από το Less στο Sass για εύκολη συμπερίληψη σε έργα μόνο Rails, Compass ή Sass.
Οι άνθρωποι στο jsDelivr παρέχουν ευγενικά υποστήριξη CDN για το CSS και το JavaScript του Bootstrap. Απλώς χρησιμοποιήστε αυτούς τους συνδέσμους jsDelivr .
Μπορείτε επίσης να εγκαταστήσετε και να διαχειριστείτε τα Less, CSS, JavaScript και γραμματοσειρές του Bootstrap χρησιμοποιώντας το Bower :
Μπορείτε επίσης να εγκαταστήσετε το Bootstrap χρησιμοποιώντας το npm :
require('bootstrap')
θα φορτώσει όλα τα πρόσθετα jQuery του Bootstrap στο αντικείμενο jQuery. Η bootstrap
ίδια η μονάδα δεν εξάγει τίποτα. Μπορείτε να φορτώσετε μη αυτόματα τα πρόσθετα jQuery του Bootstrap μεμονωμένα, φορτώνοντας τα /js/*.js
αρχεία στον κατάλογο ανώτατου επιπέδου του πακέτου.
Το Bootstrap package.json
περιέχει ορισμένα πρόσθετα μεταδεδομένα κάτω από τα ακόλουθα κλειδιά:
less
- διαδρομή προς το κύριο αρχείο πηγής Less του Bootstrapstyle
- διαδρομή προς το μη ελαχιστοποιημένο CSS του Bootstrap που έχει προμεταγλωττιστεί χρησιμοποιώντας τις προεπιλεγμένες ρυθμίσεις (χωρίς προσαρμογή)Μπορείτε επίσης να εγκαταστήσετε και να διαχειριστείτε Less, CSS, JavaScript και γραμματοσειρές του Bootstrap χρησιμοποιώντας το Composer :
Το Bootstrap χρησιμοποιεί το Autoprefixer για να αντιμετωπίσει τα προθέματα προμηθευτή CSS . Εάν μεταγλωττίζετε το Bootstrap από την πηγή Less/Sass και δεν χρησιμοποιείτε το Gruntfile μας, θα πρέπει να ενσωματώσετε μόνοι σας το Autoprefixer στη διαδικασία κατασκευής σας. Εάν χρησιμοποιείτε προμεταγλωττισμένο Bootstrap ή χρησιμοποιείτε το Gruntfile μας, δεν χρειάζεται να ανησυχείτε για αυτό επειδή το Autoprefixer είναι ήδη ενσωματωμένο στο Gruntfile μας.
Το Bootstrap μπορεί να γίνει λήψη σε δύο μορφές, μέσα στις οποίες θα βρείτε τους ακόλουθους καταλόγους και αρχεία, ομαδοποιώντας λογικά κοινούς πόρους και παρέχοντας μεταγλωττισμένες και ελαχιστοποιημένες παραλλαγές.
Λάβετε υπόψη ότι όλα τα πρόσθετα JavaScript απαιτούν τη συμπερίληψη jQuery, όπως φαίνεται στο πρότυπο εκκίνησης . Συμβουλευτείτε μαςbower.json
για να δείτε ποιες εκδόσεις του jQuery υποστηρίζονται.
Μετά τη λήψη, αποσυμπιέστε τον συμπιεσμένο φάκελο για να δείτε τη δομή του (μεταγλωττισμένου) Bootstrap. Θα δείτε κάτι σαν αυτό:
Αυτή είναι η πιο βασική μορφή του Bootstrap: προμεταγλωττισμένα αρχεία για γρήγορη χρήση σε κάθε σχεδόν έργο web. Παρέχουμε μεταγλωττισμένα CSS και JS ( bootstrap.*
), καθώς και μεταγλωττισμένα και ελαχιστοποιημένα CSS και JS ( bootstrap.min.*
). Οι χάρτες προέλευσης CSS ( bootstrap.*.map
) είναι διαθέσιμοι για χρήση με εργαλεία προγραμματιστών ορισμένων προγραμμάτων περιήγησης. Περιλαμβάνονται γραμματοσειρές από το Glyphicons, όπως και το προαιρετικό θέμα Bootstrap.
Η λήψη του πηγαίου κώδικα του Bootstrap περιλαμβάνει τα προμεταγλωττισμένα στοιχεία CSS, JavaScript και γραμματοσειράς, μαζί με το Source Less, το JavaScript και την τεκμηρίωση. Πιο συγκεκριμένα περιλαμβάνει τα ακόλουθα και άλλα:
Τα less/
, js/
, και fonts/
είναι ο πηγαίος κώδικας για τις γραμματοσειρές CSS, JS και εικονιδίων (αντίστοιχα). Ο dist/
φάκελος περιλαμβάνει όλα όσα αναφέρονται στην ενότητα προμεταγλωττισμένης λήψης παραπάνω. Ο docs/
φάκελος περιλαμβάνει τον πηγαίο κώδικα για την τεκμηρίωσή μας και examples/
τη χρήση του Bootstrap. Πέρα από αυτό, οποιοδήποτε άλλο περιλαμβανόμενο αρχείο παρέχει υποστήριξη για πακέτα, πληροφορίες άδειας χρήσης και ανάπτυξη.
Το Bootstrap χρησιμοποιεί το Grunt για το σύστημα κατασκευής του, με βολικές μεθόδους εργασίας με το πλαίσιο. Έτσι μεταγλωττίζουμε τον κώδικά μας, εκτελούμε δοκιμές και πολλά άλλα.
Για να εγκαταστήσετε το Grunt, πρέπει πρώτα να κάνετε λήψη και εγκατάσταση του node.js (το οποίο περιλαμβάνει npm). Το npm σημαίνει λειτουργικές μονάδες με πακέτο κόμβων και είναι ένας τρόπος διαχείρισης των εξαρτήσεων ανάπτυξης μέσω του node.js.
Στη συνέχεια, από τη γραμμή εντολών:grunt-cli
με npm install -g grunt-cli
./bootstrap/
κατάλογο και, στη συνέχεια, εκτελέστε το npm install
. Το npm θα εξετάσει το package.json
αρχείο και θα εγκαταστήσει αυτόματα τις απαραίτητες τοπικές εξαρτήσεις που αναφέρονται εκεί.Όταν ολοκληρωθεί, θα μπορείτε να εκτελέσετε τις διάφορες εντολές Grunt που παρέχονται από τη γραμμή εντολών.
grunt dist
(Απλώς μεταγλωττίστε CSS και JavaScript)Αναγεννά τον /dist/
κατάλογο με μεταγλωττισμένα και ελαχιστοποιημένα αρχεία CSS και JavaScript. Ως χρήστης Bootstrap, αυτή είναι συνήθως η εντολή που θέλετε.
grunt watch
(Παρακολουθώ)Παρακολουθεί τα αρχεία πηγής Less και τα μεταγλωττίζει ξανά αυτόματα σε CSS κάθε φορά που αποθηκεύετε μια αλλαγή.
grunt test
(Εκτέλεση δοκιμών)Εκτελεί το JSHint και εκτελεί τις δοκιμές QUnit σε πραγματικά προγράμματα περιήγησης χάρη στο Karma .
grunt docs
(Δημιουργία και δοκιμή των στοιχείων των εγγράφων)Δημιουργεί και δοκιμάζει CSS, JavaScript και άλλα στοιχεία που χρησιμοποιούνται κατά την τοπική εκτέλεση της τεκμηρίωσης μέσω bundle exec jekyll serve
.
grunt
(Δημιουργήστε απολύτως τα πάντα και εκτελέστε δοκιμές)Μεταγλωττίζει και ελαχιστοποιεί το CSS και το JavaScript, δημιουργεί τον ιστότοπο τεκμηρίωσης, εκτελεί το πρόγραμμα επικύρωσης HTML5 έναντι των εγγράφων, αναγεννά τα στοιχεία του Customizer και πολλά άλλα. Απαιτεί τον Τζέκιλ . Συνήθως είναι απαραίτητο μόνο εάν κάνετε hacking στο ίδιο το Bootstrap.
Εάν αντιμετωπίσετε προβλήματα με την εγκατάσταση εξαρτήσεων ή την εκτέλεση εντολών Grunt, πρώτα διαγράψτε τον /node_modules/
κατάλογο που δημιουργήθηκε από το npm. Στη συνέχεια, επανάληψη npm install
.
Ξεκινήστε με αυτό το βασικό πρότυπο HTML ή τροποποιήστε αυτά τα παραδείγματα . Ελπίζουμε ότι θα προσαρμόσετε τα πρότυπα και τα παραδείγματα μας, προσαρμόζοντάς τα στις ανάγκες σας.
Αντιγράψτε τον παρακάτω κώδικα HTML για να ξεκινήσετε να εργάζεστε με ένα ελάχιστο έγγραφο Bootstrap.
Βασιστείτε στο βασικό πρότυπο παραπάνω με τα πολλά στοιχεία του Bootstrap. Σας ενθαρρύνουμε να προσαρμόσετε και να προσαρμόσετε το Bootstrap για να ταιριάζει στις ατομικές ανάγκες του έργου σας.
Λάβετε τον πηγαίο κώδικα για κάθε παράδειγμα παρακάτω κατεβάζοντας το αποθετήριο Bootstrap . Παραδείγματα μπορείτε να βρείτε στον docs/examples/
κατάλογο.
Τίποτα εκτός από τα βασικά: μεταγλωττισμένο CSS και JavaScript μαζί με ένα κοντέινερ.
Σούπερ βασικό πρότυπο που περιλαμβάνει τη γραμμή πλοήγησης μαζί με κάποιο πρόσθετο περιεχόμενο.
Προσαρμόστε τη γραμμή πλοήγησης και το καρουζέλ και, στη συνέχεια, προσθέστε μερικά νέα στοιχεία.
Βασική δομή για έναν πίνακα εργαλείων διαχειριστή με σταθερή πλαϊνή γραμμή και γραμμή πλοήγησης.
Δημιουργήστε μια προσαρμοσμένη γραμμή πλοήγησης με αιτιολογημένους συνδέσμους. Ψηλά το κεφάλι! Όχι πολύ φιλικό προς το Safari.
Απενεργοποιήστε εύκολα την απόκριση του Bootstrap σύμφωνα με τα έγγραφά μας .
Το Bootlint είναι το επίσημο εργαλείο Bootstrap HTML linter . Ελέγχει αυτόματα για πολλά κοινά λάθη HTML σε ιστοσελίδες που χρησιμοποιούν το Bootstrap με έναν αρκετά «βανίλια» τρόπο. Τα στοιχεία/γραφικά στοιχεία του Vanilla Bootstrap απαιτούν τα μέρη του DOM να συμμορφώνονται με ορισμένες δομές. Το Bootlint ελέγχει ότι οι παρουσίες των στοιχείων Bootstrap έχουν σωστά δομημένο HTML. Σκεφτείτε να προσθέσετε το Bootlint στην αλυσίδα εργαλείων ανάπτυξης ιστού Bootstrap, έτσι ώστε κανένα από τα συνηθισμένα λάθη να μην επιβραδύνει την ανάπτυξη του έργου σας.
Μείνετε ενημερωμένοι για την ανάπτυξη του Bootstrap και απευθυνθείτε στην κοινότητα με αυτούς τους χρήσιμους πόρους.
irc.freenode.net
διακομιστή, στο κανάλι ##bootstrap .twitter-bootstrap-3
.bootstrap
σε πακέτα που τροποποιούν ή προσθέτουν στη λειτουργικότητα του Bootstrap κατά τη διανομή μέσω npm ή παρόμοιων μηχανισμών παράδοσης για μέγιστη δυνατότητα εντοπισμού.Μπορείτε επίσης να ακολουθήσετε το @getbootstrap στο Twitter για τα πιο πρόσφατα κουτσομπολιά και φοβερά μουσικά βίντεο.
Το Bootstrap προσαρμόζει αυτόματα τις σελίδες σας για διάφορα μεγέθη οθόνης. Δείτε πώς μπορείτε να απενεργοποιήσετε αυτήν τη δυνατότητα, ώστε η σελίδα σας να λειτουργεί όπως αυτό το παράδειγμα που δεν αποκρίνεται .
<meta>
που αναφέρεται στα έγγραφα CSSwidth
για .container
κάθε επίπεδο πλέγματος με ένα μόνο πλάτος, για παράδειγμα width: 970px !important;
Βεβαιωθείτε ότι αυτό έρχεται μετά το προεπιλεγμένο Bootstrap CSS. Μπορείτε προαιρετικά να αποφύγετε τα !important
ερωτήματα μέσων ή κάποιο επιλογέα-fu..col-xs-*
κλάσεις επιπλέον ή στη θέση των μεσαίων/μεγάλων. Μην ανησυχείτε, το εξαιρετικά μικρό πλέγμα συσκευών κλιμακώνεται σε όλες τις αναλύσεις.Θα εξακολουθείτε να χρειάζεστε το Respond.js για IE8 (καθώς τα ερωτήματά μας για τα μέσα εξακολουθούν να υπάρχουν και πρέπει να υποβληθούν σε επεξεργασία). Αυτό απενεργοποιεί τις πτυχές "ιστοτόπος για κινητά" του Bootstrap.
Εφαρμόσαμε αυτά τα βήματα σε ένα παράδειγμα. Διαβάστε τον πηγαίο κώδικα του για να δείτε τις συγκεκριμένες αλλαγές που εφαρμόζονται.
Θέλετε να κάνετε μετεγκατάσταση από μια παλαιότερη έκδοση του Bootstrap στο v3.x; Ρίξτε μια ματιά στον οδηγό μετανάστευσης .
Το Bootstrap έχει κατασκευαστεί για να λειτουργεί καλύτερα στα πιο πρόσφατα προγράμματα περιήγησης για επιτραπέζιους υπολογιστές και κινητά, πράγμα που σημαίνει ότι τα παλαιότερα προγράμματα περιήγησης ενδέχεται να εμφανίζουν αποδόσεις με διαφορετικό στυλ, αν και πλήρως λειτουργικές, ορισμένων στοιχείων.
Συγκεκριμένα, υποστηρίζουμε τις πιο πρόσφατες εκδόσεις των παρακάτω προγραμμάτων περιήγησης και πλατφορμών.
Τα εναλλακτικά προγράμματα περιήγησης που χρησιμοποιούν την πιο πρόσφατη έκδοση του WebKit, του Blink ή του Gecko, είτε απευθείας είτε μέσω του API προβολής ιστού της πλατφόρμας, δεν υποστηρίζονται ρητά. Ωστόσο, το Bootstrap θα πρέπει (στις περισσότερες περιπτώσεις) να εμφανίζει και να λειτουργεί σωστά και σε αυτά τα προγράμματα περιήγησης. Πιο συγκεκριμένες πληροφορίες υποστήριξης παρέχονται παρακάτω.
Σε γενικές γραμμές, το Bootstrap υποστηρίζει τις πιο πρόσφατες εκδόσεις των προεπιλεγμένων προγραμμάτων περιήγησης κάθε μεγάλης πλατφόρμας. Σημειώστε ότι τα προγράμματα περιήγησης μεσολάβησης (όπως Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) δεν υποστηρίζονται.
Χρώμιο | Firefox | Σαφάρι | |
---|---|---|---|
Android | Υποστηρίζεται | Υποστηρίζεται | N/A |
iOS | Υποστηρίζεται | Υποστηρίζεται | Υποστηρίζεται |
Ομοίως, υποστηρίζονται οι πιο πρόσφατες εκδόσεις των περισσότερων προγραμμάτων περιήγησης για επιτραπέζιους υπολογιστές.
Χρώμιο | Firefox | Internet Explorer | ΛΥΡΙΚΗ ΣΚΗΝΗ | Σαφάρι | |
---|---|---|---|---|---|
Μακ | Υποστηρίζεται | Υποστηρίζεται | N/A | Υποστηρίζεται | Υποστηρίζεται |
Windows | Υποστηρίζεται | Υποστηρίζεται | Υποστηρίζεται | Υποστηρίζεται | Δεν υποστηρίζεται |
Στα Windows, υποστηρίζουμε τον Internet Explorer 8-11 .
Για τον Firefox, εκτός από την πιο πρόσφατη κανονική σταθερή έκδοση, υποστηρίζουμε επίσης την τελευταία έκδοση Extended Support Release (ESR) του Firefox.
Ανεπίσημα, το Bootstrap θα πρέπει να φαίνεται και να συμπεριφέρεται αρκετά καλά στο Chromium και στο Chrome για Linux, στον Firefox για Linux και στον Internet Explorer 7, καθώς και στον Microsoft Edge, αν και δεν υποστηρίζονται επίσημα.
Για μια λίστα με ορισμένα από τα σφάλματα του προγράμματος περιήγησης με τα οποία πρέπει να αντιμετωπίσει το Bootstrap, ανατρέξτε στο Wall of browser bugs .
Οι Internet Explorer 8 και 9 υποστηρίζονται επίσης, ωστόσο, λάβετε υπόψη ότι ορισμένες ιδιότητες CSS3 και στοιχεία HTML5 δεν υποστηρίζονται πλήρως από αυτά τα προγράμματα περιήγησης. Επιπλέον, ο Internet Explorer 8 απαιτεί τη χρήση του Respond.js για να ενεργοποιηθεί η υποστήριξη ερωτημάτων πολυμέσων.
χαρακτηριστικό | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Δεν υποστηρίζεται | Υποστηρίζεται |
box-shadow |
Δεν υποστηρίζεται | Υποστηρίζεται |
transform |
Δεν υποστηρίζεται | Υποστηρίζεται, με -ms πρόθεμα |
transition |
Δεν υποστηρίζεται | |
placeholder |
Δεν υποστηρίζεται |
Επισκεφτείτε την ενότητα Μπορώ να χρησιμοποιήσω... για λεπτομέρειες σχετικά με την υποστήριξη του προγράμματος περιήγησης των λειτουργιών CSS3 και HTML5.
Προσέξτε τις ακόλουθες προειδοποιήσεις όταν χρησιμοποιείτε το Respond.js στα περιβάλλοντα ανάπτυξης και παραγωγής για τον Internet Explorer 8.
Η χρήση του Respond.js με CSS που φιλοξενείται σε διαφορετικό (υπο)τομέα (για παράδειγμα, σε CDN) απαιτεί κάποια πρόσθετη ρύθμιση. Δείτε τα έγγραφα Respond.js για λεπτομέρειες.
file://
Λόγω των κανόνων ασφαλείας του προγράμματος περιήγησης, το Respond.js δεν λειτουργεί με σελίδες που προβάλλονται μέσω του file://
πρωτοκόλλου (όπως όταν ανοίγετε ένα τοπικό αρχείο HTML). Για να δοκιμάσετε δυνατότητες απόκρισης στον IE8, προβάλετε τις σελίδες σας μέσω HTTP(S). Δείτε τα έγγραφα Respond.js για λεπτομέρειες.
@import
Το Respond.js δεν λειτουργεί με CSS που αναφέρεται μέσω @import
. Συγκεκριμένα, ορισμένες διαμορφώσεις Drupal είναι γνωστό ότι χρησιμοποιούν @import
. Δείτε τα έγγραφα Respond.js για λεπτομέρειες.
Το IE8 δεν υποστηρίζεται πλήρως box-sizing: border-box;
όταν συνδυάζεται με min-width
, max-width
, min-height
ή max-height
. Για αυτόν τον λόγο, από την έκδοση 3.0.1, δεν χρησιμοποιούμε πλέον max-width
στο .container
s.
Το IE8 έχει κάποια προβλήματα @font-face
όταν συνδυάζεται με :before
. Το Bootstrap χρησιμοποιεί αυτόν τον συνδυασμό με τα Glyphicons του. Εάν μια σελίδα αποθηκευτεί στην κρυφή μνήμη και φορτωθεί χωρίς το ποντίκι πάνω από το παράθυρο (π.χ. πατήστε το κουμπί ανανέωσης ή φορτώστε κάτι σε ένα iframe), τότε η σελίδα αποδίδεται πριν φορτώσει η γραμματοσειρά. Αν τοποθετήσετε το δείκτη του ποντικιού πάνω από τη σελίδα (σώμα) θα εμφανιστούν μερικά από τα εικονίδια και αν τοποθετήσετε το δείκτη του ποντικιού πάνω από τα υπόλοιπα εικονίδια θα εμφανιστούν και αυτά. Δείτε το τεύχος #13863 για λεπτομέρειες.
Το Bootstrap δεν υποστηρίζεται στις παλιές λειτουργίες συμβατότητας του Internet Explorer. Για να βεβαιωθείτε ότι χρησιμοποιείτε την πιο πρόσφατη λειτουργία απόδοσης για IE, εξετάστε το ενδεχόμενο να συμπεριλάβετε την κατάλληλη <meta>
ετικέτα στις σελίδες σας:
Επιβεβαιώστε τη λειτουργία εγγράφου ανοίγοντας τα εργαλεία εντοπισμού σφαλμάτων: πατήστε F12και ελέγξτε το "Document Mode".
Αυτή η ετικέτα περιλαμβάνεται σε όλη την τεκμηρίωση και τα παραδείγματα του Bootstrap για να διασφαλιστεί η καλύτερη δυνατή απόδοση σε κάθε υποστηριζόμενη έκδοση του Internet Explorer.
Δείτε αυτήν την ερώτηση StackOverflow για περισσότερες πληροφορίες.
Ο Internet Explorer 10 δεν διαφοροποιεί το πλάτος της συσκευής από το πλάτος της θύρας προβολής και επομένως δεν εφαρμόζει σωστά τα ερωτήματα πολυμέσων στο CSS του Bootstrap. Κανονικά, απλώς προσθέτατε ένα γρήγορο απόσπασμα CSS για να το διορθώσετε:
Ωστόσο, αυτό δεν λειτουργεί για συσκευές που εκτελούν εκδόσεις Windows Phone 8 παλαιότερες από την Ενημέρωση 3 (γνωστή και ως GDR3) , καθώς αναγκάζει αυτές τις συσκευές να εμφανίζουν κυρίως προβολή επιφάνειας εργασίας αντί για στενή προβολή "τηλεφώνου". Για να αντιμετωπίσετε αυτό το πρόβλημα, θα πρέπει να συμπεριλάβετε τα ακόλουθα CSS και JavaScript για να επιλύσετε το σφάλμα .
Για περισσότερες πληροφορίες και οδηγίες χρήσης, διαβάστε το Windows Phone 8 και το Device-Width .
Ως προκαταρκτικά, το συμπεριλαμβάνουμε σε όλη την τεκμηρίωση και τα παραδείγματα του Bootstrap ως επίδειξη.
Η μηχανή απόδοσης των εκδόσεων του Safari πριν από την έκδοση 7.1 για OS X και Safari για iOS v8.0 είχε κάποιο πρόβλημα με τον αριθμό των δεκαδικών ψηφίων που χρησιμοποιήθηκαν στις .col-*-1
κατηγορίες πλέγματος μας. Έτσι, αν είχατε 12 μεμονωμένες στήλες πλέγματος, θα παρατηρούσατε ότι ήταν σύντομες σε σύγκριση με άλλες σειρές στηλών. Εκτός από την αναβάθμιση του Safari/iOS, έχετε ορισμένες επιλογές για λύσεις:
.pull-right
το στην τελευταία στήλη πλέγματος για να λάβετε τη στοίχιση με τα δεξιάΗ υποστήριξη για overflow: hidden
το <body>
στοιχείο είναι αρκετά περιορισμένη σε iOS και Android. Για το σκοπό αυτό, όταν κάνετε κύλιση πέρα από το επάνω ή το κάτω μέρος ενός modal σε κάποιο από τα προγράμματα περιήγησης αυτών των συσκευών, το <body>
περιεχόμενο θα αρχίσει να κύλιση. Δείτε το σφάλμα Chrome #175502 (διορθώθηκε στο Chrome v40) και το σφάλμα WebKit #153852 .
Από το iOS 9.3, ενώ ένα modal είναι ανοιχτό, εάν το αρχικό άγγιγμα μιας κίνησης κύλισης βρίσκεται εντός των ορίων ενός κειμένου <input>
ή ενός <textarea>
, το <body>
περιεχόμενο κάτω από το modal θα πραγματοποιηθεί κύλιση αντί για το ίδιο το modal. Δείτε το σφάλμα WebKit #153856 .
Επίσης, σημειώστε ότι εάν χρησιμοποιείτε μια σταθερή γραμμή πλοήγησης ή χρησιμοποιείτε εισόδους σε ένα modal, το iOS έχει ένα σφάλμα απόδοσης που δεν ενημερώνει τη θέση των σταθερών στοιχείων όταν ενεργοποιείται το εικονικό πληκτρολόγιο. Μερικές λύσεις για αυτό περιλαμβάνουν τη μετατροπή των στοιχείων σας position: absolute
ή την επίκληση ενός χρονοδιακόπτη στην εστίαση για να προσπαθήσετε να διορθώσετε τη θέση με μη αυτόματο τρόπο. Αυτό δεν αντιμετωπίζεται από το Bootstrap, επομένως είναι στο χέρι σας να αποφασίσετε ποια λύση είναι η καλύτερη για την εφαρμογή σας.
Το .dropdown-backdrop
στοιχείο δεν χρησιμοποιείται στο iOS στην πλοήγηση λόγω της πολυπλοκότητας της ευρετηρίασης z. Επομένως, για να κλείσετε τα αναπτυσσόμενα μενού στις γραμμές πλοήγησης, πρέπει να κάνετε απευθείας κλικ στο αναπτυσσόμενο στοιχείο (ή σε οποιοδήποτε άλλο στοιχείο που θα ενεργοποιήσει ένα συμβάν κλικ στο iOS ).
Η μεγέθυνση σελίδας αναπόφευκτα παρουσιάζει τεχνουργήματα απόδοσης σε ορισμένα στοιχεία, τόσο στο Bootstrap όσο και στον υπόλοιπο ιστό. Ανάλογα με το πρόβλημα, ενδέχεται να είμαστε σε θέση να το διορθώσουμε (πρώτα κάντε αναζήτηση και μετά ανοίξτε ένα πρόβλημα εάν χρειάζεται). Ωστόσο, τείνουμε να τα αγνοούμε, καθώς συχνά δεν έχουν άμεση λύση εκτός από τυχαίες λύσεις.
:hover
/ :focus
σε κινητόΠαρόλο που η πραγματική αιώρηση δεν είναι δυνατή στις περισσότερες οθόνες αφής, τα περισσότερα προγράμματα περιήγησης για κινητά μιμούνται την υποστήριξη αιώρησης και κάνουν :hover
"κολλώδη". Με άλλα λόγια, :hover
τα στυλ αρχίζουν να εφαρμόζονται αφού πατήσει ένα στοιχείο και σταματούν να εφαρμόζονται μόνο αφού ο χρήστης πατήσει κάποιο άλλο στοιχείο. Αυτό μπορεί να κάνει τις καταστάσεις του Bootstrap :hover
να «κολλήσουν» ανεπιθύμητα σε τέτοια προγράμματα περιήγησης. Ορισμένα προγράμματα περιήγησης για κινητά κάνουν επίσης :focus
παρόμοια κολλώδη. Επί του παρόντος, δεν υπάρχει απλή λύση για αυτά τα ζητήματα εκτός από την πλήρη κατάργηση τέτοιων στυλ.
Ακόμη και σε ορισμένα σύγχρονα προγράμματα περιήγησης, η εκτύπωση μπορεί να είναι περίεργη.
Συγκεκριμένα, από το Chrome v32 και ανεξάρτητα από τις ρυθμίσεις περιθωρίου, το Chrome χρησιμοποιεί ένα πλάτος θύρας προβολής σημαντικά μικρότερο από το φυσικό μέγεθος χαρτιού κατά την επίλυση ερωτημάτων πολυμέσων κατά την εκτύπωση μιας ιστοσελίδας. Αυτό μπορεί να έχει ως αποτέλεσμα το εξαιρετικά μικρό πλέγμα του Bootstrap να ενεργοποιηθεί απροσδόκητα κατά την εκτύπωση. Δείτε το τεύχος #12078 και το σφάλμα Chrome #273306 για ορισμένες λεπτομέρειες. Προτεινόμενες λύσεις:
@screen-*
μεταβλητών Less έτσι ώστε το χαρτί του εκτυπωτή σας να θεωρείται μεγαλύτερο από το πολύ μικρό.Επίσης, από το Safari v8.0, τα s σταθερού πλάτους .container
μπορούν να κάνουν το Safari να χρησιμοποιεί ασυνήθιστα μικρό μέγεθος γραμματοσειράς κατά την εκτύπωση. Δείτε το #14868 και το σφάλμα WebKit #138192 για περισσότερες λεπτομέρειες. Μια πιθανή λύση για αυτό είναι η προσθήκη του ακόλουθου CSS:
Από το κουτί, το Android 4.1 (και ακόμη και μερικές νεότερες εκδόσεις προφανώς) διατίθεται με την εφαρμογή Browser ως το προεπιλεγμένο πρόγραμμα περιήγησης ιστού (σε αντίθεση με το Chrome). Δυστυχώς, η εφαρμογή Browser έχει πολλά σφάλματα και ασυνέπειες με το CSS γενικά.
Σε <select>
στοιχεία, το πρόγραμμα περιήγησης μετοχών Android δεν θα εμφανίζει τα πλαϊνά στοιχεία ελέγχου εάν υπάρχει border-radius
και/ή border
εφαρμόζεται. (Δείτε αυτήν την ερώτηση StackOverflow για λεπτομέρειες.) Χρησιμοποιήστε το παρακάτω απόσπασμα κώδικα για να καταργήσετε το προσβλητικό CSS και να το <select>
αποδώσετε ως στοιχείο χωρίς στυλ στο πρόγραμμα περιήγησης μετοχών Android. Το sniffing του παράγοντα χρήστη αποφεύγει τις παρεμβολές στα προγράμματα περιήγησης Chrome, Safari και Mozilla.
Θέλετε να δείτε ένα παράδειγμα; Δείτε αυτό το demo του JS Bin.
Προκειμένου να παρέχει την καλύτερη δυνατή εμπειρία σε παλιά προγράμματα περιήγησης με σφάλματα, το Bootstrap χρησιμοποιεί παραβιάσεις του προγράμματος περιήγησης CSS σε διάφορα σημεία για να στοχεύσει ειδικά CSS σε ορισμένες εκδόσεις του προγράμματος περιήγησης, προκειμένου να επιλύσει σφάλματα στα ίδια τα προγράμματα περιήγησης. Αυτές οι εισβολές αναγκάζουν τους υπεύθυνους επικύρωσης CSS να παραπονεθούν ότι δεν είναι έγκυρες. Σε μερικά σημεία, χρησιμοποιούμε επίσης λειτουργίες αιμορραγίας CSS που δεν είναι ακόμη πλήρως τυποποιημένες, αλλά χρησιμοποιούνται καθαρά για προοδευτική βελτίωση.
Αυτές οι προειδοποιήσεις επικύρωσης δεν έχουν καμία σημασία στην πράξη, καθώς το μη χακαρισμένο τμήμα του CSS μας επικυρώνει πλήρως και τα τυχαία τμήματα δεν παρεμβαίνουν στη σωστή λειτουργία του μη χακαρισμένου τμήματος, επομένως γιατί αγνοούμε εσκεμμένα αυτές τις συγκεκριμένες προειδοποιήσεις.
Τα έγγραφά μας HTML έχουν επίσης κάποιες ασήμαντες και ασήμαντες προειδοποιήσεις επικύρωσης HTML λόγω της συμπερίληψης μιας λύσης για ένα συγκεκριμένο σφάλμα Firefox .
Αν και δεν υποστηρίζουμε επίσημα πρόσθετα ή πρόσθετα τρίτων, προσφέρουμε μερικές χρήσιμες συμβουλές για να αποφύγετε πιθανά προβλήματα στα έργα σας.
Ορισμένα λογισμικά τρίτων, συμπεριλαμβανομένων των Χαρτών Google και της Μηχανής Προσαρμοσμένης Αναζήτησης Google, έρχονται σε διένεξη με το Bootstrap λόγω * { box-sizing: border-box; }
, ένας κανόνας που το καθιστά έτσι ώστε padding
να μην επηρεάζει το τελικό υπολογισμένο πλάτος ενός στοιχείου. Μάθετε περισσότερα σχετικά με το μοντέλο κουτιού και το μέγεθος στο CSS Tricks .
Ανάλογα με το περιβάλλον, μπορείτε να παρακάμψετε όπως απαιτείται (Επιλογή 1) ή να επαναφέρετε το μέγεθος του πλαισίου για ολόκληρες περιοχές (Επιλογή 2).
Το Bootstrap ακολουθεί κοινά πρότυπα ιστού και —με ελάχιστη επιπλέον προσπάθεια— μπορεί να χρησιμοποιηθεί για τη δημιουργία τοποθεσιών που είναι προσβάσιμες σε όσους χρησιμοποιούν AT .
Εάν η πλοήγησή σας περιέχει πολλούς συνδέσμους και προηγείται του κύριου περιεχομένου στο DOM, προσθέστε έναν Skip to main content
σύνδεσμο πριν από την πλοήγηση (για μια απλή εξήγηση, ανατρέξτε σε αυτό το άρθρο του Έργου A11Y σχετικά με την παράλειψη συνδέσμων πλοήγησης ). Η χρήση της .sr-only
τάξης θα αποκρύψει οπτικά τον σύνδεσμο παράλειψης και η .sr-only-focusable
τάξη θα διασφαλίσει ότι ο σύνδεσμος θα γίνει ορατός μόλις εστιαστεί (για χρήστες πληκτρολογίου με όραση).
Λόγω μακροχρόνιων ελλείψεων/σφαλμάτων στο Chrome (δείτε το ζήτημα 262171 στο πρόγραμμα παρακολούθησης σφαλμάτων Chromium ) και στον Internet Explorer (δείτε αυτό το άρθρο σχετικά με τους συνδέσμους στη σελίδα και τη σειρά εστίασης ), θα πρέπει να βεβαιωθείτε ότι ο στόχος του συνδέσμου παράβλεψης μπορεί να εστιαστεί τουλάχιστον μέσω προγραμματισμού προσθέτοντας tabindex="-1"
.
Επιπλέον, μπορεί να θέλετε να αποκρύψετε ρητά μια ορατή ένδειξη εστίασης στον στόχο (ιδιαίτερα επειδή το Chrome επί του παρόντος ορίζει επίσης την εστίαση σε στοιχεία με tabindex="-1"
το πότε γίνεται κλικ σε αυτά με το ποντίκι) με #content:focus { outline: none; }
.
Λάβετε υπόψη ότι αυτό το σφάλμα θα επηρεάσει επίσης τυχόν άλλους συνδέσμους στη σελίδα που μπορεί να χρησιμοποιεί ο ιστότοπός σας, καθιστώντας τους άχρηστους για τους χρήστες πληκτρολογίου. Μπορείτε να εξετάσετε το ενδεχόμενο να προσθέσετε μια παρόμοια διόρθωση διακοπής σε όλες τις άλλες επώνυμες αγκυρώσεις / αναγνωριστικά θραύσματος που λειτουργούν ως στόχοι συνδέσμων.
Κατά την ένθεση επικεφαλίδων ( <h1>
- <h6>
), η κύρια κεφαλίδα του εγγράφου σας θα πρέπει να είναι ένα <h1>
. Οι επόμενες επικεφαλίδες θα πρέπει να κάνουν λογική χρήση <h2>
- <h6>
έτσι ώστε οι αναγνώστες οθόνης να μπορούν να δημιουργήσουν έναν πίνακα περιεχομένων για τις σελίδες σας.
Μάθετε περισσότερα στο HTML CodeSniffer και στο Penn State's AccessAbility .
Επί του παρόντος, ορισμένοι από τους προεπιλεγμένους χρωματικούς συνδυασμούς που είναι διαθέσιμοι στο Bootstrap (όπως οι διάφορες κλάσεις κουμπιών με στυλ , μερικά από τα χρώματα επισήμανσης κώδικα που χρησιμοποιούνται για βασικά μπλοκ κώδικα , η βοηθητική κλάση .bg-primary
φόντου με βάση τα συμφραζόμενα και το προεπιλεγμένο χρώμα συνδέσμου όταν χρησιμοποιείται σε λευκό φόντο) έχουν χαμηλή αναλογία αντίθεσης (κάτω από τη συνιστώμενη αναλογία 4,5:1 ). Αυτό μπορεί να προκαλέσει προβλήματα σε χρήστες με χαμηλή όραση ή αχρωματοψίες. Αυτά τα προεπιλεγμένα χρώματα μπορεί να χρειαστεί να τροποποιηθούν για να αυξηθεί η αντίθεση και η αναγνωσιμότητά τους.
Το Bootstrap κυκλοφορεί με την άδεια του MIT και είναι πνευματικά δικαιώματα 2019 Twitter. Βρασμένο σε μικρότερα κομμάτια, μπορεί να περιγραφεί με τις ακόλουθες συνθήκες.
Η πλήρης άδεια Bootstrap βρίσκεται στο αποθετήριο του έργου για περισσότερες πληροφορίες.
Τα μέλη της κοινότητας έχουν μεταφράσει την τεκμηρίωση του Bootstrap σε διάφορες γλώσσες. Κανένα δεν υποστηρίζεται επίσημα και μπορεί να μην είναι πάντα ενημερωμένο.
Δεν βοηθάμε στην οργάνωση ή τη φιλοξενία μεταφράσεων, απλώς συνδέσουμε σε αυτές.
Τελειώσατε μια νέα ή καλύτερη μετάφραση; Ανοίξτε ένα αίτημα έλξης για να το προσθέσετε στη λίστα μας.