Ξεκινήστε με το Bootstrap

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

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

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

Ξεκινήστε συμπεριλαμβάνοντας το έτοιμο για παραγωγή CSS και JavaScript του Bootstrap μέσω CDN χωρίς να χρειάζεται κανένα βήμα κατασκευής. Δείτε το στην πράξη με αυτήν την επίδειξη Bootstrap CodePen .

Δημιουργήστε ένα νέο index.htmlαρχείο στη ρίζα του έργου σας. Συμπεριλάβετε επίσης την <meta name="viewport">ετικέτα για σωστή απόκριση συμπεριφορά σε κινητές συσκευές.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Συμπεριλάβετε το CSS και το JS του Bootstrap. Τοποθετήστε την <link>ετικέτα στο <head>για το CSS μας και την <script>ετικέτα για το πακέτο JavaScript (συμπεριλαμβανομένου του Popper για την τοποθέτηση αναπτυσσόμενων μενού, popper και συμβουλές εργαλείων) πριν από το κλείσιμο </body>. Μάθετε περισσότερα για τους συνδέσμους CDN μας .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Μπορείτε επίσης να συμπεριλάβετε το Popper και το JS μας ξεχωριστά. Εάν δεν σκοπεύετε να χρησιμοποιήσετε αναπτυσσόμενα μενού, popovers ή συμβουλές εργαλείων, εξοικονομήστε μερικά kilobyte μη συμπεριλαμβανομένου του Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Γειά σου Κόσμε! Ανοίξτε τη σελίδα στο πρόγραμμα περιήγησης της επιλογής σας για να δείτε τη σελίδα Bootstrapped. Τώρα μπορείτε να ξεκινήσετε τη δημιουργία με το Bootstrap δημιουργώντας τη δική σας διάταξη , προσθέτοντας δεκάδες στοιχεία και χρησιμοποιώντας τα επίσημα παραδείγματα μας .

Σύνδεσμοι CDN

Ως αναφορά, εδώ είναι οι κύριοι σύνδεσμοι CDN μας.

Περιγραφή	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Μπορείτε επίσης να χρησιμοποιήσετε το CDN για να ανακτήσετε οποιαδήποτε από τις πρόσθετες εκδόσεις μας που αναφέρονται στη σελίδα Περιεχομένων .

Επόμενα βήματα

Διαβάστε λίγο περισσότερα σχετικά με ορισμένες σημαντικές παγκόσμιες ρυθμίσεις περιβάλλοντος που χρησιμοποιεί το Bootstrap.
Διαβάστε σχετικά με το τι περιλαμβάνεται στο Bootstrap στην ενότητα περιεχομένων μας και τη λίστα των στοιχείων που απαιτούν JavaScript παρακάτω.
Χρειάζεστε λίγη περισσότερη δύναμη; Εξετάστε το ενδεχόμενο δημιουργίας με το Bootstrap συμπεριλαμβάνοντας τα αρχεία προέλευσης μέσω του διαχειριστή πακέτων .
Θέλετε να χρησιμοποιήσετε το Bootstrap ως λειτουργική μονάδα με <script type="module">; Ανατρέξτε στην ενότητα που χρησιμοποιούμε το Bootstrap ως ενότητα.

Στοιχεία JS

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

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

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

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

Το 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 .
Ρωτήστε και εξερευνήστε τις συζητήσεις μας στο GitHub .
Συνομιλήστε με άλλους Bootstrappers στο IRC. Στο irc.libera.chatδιακομιστή, στο #bootstrapκανάλι.
Μπορείτε να βρείτε βοήθεια για την υλοποίηση στο Stack Overflow (με ετικέτα bootstrap-5).
Οι προγραμματιστές θα πρέπει να χρησιμοποιούν τη λέξη-κλειδί bootstrapσε πακέτα που τροποποιούν ή προσθέτουν στη λειτουργικότητα του Bootstrap κατά τη διανομή μέσω npm ή παρόμοιων μηχανισμών παράδοσης για μέγιστη δυνατότητα εντοπισμού.

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