Κατεβάστε

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

Bootstrap CDN

Οι άνθρωποι στο jsDelivr παρέχουν ευγενικά υποστήριξη CDN για το CSS και το JavaScript του Bootstrap. Απλώς χρησιμοποιήστε αυτούς τους συνδέσμους CDN Bootstrap .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Εγκατάσταση με Bower

Μπορείτε επίσης να εγκαταστήσετε και να διαχειριστείτε τα Less, CSS, JavaScript και γραμματοσειρές του Bootstrap χρησιμοποιώντας το Bower :

$ bower install bootstrap

Εγκατάσταση με npm

Μπορείτε επίσης να εγκαταστήσετε το Bootstrap χρησιμοποιώντας το npm :

$ npm install bootstrap@3

require('bootstrap')θα φορτώσει όλα τα πρόσθετα jQuery του Bootstrap στο αντικείμενο jQuery. Η bootstrapίδια η μονάδα δεν εξάγει τίποτα. Μπορείτε να φορτώσετε μη αυτόματα τα πρόσθετα jQuery του Bootstrap μεμονωμένα, φορτώνοντας τα /js/*.jsαρχεία στον κατάλογο ανώτατου επιπέδου του πακέτου.

Το Bootstrap package.jsonπεριέχει ορισμένα πρόσθετα μεταδεδομένα κάτω από τα ακόλουθα κλειδιά:

• less- διαδρομή προς το κύριο αρχείο πηγής Less του Bootstrap
• style- διαδρομή προς το μη ελαχιστοποιημένο CSS του Bootstrap που έχει προμεταγλωττιστεί χρησιμοποιώντας τις προεπιλεγμένες ρυθμίσεις (χωρίς προσαρμογή)

Εγκατάσταση με το Composer

Μπορείτε επίσης να εγκαταστήσετε και να διαχειριστείτε Less, CSS, JavaScript και γραμματοσειρές του Bootstrap χρησιμοποιώντας το Composer :

$ composer require twbs/bootstrap

Απαιτείται αυτόματο πρόθεμα για Less/Sass

Το Bootstrap χρησιμοποιεί το Autoprefixer για να αντιμετωπίσει τα προθέματα προμηθευτή CSS . Εάν μεταγλωττίζετε το Bootstrap από την πηγή Less/Sass και δεν χρησιμοποιείτε το Gruntfile μας, θα πρέπει να ενσωματώσετε μόνοι σας το Autoprefixer στη διαδικασία κατασκευής σας. Εάν χρησιμοποιείτε προμεταγλωττισμένο Bootstrap ή χρησιμοποιείτε το Gruntfile μας, δεν χρειάζεται να ανησυχείτε για αυτό επειδή το Autoprefixer είναι ήδη ενσωματωμένο στο Gruntfile μας.

Τι περιλαμβάνεται

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

Προμεταγλωττισμένο Bootstrap

Μετά τη λήψη, αποσυμπιέστε τον συμπιεσμένο φάκελο για να δείτε τη δομή του (μεταγλωττισμένου) Bootstrap. Θα δείτε κάτι σαν αυτό:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Αυτή είναι η πιο βασική μορφή του Bootstrap: προμεταγλωττισμένα αρχεία για γρήγορη χρήση σε κάθε σχεδόν έργο web. Παρέχουμε μεταγλωττισμένα CSS και JS ( bootstrap.*), καθώς και μεταγλωττισμένα και ελαχιστοποιημένα CSS και JS ( bootstrap.min.*). Οι χάρτες προέλευσης CSS ( bootstrap.*.map) είναι διαθέσιμοι για χρήση με εργαλεία προγραμματιστών ορισμένων προγραμμάτων περιήγησης. Περιλαμβάνονται γραμματοσειρές από το Glyphicons, όπως και το προαιρετικό θέμα Bootstrap.

Πηγαίος κώδικας Bootstrap

Η λήψη του πηγαίου κώδικα του Bootstrap περιλαμβάνει τα προμεταγλωττισμένα στοιχεία CSS, JavaScript και γραμματοσειράς, μαζί με το Source Less, το JavaScript και την τεκμηρίωση. Πιο συγκεκριμένα περιλαμβάνει τα ακόλουθα και άλλα:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Τα less/, js/, και fonts/είναι ο πηγαίος κώδικας για τις γραμματοσειρές CSS, JS και εικονιδίων (αντίστοιχα). Ο dist/φάκελος περιλαμβάνει όλα όσα αναφέρονται στην ενότητα προμεταγλωττισμένης λήψης παραπάνω. Ο docs/φάκελος περιλαμβάνει τον πηγαίο κώδικα για την τεκμηρίωσή μας και examples/τη χρήση του Bootstrap. Πέρα από αυτό, οποιοδήποτε άλλο περιλαμβανόμενο αρχείο παρέχει υποστήριξη για πακέτα, πληροφορίες άδειας χρήσης και ανάπτυξη.

Μεταγλώττιση CSS και JavaScript

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

Εγκατάσταση του Grunt

Για να εγκαταστήσετε το Grunt, πρέπει πρώτα να κάνετε λήψη και εγκατάσταση του node.js (το οποίο περιλαμβάνει npm). Το npm σημαίνει λειτουργικές μονάδες με πακέτο κόμβων και είναι ένας τρόπος διαχείρισης των εξαρτήσεων ανάπτυξης μέσω του node.js.

1. Καθολική εγκατάσταση grunt-cliμε npm install -g grunt-cli.
2. Μεταβείτε στον ριζικό /bootstrap/κατάλογο και, στη συνέχεια, εκτελέστε το npm install. Το npm θα εξετάσει το package.jsonαρχείο και θα εγκαταστήσει αυτόματα τις απαραίτητες τοπικές εξαρτήσεις που αναφέρονται εκεί.

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

Διαθέσιμες εντολές Grunt

grunt dist(Απλώς μεταγλωττίστε CSS και JavaScript)

Αναγεννά τον /dist/κατάλογο με μεταγλωττισμένα και ελαχιστοποιημένα αρχεία CSS και JavaScript. Ως χρήστης Bootstrap, αυτή είναι συνήθως η εντολή που θέλετε.

grunt watch(Παρακολουθώ)

Παρακολουθεί τα αρχεία πηγής Less και τα μεταγλωττίζει ξανά αυτόματα σε CSS κάθε φορά που αποθηκεύετε μια αλλαγή.

grunt test(Εκτέλεση δοκιμών)

Εκτελεί το JSHint και εκτελεί τις δοκιμές QUnit χωρίς κεφάλι στο PhantomJS .

grunt docs(Δημιουργία και δοκιμή των στοιχείων των εγγράφων)

Δημιουργεί και δοκιμάζει CSS, JavaScript και άλλα στοιχεία που χρησιμοποιούνται κατά την τοπική εκτέλεση της τεκμηρίωσης μέσω bundle exec jekyll serve.

grunt(Δημιουργήστε απολύτως τα πάντα και εκτελέστε δοκιμές)

Μεταγλωττίζει και ελαχιστοποιεί το CSS και το JavaScript, δημιουργεί τον ιστότοπο τεκμηρίωσης, εκτελεί το πρόγραμμα επικύρωσης HTML5 έναντι των εγγράφων, αναγεννά τα στοιχεία του Customizer και πολλά άλλα. Απαιτεί τον Τζέκιλ . Συνήθως είναι απαραίτητο μόνο εάν κάνετε hacking στο ίδιο το Bootstrap.

Αντιμετώπιση προβλημάτων

Εάν αντιμετωπίσετε προβλήματα με την εγκατάσταση εξαρτήσεων ή την εκτέλεση εντολών Grunt, πρώτα διαγράψτε τον /node_modules/κατάλογο που δημιουργήθηκε από το npm. Στη συνέχεια, επανάληψη npm install.

Βασικό πρότυπο

Ξεκινήστε με αυτό το βασικό πρότυπο HTML ή τροποποιήστε αυτά τα παραδείγματα . Ελπίζουμε ότι θα προσαρμόσετε τα πρότυπα και τα παραδείγματα μας, προσαρμόζοντάς τα στις ανάγκες σας.

Αντιγράψτε τον παρακάτω κώδικα HTML για να ξεκινήσετε να εργάζεστε με ένα ελάχιστο έγγραφο Bootstrap.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Παραδείγματα

Βασιστείτε στο βασικό πρότυπο παραπάνω με τα πολλά στοιχεία του Bootstrap. Σας ενθαρρύνουμε να προσαρμόσετε και να προσαρμόσετε το Bootstrap για να ταιριάζει στις ατομικές ανάγκες του έργου σας.

Λάβετε τον πηγαίο κώδικα για κάθε παράδειγμα παρακάτω κατεβάζοντας το αποθετήριο Bootstrap . Παραδείγματα μπορείτε να βρείτε στον docs/examples/κατάλογο.

Χρησιμοποιώντας το πλαίσιο

Πρότυπο εκκίνησης

Τίποτα εκτός από τα βασικά: μεταγλωττισμένο CSS και JavaScript μαζί με ένα κοντέινερ.

Θέμα Bootstrap

Φορτώστε το προαιρετικό θέμα Bootstrap για μια οπτικά βελτιωμένη εμπειρία.

Πλέγματα

Πολλά παραδείγματα διατάξεων πλέγματος και με τα τέσσερα επίπεδα, ένθεση και άλλα.

Jumbotron

Δημιουργήστε γύρω από το jumbotron με μια γραμμή πλοήγησης και μερικές βασικές στήλες πλέγματος.

Στενό jumbotron

Δημιουργήστε μια πιο προσαρμοσμένη σελίδα περιορίζοντας το προεπιλεγμένο κοντέινερ και το jumbotron.

Navbars σε δράση

Navbar

Σούπερ βασικό πρότυπο που περιλαμβάνει τη γραμμή πλοήγησης μαζί με κάποιο πρόσθετο περιεχόμενο.

Στατική επάνω γραμμή πλοήγησης

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

Διορθώθηκε η γραμμή πλοήγησης

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

Προσαρμοσμένα εξαρτήματα

Κάλυμμα

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

Στροβιλοδρόμιο

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

Ιστολόγιο

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

Ταμπλό

Βασική δομή για έναν ��ίνακα εργαλείων διαχειριστή με σταθερή πλαϊνή γραμμή και γραμμή πλοήγησης.

Σελίδα σύνδεσης

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

Δικαιολογημένο nav

Δημιουργήστε μια προσαρμοσμένη γραμμή πλοήγησης με αιτιολογημένους συνδέσμους. Ψηλά το κεφάλι! Όχι πολύ φιλικό προς το Safari.

Κολλώδες υποσέλιδο

Επισυνάψτε ένα υποσέλιδο στο κάτω μέρος της θύρας προβολής όταν το περιεχόμενο είναι μικρότερο από αυτό.

Κολλώδες υποσέλιδο με γραμμή πλοήγησης

Συνδέστε ένα υποσέλιδο στο κάτω μέρος της θύρας προβολής με μια σταθερή γραμμή πλοήγησης στο επάνω μέρος.

Πειράματα

Bootstrap που δεν ανταποκρίνεται

Απενεργοποιήστε εύκολα την απόκριση του Bootstrap σύμφωνα με τα έγγραφά μας .

Εκτός καμβά

Δημιουργήστε ένα μενού πλοήγησης εκτός καμβά με δυνατότητα εναλλαγής για χρήση με το Bootstrap.

Εργαλεία

Bootlint

Το Bootlint είναι το επίσημο εργαλείο Bootstrap HTML linter . Ελέγχει αυτόματα για πολλά κοινά λάθη HTML σε ιστοσελίδες που χρησιμοποιούν το Bootstrap με έναν αρκετά «βανίλια» τρόπο. Τα στοιχεία/γραφικά στοιχεία του Vanilla Bootstrap απαιτούν τα μέρη του DOM να συμμορφώνονται με ορισμένες δομές. Το Bootlint ελέγχει ότι οι παρουσίες των στοιχείων Bootstrap έχουν σωστά δομημένο HTML. Σκεφτείτε να προσθέσετε το Bootlint στην αλυσίδα εργαλείων ανάπτυξης ιστού Bootstrap, έτσι ώστε κανένα από τα συνηθισμένα λάθη να μην επιβραδύνει την ανάπτυξη του έργου σας.

Κοινότητα

Μείνετε ενημερωμένοι για την ανάπτυξη του Bootstrap και απευθυνθείτε στην κοινότητα με αυτούς τους χρήσιμους πόρους.

• Διαβάστε και εγγραφείτε στο The Official Bootstrap Blog .
• Συνομιλήστε με άλλους Bootstrappers χρησιμοποιώντας IRC στον irc.freenode.netδιακομιστή, στο κανάλι ##bootstrap .
• Για βοήθεια σχετικά με τη χρήση του Bootstrap, ρωτήστε στο StackOverflow χρησιμοποιώντας την ετικέταtwitter-bootstrap-3 .
• Οι προγραμματιστές θα πρέπει να χρησιμοποιούν τη λέξη-κλειδί bootstrapσε πακέτα που τροποποιούν ή προσθέτουν στη λειτουργικότητα του Bootstrap κατά τη διανομή μέσω npm ή παρόμοιων μηχανισμών παράδοσης για μέγιστη δυνατότητα εντοπισμού.
• Βρείτε εμπνευσμένα παραδείγματα ανθρώπων που χτίζουν με το Bootstrap στο Bootstrap Expo .

Μπορείτε επίσης να ακολουθήσετε το @getbootstrap στο Twitter για τα πιο πρόσφατα κουτσομπολιά και φοβερά μουσικά βίντεο.

Απενεργοποίηση ανταπόκρισης

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

Βήματα για την απενεργοποίηση της απόκρισης σελίδας

1. Παραλείψτε τη θύρα προβολής <meta>που αναφέρεται στα έγγραφα CSS
2. Αντικαταστήστε το widthγια .containerκάθε επίπεδο πλέγματος με ένα μόνο πλάτος, για παράδειγμα width: 970px !important;Βεβαιωθείτε ότι αυτό έρχεται μετά το προεπιλεγμένο Bootstrap CSS. Μπορείτε προαιρετικά να αποφύγετε τα !importantερωτήματα μέσων ή κάποιο επιλογέα-fu.
3. Εάν χρησιμοποιείτε γραμμές πλοήγησης, καταργήστε όλες τις συμπεριφορές σύμπτυξης και επέκτασης της γραμμής πλοήγησης.
4. Για διατάξεις πλέγματος, χρησιμοποιήστε .col-xs-*κλάσεις επιπλέον ή στη θέση των μεσαίων/μεγάλων. Μην ανησυχείτε, το εξαιρετικά μικρό πλέγμα συσκευών κλιμακώνεται σε όλες τις αναλύσεις.

Θα εξακολουθείτε να χρειάζεστε το Respond.js για IE8 (καθώς τα ερωτήματά μας για τα μέσα εξακολουθούν να υπάρχουν και πρέπει να υποβληθούν σε επεξεργασία). Αυτό απενεργοποιεί τις πτυχές "ιστοτόπος για κινητά" του Bootstrap.

Πρότυπο bootstrap με απενεργοποιημένη την απόκριση

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

Προβολή παραδείγματος που δεν ανταποκρίνεται

Υποστήριξη προγράμματος περιήγησης και συσκευής

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

Υποστηριζόμενα προγράμματα περιήγησης

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

Τα εναλλακτικά προγράμματα περιήγησης που χρησιμοποιούν την πιο πρόσφατη έκδοση του WebKit, του Blink ή του Gecko, είτε απευθείας είτε μέσω του API προβολής ιστού της πλατφόρμας, δεν υποστηρίζονται ρητά. Ωστόσο, το Bootstrap θα πρέπει (στις περισσότερες περιπτώσεις) να εμφανίζει και να λειτουργεί σωστά και σε αυτά τα προγράμματα περιήγησης. Πιο συγκεκριμένες πληροφορίες υποστήριξης παρέχονται παρακάτω.

Κινητές συσκευές

Σε γενικές γραμμές, το Bootstrap υποστηρίζει τις πιο πρόσφατες εκδόσεις των προεπιλεγμένων προγραμμάτων περιήγησης κάθε μεγάλης πλατφόρμας. Σημειώστε ότι τα προγράμματα περιήγησης μεσολάβησης (όπως Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) δεν υποστηρίζονται.

Προγράμματα περιήγησης για επιτραπέζιους υπολογιστές

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

Στα 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

Οι Internet Explorer 8 και 9 υποστηρίζονται επίσης, ωστόσο, λάβετε υπόψη ότι ορισμένες ιδιότητες CSS3 και στοιχεία HTML5 δεν υποστηρίζονται πλήρως από αυτά τα προγράμματα περιήγησης. Επιπλέον, ο Internet Explorer 8 απαιτεί τη χρήση του Respond.js για να ενεργοποιηθεί η υποστήριξη ερωτημάτων πολυμέσων.

Επισκεφτείτε την ενότητα Μπορώ να χρησιμοποιήσω... για λεπτομέρειες σχετικά με την υποστήριξη του προγράμματος περιήγησης των λειτουργιών CSS3 και HTML5.

Internet Explorer 8 και Respond.js

Προσέξτε τις ακόλουθες προειδοποιήσεις όταν χρησιμοποιείτε το Respond.js στα περιβάλλοντα ανάπτυξης και παραγωγής για τον Internet Explorer 8.

Respond.js και CSS μεταξύ τομέων

Η χρήση του Respond.js με CSS που φιλοξενείται σε διαφορετικό (υπο)τομέα (για παράδειγμα, σε CDN) απαιτεί κάποια πρόσθετη ρύθμιση. Δείτε τα έγγραφα Respond.js για λεπτομέρειες.

Απαντήστε.js καιfile://

Λόγω των κανόνων ασφαλείας του προγράμματος περιήγησης, το Respond.js δεν λειτουργεί με σελίδες που προβάλλονται μέσω του file://πρωτοκόλλου (όπως όταν ανοίγετε ένα τοπικό αρχείο HTML). Για να δοκιμάσετε δυνατότητες απόκρισης στον IE8, προβάλετε τις σελίδες σας μέσω HTTP(S). Δείτε τα έγγραφα Respond.js για λεπτομέρειες.

Απαντήστε.js και@import

Το Respond.js δεν λειτουργεί με CSS που αναφέρεται μέσω @import. Συγκεκριμένα, ορισμένες διαμορφώσεις Drupal είναι γνωστό ότι χρησιμοποιούν @import. Δείτε τα έγγραφα Respond.js για λεπτομέρειες.

Internet Explorer 8 και μέγεθος κουτιού

Το IE8 δεν υποστηρίζεται πλήρως box-sizing: border-box;όταν συνδυάζεται με min-width, max-width, min-heightή max-height. Για αυτόν τον λόγο, από την έκδοση 3.0.1, δεν χρησιμοποιούμε πλέον max-widthστο .containers.

Internet Explorer 8 και @font-face

Το IE8 έχει κάποια προβλήματα @font-faceόταν συνδυάζεται με :before. Το Bootstrap χρησιμοποιεί αυτόν τον συνδυασμό με τα Glyphicons του. Εάν μια σελίδα αποθηκευτεί προσωρινά και φορτωθεί χωρίς το ποντίκι πάνω από το παράθυρο (π.χ. πατήστε το κουμπί ανανέωσης ή φορτώστε κάτι σε ένα iframe), τότε η σελίδα αποδίδεται πριν φορτώσει η γραμματοσειρά. Αν τοποθετήσετε το δείκτη του ποντικιού πάνω από τη σελίδα (σώμα) θα εμφανιστούν μερικά από τα εικονίδια και αν τοποθετήσετε το δείκτη του ποντικιού πάνω από τα υπόλοιπα εικονίδια θα εμφανιστούν και αυτά. Δείτε το τεύχος #13863 για λεπτομέρειες.

Λειτουργίες συμβατότητας IE

Το Bootstrap δεν υποστηρίζεται στις παλιές λειτουργίες συμβατότητας του Internet Explorer. Για να βεβαιωθείτε ότι χρησιμοποιείτε την πιο πρόσφατη λειτουργία απόδοσης για IE, εξετάστε το ενδεχόμενο να συμπεριλάβετε την κατάλληλη <meta>ετικέτα στις σελίδες σας:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Επιβεβαιώστε τη λειτουργία εγγράφου ανοίγοντας τα εργαλεία εντοπισμού σφαλμάτων: πατήστε F12και ελέγξτε το "Document Mode".

Αυτή η ετικέτα περιλαμβάνεται σε όλη την τεκμηρίωση και τα παραδείγματα του Bootstrap για να διασφαλιστεί η καλύτερη δυνατή απόδοση σε κάθε υποστηριζόμενη έκδοση του Internet Explorer.

Δείτε αυτήν την ερώτηση StackOverflow για περισσότερες πληροφορίες.

Internet Explorer 10 σε Windows 8 και Windows Phone 8

Ο Internet Explorer 10 δεν διαφοροποιεί το πλάτος της συσκευής από το πλάτος της θύρας προβολής και επομένως δεν εφαρμόζει σωστά τα ερωτήματα πολυμέσων στο CSS του Bootstrap. Κανονικά, απλώς προσθέτατε ένα γρήγορο απόσπασμα CSS για να το διορθώσετε:

@-ms-viewport       { width: device-width; }

Ωστόσο, αυτό δεν λειτουργεί για συσκευές που εκτελούν εκδόσεις Windows Phone 8 παλαιότερες από την Ενημέρωση 3 (γνωστή και ως GDR3) , καθώς αναγκάζει αυτές τις συσκευές να εμφανίζουν κυρίως προβολή επιφάνειας εργασίας αντί για στενή προβολή "τηλεφώνου". Για να αντιμετωπίσετε αυτό το πρόβλημα, θα πρέπει να συμπεριλάβετε τα ακόλουθα CSS και JavaScript για να επιλύσετε το σφάλμα .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Για περισσότερες πληροφορίες και οδηγίες χρήσης, διαβάστε το Windows Phone 8 και το Device-Width .

Ως προκαταρκτικά, το συμπεριλαμβάνουμε σε όλη την τεκμηρίωση και τα παραδείγματα του Bootstrap ως επίδειξη.

Στρογγυλοποίηση ποσοστού σαφάρι

Η μηχανή απόδοσης των εκδόσεων του Safari πριν από την έκδοση 7.1 για OS X και Safari για iOS v8.0 είχε κάποιο πρόβλημα με τον αριθμό των δεκαδικών ψηφίων που χρησιμοποιήθηκαν στις .col-*-1κατηγορίες πλέγματος μας. Έτσι, αν είχατε 12 μεμονωμένες στήλες πλέγματος, θα παρατηρούσατε ότι ήταν σύντομες σε σύγκριση με άλλες σειρές στηλών. Εκτός από την αναβάθμιση του Safari/iOS, έχετε ορισμένες επιλογές για λύσεις:

• Προσθέστε .pull-rightτο στην τελευταία στήλη πλέγματος για να λάβετε τη στοίχιση με τα δεξιά
• Τροποποιήστε τα ποσοστά σας με μη αυτόματο τρόπο για να έχετε την τέλεια στρογγυλοποίηση για το Safari (πιο δύσκολη από την πρώτη επιλογή)

Modals, γραμμές πλοήγησης και εικονικά πληκτρολόγια

Υπερχείλιση και κύλιση

Η υποστήριξη για overflow: hiddenτο <body>στοιχείο είναι αρκετά περιορισμένη σε iOS και Android. Για το σκοπό αυτό, όταν κάνετε κύλιση πέρα ​​από το επάνω ή το κάτω μέρος ενός modal σε κάποιο από τα προγράμματα περιήγησης αυτών των συσκευών, το <body>περιεχόμενο θα αρχίσει να κύλιση. Δείτε το σφάλμα Chrome #175502 (διορθώθηκε στο Chrome v40) και το σφάλμα WebKit #153852 .

Πεδία κειμένου iOS και κύλιση

Από το 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:

@media print {
  .container {
    width: auto;
  }
}

Android stock πρόγραμμα περιήγησης

Από το κουτί, το Android 4.1 (και ακόμη και μερικές νεότερες εκδόσεις προφανώς) διατίθεται με την εφαρμογή Browser ως το προεπιλεγμένο πρόγραμμα περιήγησης ιστού (σε αντίθεση με το Chrome). Δυστυχώς, η εφαρμογή Browser έχει πολλά σφάλματα και ασυνέπειες με το CSS γενικά.

Επιλέξτε μενού

Σε <select>στοιχεία, το πρόγραμμα περιήγησης μετοχών Android δεν θα εμφανίζει τα πλαϊνά στοιχεία ελέγχου εάν υπάρχει border-radiusκαι/ή borderεφαρμόζεται. (Δείτε αυτήν την ερώτηση StackOverflow για λεπτομέρειες.) Χρησιμοποιήστε το παρακάτω απόσπασμα κώδικα για να καταργήσετε το προσβλητικό CSS και να το <select>αποδώσετε ως στοιχείο χωρίς στυλ στο πρόγραμμα περιήγησης μετοχών Android. Το sniffing του παράγοντα χρήστη αποφεύγει τις παρεμβολές στα προγράμματα περιήγησης Chrome, Safari και Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Θέλετε να δείτε ένα παράδειγμα; Δείτε αυτό το demo του JS Bin.

Επικυρωτές

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

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

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

Υποστήριξη τρίτων

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

Διαστάσεις κουτιού

Ορισμένα λογισμικά τρίτων, συμπεριλαμβανομένων των Χαρτών Google και της Μηχανής Προσαρμοσμένης Αναζήτησης Google, έρχονται σε διένεξη με το Bootstrap λόγω * { box-sizing: border-box; }, ένας κανόνας που το καθιστά έτσι ώστε paddingνα μην επηρεάζει το τελικό υπολογισμένο πλάτος ενός στοιχείου. Μάθετε περισσότερα σχετικά με το μοντέλο κουτιού και το μέγεθος στο CSS Tricks .

Ανάλογα με το περιβάλλον, μπορείτε να παρακάμψετε όπως απαιτείται (Επιλογή 1) ή να επαναφέρετε το μέγεθος του πλαισίου για ολόκληρες περιοχές (Επιλογή 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Προσιτότητα

Το Bootstrap ακολουθεί κοινά πρότυπα ιστού και —με ελάχιστη επιπλέον προσπάθεια— μπορεί να χρησιμοποιηθεί για τη δημιουργία τοποθεσιών που είναι προσβάσιμες σε όσους χρησιμοποιούν AT .

Παράλειψη πλοήγησης

Εάν η πλοήγησή σας περιέχει πολλούς συνδέσμους και προηγείται του κύριου περιεχομένου στο DOM, προσθέστε έναν Skip to main contentσύνδεσμο πριν από την πλοήγηση (για μια απλή εξήγηση, ανατρέξτε σε αυτό το άρθρο του Έργου A11Y σχετικά με την παράλειψη συνδέσμων πλοήγησης ). Η χρήση της .sr-onlyτάξης θα αποκρύψει οπτικά τον σύνδεσμο παράλειψης και η .sr-only-focusableτάξη θα διασφαλίσει ότι ο σύνδεσμος θα γίνει ορατός μόλις εστιαστεί (για χρήστες πληκτρολογίου με όραση).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Ένθετες επικεφαλίδες

Κατά την ένθεση επικεφαλίδων ( <h1>- <h6>), η κύρια κεφαλίδα του εγγράφου σας θα πρέπει να είναι ένα <h1>. Οι επόμενες επικεφαλίδες θα πρέπει να κάνουν λογική χρήση <h2>- <h6>έτσι ώστε οι αναγνώστες οθόνης να μπορούν να δημιουργήσουν έναν πίνακα περιεχομένων για τις σελίδες σας.

Μάθετε περισσότερα στο HTML CodeSniffer και στο Penn State's AccessAbility .

Αντίθεση χρώματος

Επί του παρόντος, ορισμένοι από τους προεπιλεγμένους χρωματικούς συνδυασμούς που είναι διαθέσιμοι στο Bootstrap (όπως οι διάφορες κλάσεις κουμπιών με στυλ , μερικά από τα χρώματα επισήμανσης κώδικα που χρησιμοποιούνται για βασικά μπλοκ κώδικα , η βοηθητική κλάση .bg-primary φόντου με βάση τα συμφραζόμενα και το προεπιλεγμένο χρώμα συνδέσμου όταν χρησιμοποιείται σε λευκό φόντο) έχουν χαμηλή αναλογία αντίθεσης (κάτω από τη συνιστώμενη αναλογία 4,5:1 ). Αυτό μπορεί να προκαλέσει προβλήματα σε χρήστες με χαμηλή όραση ή αχρωματοψίες. Αυτά τα προεπιλεγμένα χρώματα μπορεί να χρειαστεί να τροποποιηθούν για να αυξηθεί η αντίθεση και η αναγνωσιμότητά τους.

Επιπρόσθετοι πόροι

• Σελιδοδείκτης "HTML Codesniffer" για τον εντοπισμό προβλημάτων προσβασιμότητας
• Επέκταση Προσβασιμότητας του Chrome για προγραμματιστές
• Αναλυτής χρωματικής αντίθεσης
• Το έργο A11Y
• Τεκμηρίωση προσβασιμότητας MDN

Συχνές ερωτήσεις άδειας χρήσης

Bootstrap is released under the MIT license and is copyright 2016 Twitter. Boiled down to smaller chunks, it can be described with the following conditions.

It requires you to:

• Keep the license and copyright notice included in Bootstrap's CSS and JavaScript files when you use them in your works

It permits you to:

• Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes
• Use Bootstrap in packages or distributions that you create
• Modify the source code
• Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license

It forbids you to:

• Hold the authors and license owners liable for damages as Bootstrap is provided without warranty
• Hold the creators or copyright holders of Bootstrap liable
• Redistribute any piece of Bootstrap without proper attribution
• Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution
• Use any marks owned by Twitter in any way that might state or imply that you created the Twitter software in question

It does not require you to:

• Include the source of Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
• Submit changes that you make to Bootstrap back to the Bootstrap project (though such feedback is encouraged)

The full Bootstrap license is located in the project repository for more information.

Translations

Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.

• Bootstrap 中文文档 (Chinese)
• Bootstrap 3 中文手冊 (Chinese (Traditional))
• Bootstrap på Dansk (Δανικά)
• Bootstrap en Français (γαλλικά)
• Bootstrap auf Deutsch (Γερμανικά)
• Bootstrap στα ιταλικά (ιταλικά)
• Bootstrap 한국어 (Κορεατικά)
• Bootstrap em Português do Brasil (Βραζιλιάνικα Πορτογαλικά)
• Bootstrap по-русски (Ρωσικά)
• Bootstrap en Español (Ισπανικά)
• Türkçe Bootstrap (Τουρκικά)
• Bootstrap українською (Ουκρανικά)
• Bootstrap bằng tiếng Việt (Βιετναμέζικα)

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

Τελειώσατε μια νέα ή καλύτερη μετάφραση; Ανοίξτε ένα αίτημα έλξης για να το προσθέσετε στη λίστα μας.