Το Bootstrap είναι ένα δωρεάν πλαίσιο front-end για ταχύτερη και ευκολότερη ανάπτυξη ιστού
Το Bootstrap περιλαμβάνει πρότυπα σχεδίασης βασισμένα σε HTML και CSS για τυπογραφία, φόρμες, κουμπιά, πίνακες, πλοήγηση, modals, καρουζέλ εικόνων και πολλά άλλα, καθώς και προαιρετικά πρόσθετα JavaScript
Το Bootstrap σας δίνει επίσης τη δυνατότητα να δημιουργείτε εύκολα σχέδια με απόκριση
Τι είναι το Responsive Web Design;
Το Responsive web design αφορά τη δημιουργία ιστοσελίδων που προσαρμόζονται αυτόματα να δείχνουν καλά σε όλες τις συσκευές, από μικρά τηλέφωνα έως μεγάλους επιτραπέζιους υπολογιστές.
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Το Bootstrap 5 (κυκλοφόρησε το 2021) είναι η νεότερη έκδοση του Bootstrap (κυκλοφόρησε το 2013) με νέα στοιχεία, ταχύτερο φύλλο στυλ και μεγαλύτερη απόκριση.
Το Bootstrap 5 υποστηρίζει τις πιο πρόσφατες, σταθερές εκδόσεις όλων των μεγάλων προγραμμάτων περιήγησης και πλατφόρμες. Ωστόσο, ο Internet Explorer 11 και κάτω δεν υποστηρίζεται.
Οι κύριες διαφορές μεταξύ του Bootstrap 5 και του Bootstrap 3 & 4 είναι ότι Το Bootstrap 5 έχει αλλάξει σε vanilla JavaScript αντί για jQuery.
Σημείωση: Το Bootstrap 3 και το Bootstrap 4 εξακολουθούν να υποστηρίζονται από την ομάδα για κρίσιμες διορθώσεις σφαλμάτων και αλλαγές τεκμηρίωσης, και είναι απολύτως ασφαλές να συνεχίσετε να τα χρησιμοποιείτε. Ωστόσο, ΔΕΝ θα προστεθούν νέες δυνατότητες τους.
Πλεονεκτήματα του Bootstrap:
Εύκολο στη χρήση: Οποιοσδήποτε με βασικές γνώσεις HTML και CSS μπορεί να αρχίσει να χρησιμοποιεί το Bootstrap
Δυνατότητες απόκρισης: Το αποκριτικό CSS του Bootstrap προσαρμόζεται σε τηλέφωνα, tablet και επιτραπέζιους υπολογιστές
Προσέγγιση πρώτου για κινητά: Στο Bootstrap, τα στυλ με προτεραιότητα στο κινητό αποτελούν μέρος του βασικού πλαισίου
Συμβατότητα προγράμματος περιήγησης: Το Bootstrap 5 είναι συμβατό με όλα τα σύγχρονα προγράμματα περιήγησης (Chrome, Firefox, Edge, Safari και Opera). Σημειώστε ότι εάν χρειάζεστε υποστήριξη για IE11 και παλαιότερες εκδόσεις, πρέπει να το χρησιμοποιήσετε είτε BS4 είτε BS3.
Υπάρχουν δύο τρόποι για να ξεκινήσετε να χρησιμοποιείτε το Bootstrap 5 στον δικό σας ιστότοπο.
Μπορείς:
Συμπεριλάβετε το Bootstrap 5 από ένα CDN
Κατεβάστε το Bootstrap 5 από το getbootstrap.com
Εάν δεν θέλετε να κατεβάσετε και να φιλοξενήσετε μόνοι σας το Bootstrap 5, μπορείτε να το συμπεριλάβετε από ένα CDN (Δίκτυο παράδοσης περιεχομένου).
Το jsDelivr παρέχει υποστήριξη CDN για CSS και JavaScript του Bootstrap:
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>Ένα πλεονέκτημα της χρήσης του CDN Bootstrap 5:
Πολλοί χρήστες έχουν ήδη κατεβάσει Bootstrap 5 από το jsDelivr κατά την επίσκεψη άλλο site. Ως αποτέλεσμα, θα φορτώνεται από την προσωρινή μνήμη όταν επισκέπτονται τον ιστότοπό σας, γεγονός που οδηγεί σε ταχύτερο χρόνο φόρτωσης. Επίσης, τα περισσότερα CDN θα βεβαιωθούν ότι μόλις ένας χρήστης ζητήσει ένα αρχείο από αυτό, θα εξυπηρετηθεί από τον πλησιέστερο διακομιστή, γεγονός που οδηγεί επίσης σε ταχύτερο χρόνο φόρτωσης.
JavaScript;
Το Bootstrap 5 χρησιμοποιεί JavaScript για διαφορετικά. εξαρτήματα (όπως modals, tooltips, popovers κ.λπ.). Ωστόσο, εάν χρησιμοποιείτε απλώς το Μέρος CSS του Bootstrap, δεν τα χρειάζεστε.
Εάν θέλετε να κατεβάσετε και να φιλοξενήσετε μόνοι σας το Bootstrap 5, μεταβείτε στο https://getbootstrap.com/, και ακολουθήστε τις οδηγίες εκεί.
1. Προσθέστε το doctype HTML5
Το Bootstrap 5 χρησιμοποιεί στοιχεία HTML και ιδιότητες CSS που απαιτούνται τον τύπο HTML5.
Να συμπεριλαμβάνεται πάντα ο τύπος HTML5 στην αρχή του τη σελίδα, μαζί με το χαρακτηριστικό lang και το σωστό σύνολο τίτλου και χαρακτήρων:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>2. Το Bootstrap 5 είναι το mobile-first
Το Bootstrap 5 έχει σχεδιαστεί για να ανταποκρίνεται σε κινητές συσκευές. Τα στυλ που προέρχονται από το κινητό είναι μέρος του βασικού πλαισίου.
Για να διασφαλίσετε τη σωστή απόδοση και ζουμ αφής, προσθέστε την ακόλουθη ετικέτα μέσα στο στοιχείο <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Το τμήμα width=device-width ορίζει το πλάτος της σελίδας ώστε να ακολουθεί το πλάτος οθόνης της συσκευής (που θα διαφέρει ανάλογα με τη συσκευή).
Το τμήμα initial-scale=1 ορίζει το αρχικό επίπεδο ζουμ κατά την πρώτη φόρτωση της σελίδας από το πρόγραμμα περιήγησης.
3. Εμπορευματοκιβώτια
Το Bootstrap 5 απαιτεί επίσης ένα στοιχείο που περιέχει για την αναδίπλωση των περιεχομένων του ιστότοπου.
Υπάρχουν δύο κατηγορίες κοντέινερ για να διαλέξετε:
Η κλάση .container παρέχει ένα αποκριτικό κοντέινερ σταθερού πλάτους
Η κλάση .container-fluid παρέχει ένα κοντέινερ πλήρους πλάτους, που εκτείνεται σε όλο το πλάτος της θύρας προβολής
Το ακόλουθο παράδειγμα δείχνει τον κώδικα για μια βασική σελίδα Bootstrap 5 (με αποκριτικό κοντέινερ σταθερού πλάτους):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>
</body>
</html>
Το παρακάτω παράδειγμα δείχνει τον κώδικα για μια βασική σελίδα Bootstrap 5 (με κοντέινερ πλήρους πλάτους):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>