Güýçli, giňelip bilýän we aýratynlyk bilen gaplanan frontend gurallar toplumy. Sass bilen guruň we sazlaň, öňünden gurlan gözenek ulgamyny we böleklerini ulanyň we güýçli JavaScript plaginleri bilen taslamalary durmuşa geçiriň.
Häzirki wagtda v5.2.1 · Downloadüklemek · v4.6.x resminamalary · relhli goýberişler
“Bootstrap” bilen gurlup, CDN-i ulanyň, paket dolandyryjysynyň üsti bilen guruň ýa-da deslapky kody göçürip alyň.
“Bootstrap” -yň çeşmesi Sass we JavaScript faýllaryny npm, RubyGems, Composer ýa-da Meteor arkaly guruň. Paket dolandyrylýan gurnamalarda resminamalar ýa-da doly gurluş skriptlerimiz ýok. Şeýle hem , npm arkaly Bootstrap taslamasyny çalt döretmek üçin npm şablon reposymyzy ulanyp bilersiňiz.
npm install [email protected]gem install bootstrap -v 5.2.1Has giňişleýin maglumat we goşmaça paket dolandyryjylary üçin gurnama resminamalarymyzy okaň .
Diňe Bootstrap-yň düzülen CSS ýa-da JS-ni goşmaly bolsaňyz, jsDelivr ulanyp bilersiňiz . Simpleönekeý çalt başlangyjymyz bilen hereketde görüň ýa-da indiki taslamaňyza başlamak üçin mysallara göz aýlaň . Şeýle hem, Popper we JS-ni aýratyn goşup bilersiňiz .
<!-- 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-i modully we düzülip bilinýän arhitektura üçin ulanýar. Diňe zerur komponentleri import ediň, gradiýentler we kölegeler ýaly global opsiýalary işlediň we üýtgeýänlerimiz, kartalarymyz, funksiýalarymyz we garyndylarymyz bilen öz CSS-ni ýazyň.
Bir stil tablisasyny import ediň we CSS-iň her aýratynlygy bilen ýaryşlara çykýarsyňyz.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Global Sass opsiýalarymyz hakda has giňişleýin öwreniň .
“Bootstrap” -y sazlamagyň iň aňsat usuly - diňe size gerek CSS-i öz içine alýar.
// 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 bilen Bootstrap ulanmak barada has giňişleýin öwreniň .
“Bootstrap 5”, global mowzuk stilleri, aýry-aýry komponentler we hatda kommunal hyzmatlar üçin CSS üýtgeýjilerini has gowy ulanmak üçin her neşir bilen ösýär. Islendik ýerde ulanmak üçin reňkler, şrift stilleri we başgalar üçin onlarça üýtgeýjini hödürleýäris :root. Komponentlerde we kömekçi enjamlarda CSS üýtgeýjileri degişli klasa berilýär we aňsatlyk bilen üýtgedilip bilner.
Täze stil ýazmak üçin global :rootüýtgeýänlerimiziň islendik birini ulanyň . CSS üýtgeýjileri var(--bs-variableName)sintaksis ulanýar we çagalar elementlerine miras galyp biler.
.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-y isleýşiňiz ýaly düzmek üçin global, komponent ýa-da peýdaly synp üýtgeýjilerini ýok ediň. Her düzgüni täzeden açmagyň zerurlygy ýok, diňe täze üýtgeýän baha.
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” -de täze, hyzmatlarymyz indi “ Utility API ” tarapyndan döredilýär . Ony çalt we aňsatlaşdyryp boljak aýratynlykly Sass kartasy hökmünde gurduk. Haýsydyr bir peýdaly synplary goşmak, aýyrmak ýa-da üýtgetmek hiç haçan aňsat däldi. Kärhanalara jogap beriň, ýasama synp görnüşlerini goşuň we olara aýratyn at beriň.
Jemgyýetçilik hyzmatlary barada has giňişleýin öwreniň Customöriteleşdirilen komponentleri öwreniň
// 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,
)
)
);
JQuery-dan başga, üýtgedip bolýan gizlin elementleri, modallary we offkanaw menýularyny, popoversleri we gurallary we başga-da köp zatlary goşuň. dataBootstrap-daky JavaScript HTML-de birinji bolup, plugin goşmak atributlary goşmak ýaly aňsatdyr . Has köp gözegçilik gerekmi? Aýry-aýry pluginleri programma taýdan goşuň.
HTML ýazyp bilýän bolsaňyz, näme üçin has köp JavaScript ýazmaly? dataBootstrap-yň JavaScript pluginleriniň hemmesinde diýen ýaly diňe atributlary goşmak bilen JavaScript-i ulanmaga mümkinçilik berýän birinji derejeli maglumatlar API bar .
<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-i modul hökmünde we programma API ulanyp has giňişleýin öwreniň .
“Bootstrap” -da islendik taslama taşlap boljak onlarça plugin bar. Olary birbada taşlaň ýa-da diňe zerurlaryny saýlaň.
“ Bootstrap Icons ” açyk çeşmeli “SVG” nyşan kitaphanasy bolup, her neşirde 1500-den gowrak glif bar. “Bootstrap” -yň özüni ulansaňyz ýa-da ulanmasaňyz, islendik taslamada işlemek üçin niýetlenendir. Olary SVG ýa-da nyşan şriftleri hökmünde ulanyň - iki wariant hem size wektor ulalmagyny we CSS arkaly aňsatlaşdyrmagy üpjün edýär.
Bootstrap-ny resmi Bootstrap Temalar bazaryndaky premium mowzuklar bilen indiki derejä çykaryň . Mowzuklar, täze komponentlere we pluginlere, resminamalara we güýçli gurluşyk gurallaryna baý “Bootstrap” -da gurulýar.
