Source

Εισαγωγή

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

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

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

CSS

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

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

JS

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

Χρησιμοποιούμε τη λεπτή κατασκευή του jQuery , αλλά υποστηρίζεται και η πλήρης έκδοση.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

Εμφάνιση στοιχείων που απαιτούν JavaScript
  • Ειδοποιήσεις για απόρριψη
  • Κουμπιά για εναλλαγή καταστάσεων και πλαίσιο ελέγχου/λειτουργικότητα ραδιοφώνου
  • Καρουζέλ για όλες τις συμπεριφορές, τα χειριστήρια και τις ενδείξεις της διαφάνειας
  • Σύμπτυξη για εναλλαγή ορατότητας περιεχομένου
  • Αναπτυσσόμενα μενού για εμφάνιση και τοποθέτηση (απαιτείται επίσης το Popper.js )
  • Τρόποι για εμφάνιση, τοποθέτηση και συμπεριφορά κύλισης
  • Γραμμή πλοήγησης για την επέκταση της προσθήκης Collapse για την εφαρμογή συμπεριφοράς απόκρισης
  • Επεξηγήσεις εργαλείων και popover για εμφάνιση και τοποθέτηση (απαιτείται επίσης το Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 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 και απευθυνθείτε στην κοινότητα με αυτούς τους χρήσιμους πόρους.

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

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