Ισχυρό, επεκτάσιμο και γεμάτο χαρακτηριστικά εργαλειοθήκη frontend. Δημιουργήστε και προσαρμόστε με το Sass, χρησιμοποιήστε προκατασκευασμένο σύστημα πλέγματος και εξαρτήματα και ζωντανέψτε τα έργα με ισχυρά πρόσθετα JavaScript.
Επί του παρόντος έκδοση 5.2.1 · Λήψη · Έγγραφα v4.6.x · Όλες οι εκδόσεις
Μεταβείτε απευθείας στη δημιουργία με το Bootstrap—χρησιμοποιήστε το CDN, εγκαταστήστε το μέσω του διαχειριστή πακέτων ή κατεβάστε τον πηγαίο κώδικα.
Εγκαταστήστε τα αρχεία πηγής Sass και JavaScript του Bootstrap μέσω npm, RubyGems, Composer ή Meteor. Οι εγκαταστάσεις διαχειριζόμενων πακέτων δεν περιλαμβάνουν τεκμηρίωση ή πλήρη σενάρια έκδοσης. Μπορείτε επίσης να χρησιμοποιήσετε το αποθετήριο προτύπων npm για να δημιουργήσετε γρήγορα ένα έργο Bootstrap μέσω npm.
npm install [email protected]gem install bootstrap -v 5.2.1Διαβάστε τα έγγραφα εγκατάστασης για περισσότερες πληροφορίες και πρόσθετους διαχειριστές πακέτων.
Όταν χρειάζεται μόνο να συμπεριλάβετε το μεταγλωττισμένο CSS ή JS του Bootstrap, μπορείτε να χρησιμοποιήσετε το jsDelivr . Δείτε το σε δράση με την απλή γρήγορη εκκίνηση ή περιηγηθείτε στα παραδείγματα για να ξεκινήσετε το επόμενο έργο σας. Μπορείτε επίσης να επιλέξετε να συμπεριλάβετε το Popper και το JS μας ξεχωριστά .
<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Το Bootstrap χρησιμοποιεί το Sass για μια αρθρωτή και προσαρμόσιμη αρχιτεκτονική. Εισαγάγετε μόνο τα στοιχεία που χρειάζεστε, ενεργοποιήστε καθολικές επιλογές όπως διαβαθμίσεις και σκιές και γράψτε το δικό σας CSS με τις μεταβλητές, τους χάρτες, τις συναρτήσεις και τις μίξεις μας.
Εισαγάγετε ένα φύλλο στυλ και πηγαίνετε στους αγώνες με κάθε χαρακτηριστικό του CSS μας.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Μάθετε περισσότερα για τις παγκόσμιες επιλογές Sass .
Ο ευκολότερος τρόπος για να προσαρμόσετε το Bootstrap—συμπεριλάβετε μόνο το CSS που χρειάζεστε.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
Μάθετε περισσότερα σχετικά με τη χρήση του Bootstrap με Sass .
Το Bootstrap 5 εξελίσσεται με κάθε κυκλοφορία για να χρησιμοποιεί καλύτερα μεταβλητές CSS για καθολικά στυλ θεμάτων, μεμονωμένα στοιχεία, ακόμη και βοηθητικά προγράμματα. Παρέχουμε δεκάδες μεταβλητές για χρώματα, στυλ γραμματοσειράς και άλλα σε :rootεπίπεδο για χρήση οπουδήποτε. Σε στοιχεία και βοηθητικά προγράμματα, οι μεταβλητές CSS καλύπτονται από τη σχετική κλάση και μπορούν εύκολα να τροποποιηθούν.
Χρησιμοποιήστε οποιαδήποτε από τις καθολικές :rootμεταβλητές μας για να γράψετε νέα στυλ. Οι μεταβλητές CSS χρησιμοποιούν τη var(--bs-variableName)σύνταξη και μπορούν να κληρονομηθούν από θυγατρικά στοιχεία.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}Παρακάμψτε μεταβλητές καθολικής, συστατικού ή βοηθητικού προγράμματος για να προσαρμόσετε το Bootstrap όπως σας αρέσει. Δεν χρειάζεται να δηλώσετε ξανά κάθε κανόνα, απλώς μια νέα τιμή μεταβλητής.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}Νέο στο Bootstrap 5, τα βοηθητικά μας προγράμματα δημιουργούνται πλέον από το Utility API . Το δημιουργήσαμε ως ένας χάρτης Sass γεμάτος δυνατότητες που μπορεί να προσαρμοστεί γρήγορα και εύκολα. Ποτέ δεν ήταν πιο εύκολο να προσθέσετε, να αφαιρέσετε ή να τροποποιήσετε οποιεσδήποτε κατηγορίες βοηθητικών προγραμμάτων. Κάντε τα βοηθητικά προγράμματα να ανταποκρίνονται, προσθέστε παραλλαγές ψευδο-κλάσης και δώστε τους προσαρμοσμένα ονόματα.
Μάθετε περισσότερα για τα βοηθητικά προγράμματα Εξερευνήστε προσαρμοσμένα στοιχεία
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Προσθέστε εύκολα κρυφά στοιχεία με δυνατότητα εναλλαγής, μενού και offcanvas μενού, popover και συμβουλές εργαλείων και πολλά άλλα—όλα χωρίς jQuery. Το JavaScript στο Bootstrap είναι HTML-first, που σημαίνει ότι η προσθήκη προσθηκών είναι τόσο εύκολη όσο η προσθήκη dataχαρακτηριστικών. Χρειάζεστε περισσότερο έλεγχο; Συμπεριλάβετε μεμονωμένα πρόσθετα μέσω προγραμματισμού.
Γιατί να γράψετε περισσότερο JavaScript όταν μπορείτε να γράψετε HTML; Σχεδόν όλες οι προσθήκες JavaScript του Bootstrap διαθέτουν ένα API δεδομένων πρώτης κατηγορίας, που σας επιτρέπει να χρησιμοποιείτε JavaScript προσθέτοντας μόνο dataχαρακτηριστικά.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
Μάθετε περισσότερα σχετικά με το JavaScript ως λειτουργικές μονάδες και τη χρήση του API μέσω προγραμματισμού .
Το Bootstrap διαθέτει μια ντουζίνα πρόσθετα που μπορείτε να προσθέσετε σε οποιοδήποτε έργο. Ρίξτε τα όλα μαζί ή επιλέξτε μόνο αυτά που χρειάζεστε.
Το Bootstrap Icons είναι μια βιβλιοθήκη εικονιδίων SVG ανοιχτού κώδικα που διαθέτει πάνω από 1.500 γλυφές, με περισσότερες προστιθέμενες κάθε κυκλοφορία. Έχουν σχεδιαστεί για να λειτουργούν σε οποιοδήποτε έργο, είτε χρησιμοποιείτε το ίδιο το Bootstrap είτε όχι. Χρησιμοποιήστε τα ως SVG ή γραμματοσειρές εικονιδίων—και οι δύο επιλογές σας προσφέρουν διανυσματική κλίμακα και εύκολη προσαρμογή μέσω CSS.
Πηγαίνετε το Bootstrap στο επόμενο επίπεδο με premium θέματα από την επίσημη αγορά θεμάτων Bootstrap . Τα θέματα είναι χτισμένα στο Bootstrap ως δικά τους εκτεταμένα πλαίσια, πλούσια με νέα στοιχεία και πρόσθετα, τεκμηρίωση και ισχυρά εργαλεία κατασκευής.
