Inamandla, iyanda, kwaye inophawu olupakishwe ngaphambili lwezixhobo zesixhobo. Yakha kwaye wenze ngokwezifiso nge-Sass, sebenzisa inkqubo yegridi eyakhiwe kwangaphambili kunye namalungu, kwaye wenze iiprojekthi ziphile ngeeplagi ezinamandla zeJavaScript.
Okwangoku v5.2.1 · Khuphela · v4.6.x amaxwebhu · Konke ukhupho
Tsibela ngqo kwisakhiwo ngeBootstrap-sebenzisa i-CDN, yifake ngomphathi wephakheji, okanye ukhuphele ikhowudi yomthombo.
Faka umthombo we-Bootstrap weSass kunye neefayile zeJavaScript nge-npm, iRubyGems, uMqambi, okanye iMeteor. Ufakelo olulawulwa yiPakethi alubandakanyi maxwebhu okanye imibhalo yethu epheleleyo yokwakha. Unokusebenzisa irepo yethu yetemplate yenpm ukuvelisa ngokukhawuleza iprojekthi yeBootstrap nge-npm.
npm install [email protected]gem install bootstrap -v 5.2.1Funda amaxwebhu ethu ofakelo ngolwazi oluthe kratya kunye nabaphathi bephakheji abongezelelweyo.
Xa ufuna kuphela ukubandakanya i-Bootstrap eqokelelweyo ye-CSS okanye i-JS, ungasebenzisa jsDelivr . Yibone isebenza ngesiqalo sethu esilula esikhawulezayo , okanye ukhangele imizekelo ukuze uqalise iprojekthi yakho elandelayo. Unokukhetha ukubandakanya iPopper kunye ne-JS yethu ngokwahlukeneyo .
<!-- 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>
I-Bootstrap isebenzisa i-Sass kwimodyuli kunye ne-architecture enokwenzeka ngokwezifiso. Ngenisa kuphela amacandelo owafunayo, yenza iinketho zehlabathi ezifana ne-gradients kunye nezithunzi, kwaye ubhale i-CSS yakho ngezinto eziguquguqukayo, iimephu, imisebenzi, kunye nemixube.
Ngenisa icwecwe lesitayile libe linye kwaye uphume uye kugqatso nalo lonke uphawu lweCSS yethu.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Funda ngakumbi malunga neenketho zethu ze-Sass zehlabathi jikelele .
Eyona ndlela ilula yokwenza iBootstrap-ibandakanya kuphela iCSS oyifunayo.
// 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 ngakumbi malunga nokusebenzisa i-Bootstrap nge-Sass .
I-Bootstrap 5 iyavela ngokhupho ngalunye ukuze kusetyenziswe ngcono izinto eziguquguqukayo zeCSS kwizitayile zemixholo yehlabathi, izinto ezizimeleyo, kunye nezinto eziluncedo. Sibonelela ngeendidi ezininzi zezinto eziguquguqukayo zemibala, izimbo zefonti, nangaphezulu :rootkwinqanaba lokusetyenziswa naphi na. Kumacandelo kunye nezinto eziluncedo, izinto eziguquguqukayo zeCSS zifakwe kwiklasi efanelekileyo kwaye zinokulungiswa ngokulula.
Sebenzisa naziphi na iinguqu zethu zehlabathi:root ukubhala izimbo ezitsha. Izinto eziguquguqukayo zeCSS zisebenzisa i- var(--bs-variableName)syntax kwaye zinokuzuzwa ngabantwana.
.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);
}Qhuba ngaphezulu kwehlabathi, icandelo, okanye usetyenziso oluguquguqukayo lweklasi ukwenza iBootstrap ngendlela othanda ngayo. Akukho mfuneko yokuphinda uchaze umthetho ngamnye, ixabiso elitsha eliguquguqukayo.
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;
}Entsha kwi-Bootstrap 5, izixhobo zethu ngoku zenziwe yi- Utility API yethu . Siye sayakha njengemephu ye-Sass egcweleyo enokuthi ikhawuleze kwaye ilungiswe ngokulula. Akuzange kube lula ukongeza, ukususa, okanye ukulungisa naziphi na iiklasi eziluncedo. Yenza izinto eziluncedo ziphendule, yongeza ukwahluka kodidi lwe-pseudo, kwaye ubanike amagama esiko.
Funda ngakumbi malunga nezinto eziluncedo Phonononga amalungu alungelelanisiweyo
// 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,
)
)
);
Yongeza ngokulula izinto ezifihliweyo eziguquguqukayo, iimodyuli kunye neemenyu ze-offcanvas, iipopovers kunye neengcebiso zesixhobo, kunye nokunye okuninzi-konke ngaphandle kwejQuery. IJavaScript kwiBootstrap yiHTML-yokuqala, okuthetha ukuba ukongeza iiplagi zilula njengokongeza dataiimpawu. Ngaba ufuna ulawulo olungakumbi? Bandakanya iiplagi zomntu ngamnye ngokwenkqubo.
Kutheni ubhala ngakumbi iJavaScript xa ukwazi ukubhala iHTML? Phantse zonke iiplagi ze-Bootstrap zeJavaScript zifaka i-API yedatha yeklasi yokuqala, ekuvumela ukuba usebenzise iJavaScript ngokongeza dataiimpawu.
<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 ngakumbi malunga neJavaScript yethu njengeemodyuli kunye nokusebenzisa inkqubo ye-API .
I-Bootstrap ine-plugins ezilishumi elinambini onokuthi uziwise kuyo nayiphi na iprojekthi. Zibeke zonke ngaxeshanye, okanye ukhethe ezo uzifunayo.
Iimpawu zeBootstrap yimithombo evulekileyo yelayibrari ye-SVG yethala leencwadi elineeglyphs ezingaphezulu kwe-1,500, kunye nokongezwa kokhupho ngalunye. Ziyilelwe ukusebenza kuyo nayiphi na iprojekthi, nokuba usebenzisa iBootstrap ngokwayo okanye hayi. Zisebenzise njengeeSVGs okanye iifonti ze icon-zombini iinketho zikunika ukukala kwevektha kunye nokwenza lula ngeCSS.
Thatha iBootstrap uye kwinqanaba elilandelayo ngemixholo yeprimiyamu evela kwindawo yentengiso yeBootstrap Themes esemthethweni . Imixholo yakhelwe kwiBootstrap njengezakhelo ezandisiweyo, ezityebileyo ezinamacandelo amatsha kunye neeplagi, amaxwebhu, kunye nezixhobo zokwakha ezinamandla.
