Tlula eka nhlokomhaka-nkulu
Check
Swintshwa eka v5.2 Swilo leswi cinca-cincaka swa CSS, offcanvas leyi hlamulaka, switirhisiwa leswintshwa, na swin’wana! Xirhendzevutana xa xirhendzevutani

Aka tisayiti leti hatlisaka, leti hlamulaka hi Bootstrap

Xitirhisiwa xa le mahlweni lexi nga ni matimba, lexi andlariweke ni lexi nga ni swihlawulekisi swo tala. Aka na ku lulamisa hi Sass, tirhisa sisiteme ya gridi leyi akiweke ka ha ri emahlweni na swiphemu, na ku tisa tiphurojeke evuton’wini hi ti-plugin ta matimba ta JavaScript.

npm i [email protected]
Hlaya ti docs

Sweswi v5.2.1 · Download · v4.6.x docs · Hinkwaswo leswi humesiweke

Sungula hi ndlela yihi na yihi leyi u yi lavaka

Tlula kunene eka ku aka hi Bootstrap—tirhisa CDN, yi nghenisa hi ku tirhisa mufambisi wa tiphasela, kumbe u kopa khodi ya xihlovo.

Hlaya ti-doc ta ku nghenisa

Nghenisa hi ku tirhisa mufambisi wa tiphasela

Nghenisa tifayela ta Sass na JavaScript ta xihlovo xa Bootstrap hi ku tirhisa npm, RubyGems, Composer, kumbe Meteor. Ku nghenisa loku lawuriwaka hi tiphasela a ku katsi matsalwa kumbe switshuriwa swa hina swo aka hi ku helela. U nga ha tlhela u tirhisa repo ya hina ya xifaniso xa npm ku hatlisa u tumbuluxa phurojeke ya Bootstrap hi ku tirhisa npm.

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

Hlaya ti-install docs ta hina ku kuma vuxokoxoko byo tala na vafambisi va tiphasela to engetela.

Katsa hi ku tirhisa CDN

Loko u lava ntsena ku katsa CSS kumbe JS leyi hlengeletiweke ya Bootstrap, u nga tirhisa jsDelivr . See it in action with our simple quick start , kutani u languta swikombiso ku jumpstart phurojeke ya wena leyi landzelaka. U nga ha tlhela u hlawula ku katsa Popper na JS ya hina hi ku hambana .

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

Hlaya swiletelo swa hina swo sungula

Kuma ku tlula eka ku katsa tifayela ta xihlovo ta Bootstrap eka phurojeke leyintshwa na swiletelo swa hina swa ximfumo.

Xipaci xa Webu Phasele Vite

Customize hinkwaswo hi Sass

Bootstrap yi tirhisa Sass eka xivumbeko xa modular na lexi nga cinciwaka. Nghenisa ntsena swiphemu leswi u swi lavaka, pfumelela swihlawulekisi swa misava hinkwayo swo fana na tigradient na mindzhuti, naswona tsala CSS ya wena hi swilo swa hina leswi cinca-cincaka, mimepe, mintirho, na mixins.

Dyondza swo tala hi ku endla swilo hi ku landza swilaveko swa wena

Katsa hinkwaswo swa Bootstrap's Sass

Nghenisa xitayili xin’we kutani u huma eka mimphikizano leyi nga ni xivumbeko xin’wana ni xin’wana xa CSS ya hina.

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

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

Dyondza swo tala hi swihlawulekisi swa hina swa misava hinkwayo swa Sass .

Katsa leswi u swi lavaka

Ndlela yo olova yo endla leswaku Bootstrap yi va ya wena—katsa ntsena CSS leyi u yi lavaka.

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

Dyondza swo tala hi ku tirhisa Bootstrap na Sass .

Aka no andlala hi nkarhi wa xiviri hi swilo leswi cinca-cincaka swa CSS

Bootstrap 5 yi le ku hluvukeni na nkandziyiso wun’wana na wun’wana ku tirhisa ku antswa swilo leswi cinca-cincaka swa CSS eka switayele swa nhlokomhaka ya misava hinkwayo, swiphemu swa munhu hi xiyexe, hambi ku ri switirhisiwa. Hi nyika makume ya swilo leswi cinca-cincaka swa mihlovo, switayele swa fonto ni swin’wana eka :rootxiyimo lexi tirhisiwaka kun’wana ni kun’wana. Eka swiphemu na switirhisiwa, swilo leswi cinca-cincaka swa CSS swi ringanisiwa eka tlilasi leyi faneleke naswona swi nga cinciwa hi ku olova.

Dyondza swo tala hi swilo leswi cinca-cincaka swa CSS

Ku tirhisa swilo leswi cinca-cincaka swa CSS

Tirhisa xin’wana na xin’wana xa swilo swa hina leswi cinca-cincaka swa misava hinkwayo:root ku tsala switayele leswintshwa. Swilo leswi cinca-cincaka swa CSS swi tirhisa var(--bs-variableName)xivumbeko xa marito naswona swi nga dya ndzhaka hi swiaki swa vana.

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

Ku endla hi ku tirhisa swilo leswi cinca-cincaka swa CSS

Tlula swilo leswi cinca-cincaka swa misava hinkwayo, xiphemu, kumbe tlilasi ya vukorhokeri ku lulamisa Bootstrap ntsena hi ndlela leyi u yi tsakelaka ha yona. A ku na xilaveko xo tlhela u tivisa nawu wun’wana ni wun’wana, ntsena nkoka lowuntshwa lowu cinca-cincaka.

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

