Yakasimba, inowedzera, uye inoratidzira-yakazara pamberi peturusi rekushandisa. Vaka uye gadzirisa neSass, shandisa yakagara yakavakirwa grid system uye zvikamu, uye unza mapurojekiti kuhupenyu ane simba JavaScript plugins.
Parizvino v5.2.1 · Dhawunirodha · v4.6.x docs · Zvese zvaburitswa
Svetukira mukuvaka neBootstrap-shandisa iyo CDN, imise kuburikidza nepakeji maneja, kana kudhawunirodha kodhi kodhi.
Isa Bootstrap's source Sass uye JavaScript mafaera kuburikidza nenpm, RubyGems, Composer, kana Meteor. Mapakeji anogadziriswa ekuisa haasanganisire zvinyorwa kana yedu yakazara kuvaka zvinyorwa. Iwe unogona zvakare kushandisa yedu npm template repo kukurumidza kugadzira Bootstrap chirongwa kuburikidza npm.
npm install [email protected]gem install bootstrap -v 5.2.1Verenga edu ekuisa zvinyorwa kuti uwane rumwe ruzivo uye mamwe mapakeji maneja.
Paunenge uchingoda kuisa Bootstrap yakaunganidzwa CSS kana JS, unogona kushandisa jsDelivr . Zvione mukuita neyedu yakapfava yekukurumidza kutanga , kana bhurawuza mienzaniso kuti utange purojekiti yako inotevera. Iwe unogona zvakare kusarudza kusanganisira Popper uye JS yedu zvakasiyana .
<!-- 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 inoshandisa Sass kune modular uye customizable dhizaini. Ngenisa chete zvikamu zvaunoda, gonesa sarudzo dzepasirese senge magradients uye mimvuri, uye nyora yako CSS nezvinosiyana zvedu, mepu, mabasa, uye musanganiswa.
Ngenisa pepa rimwe chete uye wave kuenda kumijaho nechero chinhu cheCSS yedu.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Dzidza zvakawanda nezvesarudzo dzedu dzepasi rose dzeSass .
Iyo iri nyore nzira yekugadzirisa Bootstrap-inosanganisira chete CSS yaunoda.
// 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";
Dzidza zvakawanda nezvekushandisa Bootstrap neSass .
Bootstrap 5 iri kusimukira nekuburitswa kwega kwega kushandisa zvirinani maCSS machinjiro epasi rose theme masitayipi, ega ega, uye kunyange zvishandiso. Isu tinopa akawanda emhando dzakasiyana dzemavara, mafonti masitayipi, uye nezvimwe :rootpamwero wekushandisa chero kupi. Pazvikamu uye zvekushandisa, CSS madhiri anotariswa kukirasi yakakodzera uye anogona kugadziridzwa zviri nyore.
Shandisa chero shanduko yedu yepasi rose:root kunyora masitayera matsva. CSS variables anoshandisa var(--bs-variableName)syntax uye anogona kugarwa nhaka nevana zvinhu.
.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);
}Pfuura pasi rose, chikamu, kana utility kirasi zvinosiyana kuti ugadzirise Bootstrap sezvaunoda. Hapana chikonzero chekuzivisa zvakare mutemo wega wega, ingori itsva shanduko kukosha.
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;
}Nyowani muBootstrap 5, zvishandiso zvedu zvave kugadzirwa neyedu Utility API . Isu takaivaka semepu-yakazara Sass mepu inogona kukurumidza uye nyore kugadzirisa. Hazvina kumbobvira zvave nyore kuwedzera, kubvisa, kana kugadzirisa chero makirasi ekushandisa. Ita kuti zvishandiso zvipindure, wedzera pseudo-kirasi akasiyana, uye uvape mazita etsika.
Dzidza zvakawanda nezvezvishandiso Ongorora zvakagadzirirwa zvikamu
// 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,
)
)
);
Wedzera zviri nyore zvinobatika zvakavanzika zvinhu, modals uye offcanvas menyu, popovers uye matipi ezvishandiso, uye nezvimwe zvakawanda, zvese pasina jQuery. JavaScript muBootstrap ndeyeHTML-yekutanga, zvinoreva kuti kuwedzera plugins kuri nyore sekuwedzera datahunhu. Unoda kumwe kutonga? Batanidza mapulagi ega ega zvakarongwa.
Sei uchinyora mamwe JavaScript iwe uchigona kunyora HTML? Anenge ese eBootstrap's JavaScript plugins ane yekutanga-kirasi data API, ichikubvumidza iwe kushandisa JavaScript nekungowedzera datahunhu.
<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>
Dzidza zvakawanda nezveJavaScript yedu semamodule uye uchishandisa programmatic API .
Bootstrap inoratidzira gumi nemaviri plugins iwe yaunogona kudonhedza mune chero chirongwa. Zvidonhe pamwe chete, kana sarudza iwo aunoda chete.
Bootstrap Icons ndiyo yakavhurika sosi SVG icon raibhurari ine anopfuura 1,500 glyphs, ine zvimwe zvakawedzerwa kuburitswa kwese. Iwo akagadzirirwa kushanda mune chero chirongwa, kunyangwe iwe uchishandisa Bootstrap pachayo kana kwete. Zvishandise seSVGs kana icon fonts - ese ari maviri sarudzo anokupa iwe vector kuyera uye nyore kugadzirisa kuburikidza neCSS.
Tora Bootstrap kune inotevera nhanho ine premium themes kubva kune yepamutemo Bootstrap Themes musika . Madingindira akavakirwa paBootstrap seayo akawedzera masisitimu, akapfuma nezvinhu zvitsva nemapulagi, zvinyorwa, uye maturusi ekuvaka ane simba.
