Yeqela kokuqukethwe okuyinhloko
Check
Okusha ku-v5.2 Okuguquguqukayo kwe-CSS, ama-offcanvas asabelayo, izinsiza ezintsha, nokuningi! I-Bootstrap

Yakha amasayithi asheshayo, asabelayo nge-Bootstrap

Inamandla, iyanwebeka, futhi inesici esigcwele ikhithi yamathuluzi engaphambili. Yakha futhi wenze ngendlela oyifisayo nge-Sass, sebenzisa isistimu yegridi eyakhelwe ngaphambili kanye nezingxenye, futhi uphilise amaphrojekthi ngama-plugin anamandla e-JavaScript.

npm i [email protected]
Funda amadokhumenti

Okwamanje v5.2.1 · Landa · v4.6.x amadokhumenti · Konke ukukhishwa

Qalisa nganoma iyiphi indlela oyifunayo

Gxumela ngqo ekwakheni nge-Bootstrap—sebenzisa i-CDN, yifake ngomphathi wephakheji, noma landa ikhodi yomthombo.

Funda amadokhumenti okufaka

Faka ngesiphathi sephakheji

Faka amafayela omthombo we-Bootstrap we-Sass kanye ne-JavaScript usebenzisa i-npm, i-RubyGems, i-Composer, noma i-Meteor. Ukufakwa okuphethwe kwephakheji akubandakanyi amadokhumenti noma izikripthi zethu zokwakha ezigcwele. Ungasebenzisa futhi i- repo yethu yesifanekiso se-npm ukuze ukhiqize ngokushesha iphrojekthi ye-Bootstrap nge-npm.

npm install [email protected]
gem install bootstrap -v 5.2.1

Funda amadokhumenti ethu okufaka ukuze uthole ulwazi olwengeziwe kanye nabaphathi bephakheji abengeziwe.

Faka nge-CDN

Uma udinga kuphela ukufaka i-CSS ehlanganisiwe ye-Bootstrap noma i-JS, ungasebenzisa jsDelivr . Yibone isebenza ngesiqalo sethu esisheshayo esilula , noma upheqa izibonelo ukuze uqale iphrojekthi yakho elandelayo. Ungaphinda ukhethe ukufaka i-Popper kanye ne-JS yethu ngokuhlukana .

<!-- 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>

Funda imihlahlandlela yethu yokuqalisa

Thola ukweqa okubandakanya amafayela omthombo we-Bootstrap kuphrojekthi entsha enemihlahlandlela yethu esemthethweni.

I-Webpack Iphasela Vite

Enza ngendlela oyifisayo yonke into nge-Sass

I-Bootstrap isebenzisa i-Sass ngokwakhiwa kwemodular kanye nokwenza ngokwezifiso. Ngenisa kuphela izingxenye ozidingayo, nika amandla izinketho zomhlaba jikelele njengama-gradients nezithunzi, bese ubhala i-CSS yakho ngezinto eziguquguqukayo, amamephu, imisebenzi, nezixube.

Funda kabanzi mayelana nokwenza ngendlela oyifisayo

Faka yonke i-Sass ye-Bootstrap

Ngenisa ishidi lesitayela elilodwa bese uya emijahweni ngazo zonke izici ze-CSS yethu.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Funda kabanzi mayelana nezinketho zethu zomhlaba jikelele ze-Sass .

Faka okudingayo

Indlela elula yokwenza i-Bootstrap ngokwezifiso—faka kuphela i-CSS oyidingayo.

// 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";

Funda kabanzi mayelana nokusebenzisa i-Bootstrap nge-Sass .

Yakha futhi unwebe ngesikhathi sangempela ngezinto eziguquguqukayo ze-CSS

I-Bootstrap 5 iyavela ngokukhishwa ngakunye ukuze kusetshenziswe kangcono okuguquguqukayo kwe-CSS kwezitayela zetimu yomhlaba wonke, izingxenye ngazinye, ngisho nezinsiza. Sihlinzeka ngeziguquko eziningi zemibala, izitayela zefonti, nokunye okwengeziwe :rootezingeni ukuze kusetshenziswe noma yikuphi. Ezingxenyeni nasezinsizeni, okuguquguqukayo kwe-CSS kukhokhwa ekilasini elifanele futhi kungashintshwa kalula.

Funda kabanzi mayelana nokuguquguquka kwe-CSS

Ukusebenzisa okuguquguqukayo kwe-CSS

Sebenzisa noma yiziphi izinguquko zethu zomhlaba wonke:root ukuze ubhale izitayela ezintsha. Okuguquguqukayo kwe-CSS kusebenzisa i- var(--bs-variableName)syntax futhi kungazuzwa izakhi zezingane.

.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);
}

Ukwenza ngokwezifiso nge-CSS variables

Khipha okuguquguqukayo komhlaba jikelele, okuyingxenye, noma kwensiza ukuze wenze i-Bootstrap ngendlela othanda ngayo. Asikho isidingo sokumemezela kabusha umthetho ngamunye, inani elisha elihlukile.

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;
}

