ძლიერი, გაფართოებადი და ფუნქციებით სავსე წინა ინსტრუმენტარიუმის. შექმენით და დააკონფიგურირეთ Sass-ით, გამოიყენეთ წინასწარ ჩაშენებული ქსელის სისტემა და კომპონენტები და გააცოცხლეთ პროექტები ძლიერი JavaScript დანამატებით.
ამჟამად v5.2.1 · ჩამოტვირთვა · v4.6.x დოკუმენტები · ყველა გამოშვება
გადადით პირდაპირ შენობაში Bootstrap-ით - გამოიყენეთ CDN, დააინსტალირეთ პაკეტის მენეჯერის მეშვეობით ან ჩამოტვირთეთ წყაროს კოდი.
დააინსტალირეთ Bootstrap-ის წყარო Sass და JavaScript ფაილები npm, RubyGems, Composer ან Meteor-ის საშუალებით. პაკეტის მართული ინსტალაციები არ შეიცავს დოკუმენტაციას ან ჩვენს სრულ build სკრიპტებს. თქვენ ასევე შეგიძლიათ გამოიყენოთ ჩვენი npm შაბლონის რეპო , რათა სწრაფად შექმნათ Bootstrap პროექტი npm-ის საშუალებით.
npm install [email protected]gem install bootstrap -v 5.2.1წაიკითხეთ ჩვენი ინსტალაციის დოკუმენტები დამატებითი ინფორმაციისთვის და დამატებითი პაკეტის მენეჯერებისთვის.
როცა მხოლოდ Bootstrap-ის კომპილირებული CSS ან JS გჭირდებათ, შეგიძლიათ გამოიყენოთ jsDelivr . იხილეთ ის მოქმედებაში ჩვენი მარტივი სწრაფი დაწყებით , ან დაათვალიერეთ მაგალითები თქვენი შემდეგი პროექტის დასაწყებად. თქვენ ასევე შეგიძლიათ აირჩიოთ პოპერისა და ჩვენი 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";
შეიტყვეთ მეტი Sass-თან Bootstrap-ის გამოყენების შესახებ .
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 მენიუები, პოპოვერები და ინსტრუმენტების რჩევები და მრავალი სხვა — ყველაფერი jQuery-ის გარეშე. JavaScript-ში Bootstrap არის HTML-პირველი, რაც ნიშნავს, რომ დანამატების დამატება ისეთივე მარტივია, როგორც dataატრიბუტების დამატება. გჭირდებათ მეტი კონტროლი? ჩართეთ ინდივიდუალური დანამატები პროგრამულად.
რატომ დაწეროთ მეტი JavaScript, როდესაც შეგიძლიათ დაწეროთ HTML? Bootstrap-ის თითქმის ყველა JavaScript დანამატს აქვს პირველი კლასის მონაცემთა 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 ხატების ბიბლიოთეკა, რომელიც შეიცავს 1500-ზე მეტ გლიფს, ყოველი გამოშვებით დამატებული მეტი. ისინი შექმნილია ნებისმიერ პროექტში მუშაობისთვის, მიუხედავად იმისა, თავად იყენებთ Bootstrap-ს თუ არა. გამოიყენეთ ისინი, როგორც SVG ან ხატულა შრიფტები - ორივე ვარიანტი გაძლევთ ვექტორულ მასშტაბირებას და მარტივ პერსონალიზაციას CSS-ის საშუალებით.
გადაიყვანეთ Bootstrap შემდეგ დონეზე პრემიუმ თემებით Bootstrap Themes-ის ოფიციალური ბაზრიდან . თემები აგებულია Bootstrap-ზე, როგორც საკუთარი გაფართოებული ჩარჩოები, მდიდარია ახალი კომპონენტებით და დანამატებით, დოკუმენტაციით და მძლავრი კონსტრუქციის ხელსაწყოებით.