Swiphemu, hlangana na API ya Vukorhokeri

Leswintshwa eka Bootstrap 5, switirhisiwa swa hina sweswi swi endliwe hi API ya hina ya Switirhisiwa . Hi yi akile tanihi mepe wa Sass lowu teleke hi swilo leswi nga endliwaka hi ku hatlisa ni hi ku olova. A swi si tshama swi olova ku engetela, ku susa kumbe ku cinca titlilasi tihi na tihi ta vukorhokeri. Endla leswaku switirhisiwa swi hlamula, engetela swihlawulekisi swa tlilasi ya vuxisi, naswona u swi nyika mavito ya ntolovelo.

Dyondza swo tala hi switirhisiwa swa vukorhokeri Kambisisa swiphemu leswi endleriweke wena

Hi ku hatlisa endla leswaku swiphemu swi va leswi u swi lavaka
// 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,
    )
  )
);

Ti-plugin ta JavaScript ta matimba leti nga riki na jQuery

Hi ku olova engetela swiaki leswi fihliweke leswi cinca-cincaka, ti-modal ni timenyu ta le handle ka canvas, ti-popover ni switsundzuxo swa switirhisiwa, ni swin’wana swo tala—hinkwaswo handle ka jQuery. JavaScript eka Bootstrap i HTML-yo sungula, leswi vulaka leswaku ku engetela ti-plugin swa olova ku fana ni ku engetela dataswihlawulekisi. Xana u lava ku lawula loku engetelekeke? Katsa ti-plugin ha yin’we-yin’we hi ndlela ya nongonoko.

Dyondza swo tala hi Bootstrap JavaScript

API ya xihlawulekisi xa data

Ha yini u tsala JavaScript yo tala loko u kota ku tsala HTML? Kwalomu ka ti-plugin hinkwato ta JavaScript ta Bootstrap ti ni API ya data ya xiyimo xo sungula, leswi ku pfumelelaka ku tirhisa JavaScript ntsena hi ku engetela dataswihlawulekisi.

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

Dyondza swo tala hi JavaScript ya hina tanihi mimojula ni ku tirhisa API ya phurogireme .

Seti leyi heleleke ya ti-plugin

Bootstrap yi na khume-mbirhi wa ti-plugin leti u nga ti hoxaka eka phurojeke yihi na yihi. Ti hoxe hinkwato hi nkarhi wun’we, kutani u hlawula ntsena leti u ti lavaka.

Lemukisa

Kombisa no fihla marungula ya xitsundzuxo eka vatirhisi va wena.

Konopa

Hi ndlela ya nongonoko lawula xiyimo lexi tirhaka xa swikomba-nkarhi.

Xigwitsirisi

Engetelani swikombiso swa swilayidi eka tluka rihi na rihi, ku katsa ni nseketelo wa crossfade.

Ku wa

Andlala ni ku pfotlosa tindhawu ta leswi nga endzeni, kutani u endla ti- accordion.

Ku rhelela ehansi

Endla timenyu ta swihlanganisi, swiendlo, tifomo ni swin’wana.

Modal

Engetelani mimbulavurisano leyi cinca-cincaka ni leyi hlamulaka eka phurojeke ya wena.

Ehandle ka canvas

Aka ni ku cinca-cinca ti-sidebar leti fihliweke eka tluka rihi na rihi.

Popover

Endla swifunengeto swa ntolovelo. Yi akiwe ehenhla ka Popper.

Xiphepherhele xa swiphepherhele

Hi ku tisungulela pfuxeta swihlanganisi swa nav leswi tirhaka hi ku ya hi ku rhendzeleka ka pheji.

Tab

Pfumelela swiphemu swa Bootstrap nav ku cinca-cinca swilo leswi nga endzeni.

Omisa

Kombisa ni ku fihla switiviso eka vaendzi va wena.

Xitsundzuxo xa switirhisiwa

Cinca switsundzuxo swa switirhisiwa swa browser hi leswi endleriweke wena. Yi akiwe ehenhla ka Popper.

Yi endle leswaku yi va ya wena hi Swifaniso swa Bootstrap

Bootstrap Icons i layiburari ya swifaniso swa SVG ya xihlovo lexi pfulekeke leyi nga na ku tlula 1,500 wa ti-glyph, na swin’wana leswi engeteriweke nkandziyiso wun’wana na wun’wana. Ti endleriwe ku tirha eka phurojeke yihi na yihi, hambi u tirhisa Bootstrap hi yoxe kumbe e-e. Ti tirhise tanihi ti-SVG kumbe tifonto ta swifaniso—swihlawulekisi leswi haswimbirhi swi ku nyika ku ringanisa ka vector ni ku cinca-cinca ko olova hi ku tirhisa CSS.

Kuma Swifaniso swa Bootstrap

Swifaniso swa Bootstrap

Endla leswaku swi va swa wena hi Bootstrap Themes ya ximfumo

Yisa Bootstrap eka xiyimo lexi landzelaka hi tinhlokomhaka ta xiyimo xa le henhla ku suka eka makete wa ximfumo wa Tinhlokomhaka ta Bootstrap . Titheme ti akiwile eka Bootstrap tanihi swivumbeko swa tona leswi andlariweke, leswi fuweke hi swiphemu leswintshwa na ti-plugin, matsalwa, na switirhisiwa swa matimba swo aka.

Browse Titheme ta Bootstrap

Tinhlokomhaka ta Bootstrap