Εισαγωγή

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

Γρήγορη εκίνηση

Θέλετε να προσθέσετε γρήγορα το Bootstrap στο έργο σας; Χρησιμοποιήστε το jsDelivr, ένα δωρεάν CDN ανοιχτού κώδικα. Χρησιμοποιείτε έναν διαχειριστή πακέτων ή χρειάζεστε λήψη των αρχείων πηγής; Μεταβείτε στη σελίδα λήψεων .

CSS

Αντιγράψτε-επικολλήστε το φύλλο στυλ <link>στο δικό σας <head>πριν από όλα τα άλλα φύλλα στυλ για να φορτώσετε το CSS μας.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Πολλά από τα στοιχεία μας απαιτούν τη χρήση JavaScript για να λειτουργήσουν. Συγκεκριμένα, απαιτούν jQuery , Popper και τα δικά μας πρόσθετα JavaScript. Χρησιμοποιούμε τη λεπτή κατασκευή του jQuery , αλλά υποστηρίζεται και η πλήρης έκδοση.

Τοποθετήστε ένα από τα παρακάτω<script> κοντά στο τέλος των σελίδων σας, ακριβώς πριν από την </body>ετικέτα κλεισίματος, για να τα ενεργοποιήσετε. Το jQuery πρέπει να έρθει πρώτα, μετά το Popper και μετά τα πρόσθετα JavaScript.

Δέσμη

Συμπεριλάβετε κάθε πρόσθετο Bootstrap JavaScript με ένα από τα δύο πακέτα μας. Και τα δύο bootstrap.bundle.jsκαι bootstrap.bundle.min.jsπεριλαμβάνουν το Popper για τις συμβουλές εργαλείων και τα popover, αλλά όχι το jQuery . Συμπεριλάβετε πρώτα το jQuery και μετά ένα πακέτο JavaScript Bootstrap. Για περισσότερες πληροφορίες σχετικά με το τι περιλαμβάνεται στο Bootstrap, ανατρέξτε στην ενότητα περιεχομένων μας .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Ξεχωριστός

Εάν αποφασίσετε να χρησιμοποιήσετε τη λύση ξεχωριστών σεναρίων, το Popper πρέπει να έρθει πρώτα (αν χρησιμοποιείτε συμβουλές εργαλείων ή popover) και μετά τα πρόσθετα JavaScript.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Συστατικά

Αναρωτιέστε ποια στοιχεία απαιτούν ρητά jQuery, JavaScript και Popper; Κάντε κλικ στον σύνδεσμο εμφάνιση στοιχείων παρακάτω. Εάν δεν είστε σίγουροι για τη δομή της σελίδας, συνεχίστε να διαβάζετε για ένα παράδειγμα προτύπου σελίδας.

Εμφάνιση στοιχείων που απαιτούν JavaScript

Ειδοποιήσεις για απόρριψη
Κουμπιά για εναλλαγή καταστάσεων και πλαίσιο ελέγχου/λειτουργικότητα ραδιοφώνου
Καρουζέλ για όλες τις συμπεριφορές, τα χειριστήρια και τις ενδείξεις της διαφάνειας
Σύμπτυξη για εναλλαγή ορατότητας περιεχομένου
Αναπτυσσόμενα μενού για εμφάνιση και τοποθέτηση (απαιτείται επίσης Popper )
Τρόποι για εμφάνιση, τοποθέτηση και συμπεριφορά κύλισης
Γραμμή πλοήγησης για την επέκταση της προσθήκης Collapse για την εφαρμογή συμπεριφοράς απόκρισης
Scrollspy για συμπεριφορά κύλισης και ενημερώσεις πλοήγησης
Επεξηγήσεις εργαλείων και popover για εμφάνιση και τοποθέτηση (απαιτείται επίσης το Popper )

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

Βεβαιωθείτε ότι έχετε ρυθμίσει τις σελίδες σας με τα πιο πρόσφατα πρότυπα σχεδίασης και ανάπτυξης. Αυτό σημαίνει τη χρήση ενός doctype HTML5 και τη συμπερίληψη μιας μετα-ετικέτας θύρας προβολής για σωστές αποκριτικές συμπεριφορές. Συνδυάστε τα όλα μαζί και οι σελίδες σας θα πρέπει να μοιάζουν με αυτό:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

