Tsibela kumxholo ophambili
Check
Entsha kwi-v5.2 Izinto eziguquguqukayo zeCSS, i-offcanvas ephendulayo, izinto ezintsha eziluncedo, kunye nokunye! I-Bootstrap

Yakha ngokukhawuleza, iisayithi eziphendulayo ngeBootstrap

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.

npm i [email protected]
Funda amaxwebhu

Okwangoku v5.2.1 · Khuphela · v4.6.x amaxwebhu · Konke ukhupho

Qalisa nangayiphi na indlela ofuna ngayo

Tsibela ngqo kwisakhiwo ngeBootstrap-sebenzisa i-CDN, yifake ngomphathi wephakheji, okanye ukhuphele ikhowudi yomthombo.

Funda amaxwebhu ofakelo

Faka ngomphathi wepakethe

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

Funda amaxwebhu ethu ofakelo ngolwazi oluthe kratya kunye nabaphathi bephakheji abongezelelweyo.

Bandakanya nge-CDN

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>

Funda izikhokelo zethu zokuqalisa

Fumana umtsi wokubandakanya iifayile zomthombo weBootstrap kwiprojekthi entsha enezikhokelo zethu ezisemthethweni.

Webpack Ipasile Vite

Yenza ngokwezifiso yonke into ngeSass

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.

Funda ngakumbi malunga nokwenza ngokwezifiso

Bandakanya zonke iiSass zeBootstrap

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 .

Bandakanya into oyifunayo

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 .

Yakha kwaye wandise ngexesha lokwenyani ngezinto eziguquguqukayo zeCSS

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.

Funda ngakumbi malunga neenguqu zeCSS

Ukusebenzisa iinguqu zeCSS

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

Ukwenza ngokwezifiso ngeCSS variables

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

Amacandelo, dibana ne-Utility API

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

Yenza ngokwezifiso amalungu ngokukhawuleza
// 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,
    )
  )
);

Iiplagi zeJavaScript ezinamandla ngaphandle kwejQuery

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.

Funda ngakumbi ngeBootstrap JavaScript

Uphawu lophawu lwedatha API

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 .

Iseti ebanzi yeeplagi

I-Bootstrap ine-plugins ezilishumi elinambini onokuthi uziwise kuyo nayiphi na iprojekthi. Zibeke zonke ngaxeshanye, okanye ukhethe ezo uzifunayo.

Isilumkiso

Bonisa kwaye ufihle imiyalezo yesilumkiso kubasebenzisi bakho.

Iqhosha

Lawula imo esebenzayo yamaqhosha.

I-Carousel

Yongeza imiboniso yezilayidi kulo naliphi na iphepha, kuquka nenkxaso ye-crossfade.

Ukuwa

Yandisa kwaye uchithe iindawo zomxholo, okanye udale ii-accordions.

Lahla phantsi

Yenza iimenyu zamakhonkco, izenzo, iifom, kunye nokunye.

Modal

Yongeza iingxoxo eziguquguqukayo neziphendulayo kwiprojekthi yakho.

I-offcanvas

Yakha kwaye uguqule iibar ezisecaleni ezifihlakeleyo kulo naliphi na iphepha.

Ipopover

Yenza uqweqwe oluqhelekileyo. Yakhelwe kwiPopper.

Scrollspy

Hlaziya ngokuzenzekela amakhonkco e-nav asebenzayo asekelwe kuskrola wephepha.

Ithebhu

Vumela amalungu e-Bootstrap nav ukuba aguqule imixholo.

Ithowusti

Bonisa kwaye ufihle izaziso kwiindwendwe zakho.

Ingcebiso yesixhobo

Buyisela iingcebiso zesixhobo sokujonga isikhangeli ngezinye zesiqhelo. Yakhelwe kwiPopper.

Yenze eyeyakho ngee-Icons zeBootstrap

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.

Fumana ii-Icons zeBootstrap

Iimpawu zeBootstrap

Yenze ibe yeyakho ngemixholo yeBootstrap esemthethweni

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.

Jonga imixholo yeBootstrap

Imixholo yeBootstrap