Izingxenye, hlangabezana ne-Utility API

Okusha ku-Bootstrap 5, izinsiza zethu sezikhiqizwa i- Utility API yethu . Sakhe njengemephu ye-Sass egcwele isici engenziwa ngokushesha futhi kalula. Akukaze kube lula ukungeza, ukususa, noma ukulungisa noma yiziphi izigaba zosizo. Yenza izinsiza ziphendule, engeza okuhlukile kwesigaba-mbumbulu, futhi uzinikeze amagama angokwezifiso.

Funda kabanzi mayelana nezinsiza Hlola izingxenye ezenziwe ngezifiso

Yenza ngokwezifiso izingxenye ngokushesha
// 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,
    )
  )
);

Ama-plugin anamandla we-JavaScript ngaphandle kwe-jQuery

Engeza kalula izinto ezifihliwe eziguqulekayo, amamodali namamenyu e-offcanvas, ama-popover namathiphu wamathuluzi, nokunye okuningi—konke ngaphandle kwe-jQuery. I-JavaScript ku-Bootstrap i-HTML-first, okusho ukuthi ukwengeza ama-plugin kulula njengokwengeza dataizimfanelo. Udinga ukulawula okwengeziwe? Faka ama-plugin angawodwana ngokohlelo.

Funda kabanzi mayelana ne-Bootstrap JavaScript

I-API yesibaluli sedatha

Kungani ubhala i-JavaScript eyengeziwe lapho ukwazi ukubhala i-HTML? Cishe wonke ama-plugin e-Bootstrap's JavaScript afaka i-API yedatha yekilasi lokuqala, ekuvumela ukuthi usebenzise i-JavaScript ngokungeza dataizibaluli.

<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>

Funda kabanzi mayelana ne - JavaScript yethu njengamamojula nokusebenzisa i-API yohlelo .

Isethi ephelele yama-plugin

I-Bootstrap ifaka ama-plugin ayishumi nambili ongawadedela kunoma iyiphi iphrojekthi. Zifake zonke ngesikhathi esisodwa, noma ukhethe ozidingayo.

Isexwayiso

Bonisa futhi ufihle imilayezo yesixwayiso kubasebenzisi bakho.

Inkinobho

Lawula ngokohlelo isimo esisebenzayo sezinkinobho.

I-Carousel

Engeza imibukiso yesilayidi kunoma yiliphi ikhasi, okuhlanganisa nokusekelwa kwe-crossfade.

Goqa

Nweba futhi ugoqe izindawo zokuqukethwe, noma dala ama-accordion.

Okwehlayo

Dala amamenyu ezixhumanisi, izenzo, amafomu, nokuningi.

I-Modal

Engeza izingxoxo eziguquguqukayo neziphendulayo kuphrojekthi yakho.

I-offcanvas

Yakha futhi uguqule amabha aseceleni afihliwe kunoma yiliphi ikhasi.

I-Popover

Dala imbondela yangokwezifiso. Yakhelwe ku-Popper.

Scrollspy

Buyekeza ngokuzenzakalela izixhumanisi ze-nav ezisebenzayo ngokusekelwe ekuskroleni kwekhasi.

Ithebhu

Vumela izingxenye ze-Bootstrap nav ukuthi ziguqule okuqukethwe.

Ithosi

Bonisa futhi ufihle izaziso kubavakashi bakho.

Ithulithiphu

Shintshanisa amathuluzi esiphequluli uwafake ngokwezifiso. Yakhelwe ku-Popper.

Yenza kube ngokwakho ngezithonjana ze-Bootstrap

I- Bootstrap Icons iwumthombo ovulekile welabhulali yesithonjana se-SVG enama-glyphs angaphezu kuka-1,500, okungezwe okwengeziwe konke ukukhishwa. Zenzelwe ukusebenza kunoma iyiphi iphrojekthi, kungakhathaliseki ukuthi usebenzisa i-Bootstrap ngokwayo noma cha. Wasebenzise njengama-SVG noma amafonti esithonjana—zombili izinketho zikunikeza ukukala kwe-vector nokwenza ngokwezifiso okulula nge-CSS.

Thola Izithonjana ze-Bootstrap

Izithonjana ze-Bootstrap

Kwenze kube eyakho ngezindikimba ezisemthethweni ze-Bootstrap

Thatha i-Bootstrap uye ezingeni elilandelayo ngezindikimba ze-premium ezivela endaweni yemakethe yezindikimba ezisemthethweni ze-Bootstrap . Izindikimba zakhiwe ku-Bootstrap njengezinhlaka zazo ezinwetshiwe, ezinothe ngezinto ezintsha nama-plugin, imibhalo, namathuluzi okwakha anamandla.

Phequlula Izindikimba ze-Bootstrap

Izindikimba ze-Bootstrap