Galingas, išplečiamas ir daug funkcijų turintis sąsajos įrankių rinkinys. Kurkite ir tinkinkite naudodami „Sass“, naudokite iš anksto sukurtą tinklelio sistemą ir komponentus ir atgaivinkite projektus naudodami galingus „JavaScript“ papildinius.
Šiuo metu v5.2.1 · Atsisiųsti · v4.6.x dokumentai · Visi leidimai
Pereikite tiesiai į kūrimą naudodami „Bootstrap“ – naudokite CDN, įdiekite jį naudodami paketų tvarkyklę arba atsisiųskite šaltinio kodą.
Įdiekite „Bootstrap“ šaltinio „Sass“ ir „JavaScript“ failus naudodami „npm“, „RubyGems“, „Composer“ arba „Meteor“. Į paketų valdomus diegimus neįtraukiama dokumentacija ar visi mūsų kūrimo scenarijai. Taip pat galite naudoti mūsų npm šablono repo , kad greitai sugeneruotumėte Bootstrap projektą naudodami npm.
npm install [email protected]gem install bootstrap -v 5.2.1Norėdami gauti daugiau informacijos ir papildomų paketų tvarkytuvų, skaitykite mūsų diegimo dokumentus .
Kai reikia įtraukti tik Bootstrap sukompiliuotą CSS arba JS, galite naudoti jsDelivr . Pamatykite tai veikiant naudodami paprastą greitą pradžią arba naršykite pavyzdžius , kad greitai pradėtumėte kitą projektą. Taip pat galite pasirinkti įtraukti Popper ir mūsų JS atskirai .
<!-- 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“ naudoja „Sass“ modulinei ir pritaikomai architektūrai. Importuokite tik jums reikalingus komponentus, įgalinkite visuotines parinktis, pvz., gradientus ir šešėlius, ir parašykite savo CSS su mūsų kintamaisiais, žemėlapiais, funkcijomis ir mišiniais.
Importuokite vieną stiliaus lapą ir galėsite lenktyniauti naudodami visas mūsų CSS funkcijas.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Sužinokite daugiau apie mūsų pasaulines Sass parinktis .
Lengviausias būdas tinkinti „Bootstrap“ – įtraukite tik jums reikalingą 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";
Sužinokite daugiau apie Bootstrap naudojimą su Sass .
„Bootstrap 5“ tobulėja su kiekvienu leidimu, kad būtų galima geriau panaudoti CSS kintamuosius, skirtus visuotiniams temų stiliams, atskiriems komponentams ir net komunalinėms paslaugoms. Mes teikiame daugybę spalvų, šriftų stilių ir kitų kintamųjų, :rootskirtų naudoti bet kur. Komponentų ir paslaugų CSS kintamieji priskiriami atitinkamoms klasėms ir gali būti lengvai modifikuojami.
Norėdami rašyti naujus stilius , naudokite bet kurį iš mūsų visuotinių :rootkintamųjų . CSS kintamieji naudoja var(--bs-variableName)sintaksę ir gali būti paveldimi antrinių elementų.
.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);
}Nepaisykite visuotinių, komponentų ar paslaugų klasės kintamųjų, kad pritaikytumėte Bootstrap taip, kaip jums patinka. Nereikia iš naujo deklaruoti kiekvienos taisyklės, užtenka nauja kintamojo reikšmė.
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“ naujiena – mūsų paslaugų programas dabar generuoja mūsų paslaugų API . Sukūrėme jį kaip daug funkcijų turintį Sass žemėlapį, kurį galima greitai ir lengvai tinkinti. Dar niekada nebuvo taip paprasta pridėti, pašalinti ar modifikuoti bet kokias paslaugų klases. Padarykite komunalines paslaugas reaguojančias, pridėkite pseudoklasių variantų ir suteikite joms pasirinktinius pavadinimus.
Sužinokite daugiau apie komunalines paslaugas Naršykite tinkintus komponentus
// 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,
)
)
);
Lengvai pridėkite perjungiamų paslėptų elementų, modalų ir meniu, iššokančių langų, įrankių patarimų ir dar daugiau – visa tai be jQuery. „JavaScript“ programoje „Bootstrap“ pirmiausia yra HTML, o tai reiškia, kad pridėti priedų yra taip pat paprasta, kaip pridėti dataatributų. Reikia daugiau kontrolės? Programiškai įtraukite atskirus papildinius.
Kam rašyti daugiau JavaScript, kai galite rašyti HTML? Beveik visi „Bootstrap“ „JavaScript“ papildiniai turi aukščiausios klasės duomenų API, leidžiančią naudoti „JavaScript“ tiesiog pridedant dataatributų.
<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>
Sužinokite daugiau apie „ JavaScript“ kaip modulius ir programinės API naudojimą .
„Bootstrap“ turi tuziną papildinių, kuriuos galite įtraukti į bet kurį projektą. Įmeskite juos visus iš karto arba pasirinkite tik tuos, kurių jums reikia.
„ Bootstrap Icons “ yra atvirojo kodo SVG piktogramų biblioteka, turinti daugiau nei 1 500 glifų, su kiekvienu leidimu pridedama daugiau. Jie skirti veikti bet kuriame projekte, nesvarbu, ar naudojate patį „Bootstrap“, ar ne. Naudokite juos kaip SVG arba piktogramų šriftus – abi parinktys suteikia vektorinio mastelio keitimą ir lengvą tinkinimą naudojant CSS.
Perkelkite „Bootstrap“ į kitą lygį naudodami aukščiausios kokybės temas iš oficialios „Bootstrap“ temų rinkos . Temos sukurtos naudojant „Bootstrap“ kaip savo išplėstines sistemas, kuriose gausu naujų komponentų ir papildinių, dokumentacijos ir galingų kūrimo įrankių.
