Potenca, etendebla kaj plenplena ilaro de fasado. Konstruu kaj personigu per Sass, uzu antaŭkonstruitan kradsistemon kaj komponantojn, kaj vivigu projektojn per potencaj JavaScript-kromaĵoj.
Nuntempe v5.2.1 · Elŝutu · v4.6.x dokumentojn · Ĉiuj eldonoj
Saltu rekte en konstruadon kun Bootstrap—uzu la CDN, instalu ĝin per pakaĵmanaĝero aŭ elŝutu la fontkodon.
Instalu la fontajn dosierojn Sass kaj JavaScript de Bootstrap per npm, RubyGems, Composer aŭ Meteor. Pakaj administritaj instalaĵoj ne inkluzivas dokumentadon aŭ niajn plenajn konstruajn skriptojn. Vi ankaŭ povas uzi nian npm-ŝablonan deponejon por rapide generi Bootstrap-projekton per npm.
npm install [email protected]gem install bootstrap -v 5.2.1Legu niajn instalajn dokumentojn por pliaj informoj kaj pliaj pakaĵadministriloj.
Kiam vi nur bezonas inkluzivi la kompilitan CSS aŭ JS de Bootstrap, vi povas uzi jsDelivr . Vidu ĝin en ago per nia simpla rapida komenco , aŭ foliumu la ekzemplojn por ekfunkciigi vian sekvan projekton. Vi ankaŭ povas elekti inkludi Popper kaj nian JS aparte .
<!-- 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 uzas Sass por modula kaj agordebla arkitekturo. Importu nur la komponantojn, kiujn vi bezonas, ebligu tutmondajn elektojn kiel gradientojn kaj ombrojn, kaj skribu vian propran CSS per niaj variabloj, mapoj, funkcioj kaj miksaĵoj.
Importu unu stilfolion kaj vi ekkuros kun ĉiu funkcio de nia CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Lernu pli pri niaj tutmondaj Sass-opcioj .
La plej facila maniero por personecigi Bootstrap—inkluzivi nur la CSS, kiun vi bezonas.
// 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";
Lernu pli pri uzado de Bootstrap kun Sass .
Bootstrap 5 evoluas kun ĉiu eldono por pli bone uzi CSS-variablojn por tutmondaj temostiloj, individuaj komponantoj kaj eĉ utilecoj. Ni provizas dekojn da variabloj por koloroj, tiparstiloj kaj pli je :rootnivelo por uzi ie ajn. Pri komponantoj kaj utilecoj, CSS-variabloj estas ampleksitaj al la koncerna klaso kaj povas facile esti modifitaj.
Uzu iun ajn el niaj tutmondaj :rootvariabloj por skribi novajn stilojn. CSS-variabloj uzas la var(--bs-variableName)sintakson kaj povas esti hereditaj de filaj elementoj.
.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);
}Anstataŭigi tutmondajn, komponantajn aŭ utilajn klasajn variablojn por personecigi Bootstrap kiel vi ŝatas. Ne necesas redeklari ĉiun regulon, nur novan variablon.
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;
}Nova en Bootstrap 5, niaj utilecoj nun estas generitaj de nia Utila API . Ni konstruis ĝin kiel plenplenan Sass-mapon, kiu povas esti rapide kaj facile personecigita. Neniam estis pli facile aldoni, forigi aŭ modifi ajnajn utilajn klasojn. Faru ilojn respondajn, aldonu pseŭdoklasajn variantojn kaj donu al ili kutimajn nomojn.
// 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,
)
)
);
Facile aldonu ŝanĝeblajn kaŝitajn elementojn, modalojn kaj eksterkanvasajn menuojn, popovers kaj konsiletojn, kaj multe pli—ĉio sen jQuery. JavaScript en Bootstrap estas HTML-unue, kio signifas, ke aldoni kromaĵojn estas tiel facila kiel aldoni dataatributojn. Ĉu vi bezonas pli da kontrolo? Inkluzivi individuajn kromaĵojn programe.
Kial skribi pli da JavaScript kiam vi povas skribi HTML? Preskaŭ ĉiuj JavaScript-kromaĵoj de Bootstrap prezentas bonegan datuman API, permesante al vi uzi JavaScript nur aldonante dataatributojn.
<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>
Lernu pli pri nia JavaScript kiel moduloj kaj uzante la programan API .
Bootstrap enhavas dekduon da kromprogramoj, kiujn vi povas faligi en ajnan projekton. Enigu ilin ĉiujn samtempe, aŭ elektu nur tiujn, kiujn vi bezonas.
Bootstrap Icons estas malfermfonta SVG-ikonobiblioteko kun pli ol 1,500 glifoj, kun pli aldonitaj ĉiu eldono. Ili estas dezajnitaj por funkcii en ajna projekto, ĉu vi uzas Bootstrap mem aŭ ne. Uzu ilin kiel SVG-ojn aŭ ikonajn tiparojn - ambaŭ opcioj donas al vi vektoran skalon kaj facilan personigon per CSS.
Prenu Bootstrap al la sekva nivelo kun altkvalitaj temoj de la oficiala merkato de Bootstrap Themes . Temoj estas konstruitaj sur Bootstrap kiel siaj propraj etenditaj kadroj, riĉaj kun novaj komponantoj kaj kromaĵoj, dokumentado kaj potencaj konstruaj iloj.
