Εισαγωγή

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

Σε αυτήν την σελίδα

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

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

CSS

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

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

JS

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

Δέσμη

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Ξεχωριστός

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Ενότητες

Εάν χρησιμοποιείτε <script type="module">, ανατρέξτε στην ενότητα χρήσης του Bootstrap ως λειτουργικής μονάδας .

Συστατικά

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

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

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

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

Βεβαιωθείτε ότι έχετε ρυθμίσει τις σελίδες σας με τα πιο πρόσφατα πρότυπα σχεδίασης και ανάπτυξης. Αυτό σημαίνει τη χρήση ενός 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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" 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">

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

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

Για πιο απλό προσδιορισμό μεγέθους στο 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-5).
Οι προγραμματιστές θα πρέπει να χρησιμοποιούν τη λέξη-κλειδί bootstrapσε πακέτα που τροποποιούν ή προσθέτουν στη λειτουργικότητα του Bootstrap κατά τη διανομή μέσω npm ή παρόμοιων μηχανισμών παράδοσης για μέγιστη δυνατότητα εντοπισμού.

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