Σημαντικοί παγκόσμιοι

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

HTML5 doctype

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

<!doctype html>
<html lang="en">
  ...
</html>

Αποκριτική μετα-ετικέτα

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Μπορείτε να δείτε ένα παράδειγμα αυτού σε δράση στο πρότυπο εκκίνησης .

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

Για πιο απλό προσδιορισμό μεγέθους στο CSS, αλλάζουμε την καθολική box-sizingτιμή από content-boxσε border-box. Αυτό διασφαλίζει paddingότι δεν επηρεάζει το τελικό υπολογισμένο πλάτος ενός στοιχείου, αλλά μπορεί να προκαλέσει προβλήματα με κάποιο λογισμικό τρίτων, όπως οι Χάρτες Google και η Μηχανή Προσαρμοσμένης Αναζήτησης Google.

Στη σπάνια περίπτωση που χρειαστεί να το παρακάμψετε, χρησιμοποιήστε κάτι σαν το εξής:

.selector-for-some-widget {
  box-sizing: content-box;
}

Με το παραπάνω απόσπασμα, τα ένθετα στοιχεία—συμπεριλαμβανομένου του περιεχομένου που δημιουργείται μέσω ::beforeκαι— ::afterθα κληρονομήσουν όλα τα καθορισμένα box-sizingγια αυτό .selector-for-some-widget.

Μάθετε περισσότερα σχετικά με το μοντέλο κουτιού και το μέγεθος στο CSS Tricks .

Επανεκκίνηση

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

Κοινότητα

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

Διαβάστε και εγγραφείτε στο The Official Bootstrap Blog .
Συνομιλήστε με άλλους Bootstrappers στο IRC. Στο irc.libera.chatδιακομιστή, στο #bootstrapκανάλι.
Μπορείτε να βρείτε βοήθεια για την υλοποίηση στο Stack Overflow (με ετικέτα bootstrap-4).
Οι προγραμματιστές θα πρέπει να χρησιμοποιούν τη λέξη-κλειδί bootstrapσε πακέτα που τροποποιούν ή προσθέτουν στη λειτουργικότητα του Bootstrap κατά τη διανομή μέσω npm ή παρόμοιων μηχανισμών παράδοσης για μέγιστη δυνατότητα εντοπισμού.

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

CSP και ενσωματωμένα SVG

Πολλά στοιχεία Bootstrap περιλαμβάνουν ενσωματωμένα SVG στο CSS μας για να διαμορφώνουν τα στοιχεία με συνέπεια και εύκολα σε προγράμματα περιήγησης και συσκευές. Για οργανισμούς με πιο αυστηρές διαμορφώσεις CSP , έχουμε τεκμηριώσει όλες τις παρουσίες των ενσωματωμένων SVG μας (όλα τα οποία εφαρμόζονται μέσω background-image), ώστε να μπορείτε να ελέγξετε πιο διεξοδικά τις επιλογές σας.

Κουμπί κλεισίματος (χρησιμοποιείται σε ειδοποιήσεις και τρόπους λειτουργίας)
Προσαρμοσμένα πλαίσια ελέγχου και κουμπιά επιλογής
Διακόπτες φόρμας
Εικονίδια επικύρωσης φορμών
Προσαρμοσμένα μενού επιλογής
Χειριστήρια καρουζέλ
Κουμπιά εναλλαγής γραμμής πλοήγησης

Με βάση τη συζήτηση στην κοινότητα , ορισμένες επιλογές για την αντιμετώπιση αυτού του θέματος στη δική σας βάση κώδικα περιλαμβάνουν την αντικατάσταση των διευθύνσεων URL με τοπικά φιλοξενούμενα στοιχεία, την κατάργηση των εικόνων και τη χρήση ενσωματωμένων εικόνων (δεν είναι δυνατή σε όλα τα στοιχεία) και την τροποποίηση του CSP σας. Η σύστασή μας είναι να αναθεωρήσετε προσεκτικά τις δικές σας πολιτικές ασφαλείας και να αποφασίσετε για την καλύτερη πορεία προς τα εμπρός, εάν είναι απαραίτητο.