Trɔ yi nya veviwo gbɔ
Check
Yeye le v5.2 me CSS ƒe tɔtrɔwo, offcanvas si ɖoa nya ŋu, dɔwɔnu yeyewo, kple bubuwo! Bootstrap ƒe ƒuƒoƒo

Tu nyatakakadzraɖoƒe siwo wɔa dɔ kabakaba, siwo wɔa dɔ nyuie kple Bootstrap

Dɔwɔnu si ŋu ŋusẽ le, si woate ŋu akeke ɖe enu, eye wòyɔ fũ kple nusiwo le ŋgɔgbe. Tu eye nàtrɔ asi le eŋu kple Sass, zã grid ɖoɖo kple akpa siwo wotu do ŋgɔ, eye nàhe dɔwo ava agbe me kple JavaScript ƒe kpeɖeŋutɔ sẽŋuwo.

npm i [email protected]
Xlẽ nuŋlɔɖiawo

Fifia v5.2.1 · Tsɔe · v4.6.x docs · Nusiwo katã woɖe ɖe go

Dze egɔme le mɔ ɖesiaɖe si nèdi nu

Ti kpo yi xɔtutu me tututu kple Bootstrap—zã CDN la, dae to package manager dzi, alo nàɖe source code la ƒe kɔpi.

Xlẽ installation docs ƒe nuŋlɔɖiwo

De to package manager dzi

De Bootstrap ƒe dzɔtsoƒe Sass kple JavaScript faɛlwo to npm, RubyGems, Composer, alo Meteor dzi. Package managed installs melɔ nuŋlɔɖiwo alo míaƒe xɔtutu ƒe nuŋɔŋlɔ bliboa ɖe eme o. Àteŋu azã míaƒe npm template repo hã atsɔ awɔ Bootstrap dɔ kabakaba to npm dzi.

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

Xlẽ míaƒe installation docs hena nyatakaka bubuwo kple package managers bubuwo.

Tsɔe kpe ɖe eŋu to CDN dzi

Ne ɖeko wòhiã be nàde Bootstrap ƒe CSS alo JS si woƒo ƒu la eme la, àte ŋu azã jsDelivr . Kpɔe le dɔwɔwɔ me kple míaƒe gɔmedzedze kabakaba bɔbɔe , alo ʋu kpɔɖeŋuawo be nàdze wò dɔ si gbɔna gɔme. Àte ŋu atiae hã be yeade Popper kple míaƒe JS ɖe vovo .

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

Xlẽ míaƒe mɔfiame siwo ku ɖe alesi nàdze dɔa gɔmee ŋu

Na titri le Bootstrap ƒe dzɔtsoƒe faɛlwo dede dɔ yeye aɖe me kple míaƒe mɔfiame siwo dziɖuɖua ɖo la ŋu.

Nyatakakadzraɖoƒe ƒe agbalẽvi Nubabla Vite

Trɔ asi le nusianu ŋu kple Sass

Bootstrap zãa Sass hena modular kple customizable xɔtuɖaŋu. Tsɔ akpa siwo nèhiã la ko va eme, na xexeame katã ƒe tiatiawɔnuwo abe gradients kple shadows ene nawɔ dɔ, eye nàŋlɔ wò ŋutɔ wò CSS kple míaƒe tɔtrɔwo, anyigbatatawo, dɔwɔwɔwo, kple mixins.

Srɔ̃ nu geɖe tso asitɔtrɔ le nɔnɔmewo ŋu ŋu

De Bootstrap ƒe Sass la katã eme

Tsɔ atsyãgbalẽ ɖeka va eye nàdzo ayi duɖimekekeawo dzi kple míaƒe CSS ƒe nɔnɔme ɖesiaɖe.

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

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

Srɔ̃ nu geɖe tso míaƒe xexeame katã ƒe Sass tiatiawɔblɔɖewo ŋu .

Tsɔ nusiwo nèhiã la kpe ɖe eŋu

Mɔ bɔbɔetɔ kekeake si dzi nàto atrɔ asi le Bootstrap ŋu—CSS si nèhiã la koe nàde eme.

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

Srɔ̃ nu geɖe tso Bootstrap zazã kple Sass ŋu .

Tu eye nàkekee ɖe enu le ɣeyiɣi ŋutɔŋutɔ me kple CSS tɔtrɔwo

Bootstrap 5 le tɔtrɔm kple dodo ɖesiaɖe be wòazã CSS ƒe tɔtrɔwo nyuie wu na xexeame katã ƒe tanya ƒe atsyãwo, akpa ɖekaɖekawo, kple dɔwɔnuwo gɔ̃ hã. Míenaa tɔtrɔ gbogbo aɖewo na amadedewo, ŋɔŋlɔdzesiwo ƒe atsyãwo, kple bubuwo le :rootɖoɖo aɖe nu be woazã le afi sia afi. Le akpawo kple dɔwɔnuwo dzi la, woɖoa CSS tɔtrɔwo ɖe hatsotso si sɔ gbɔ eye woateŋu atrɔ asi le wo ŋu bɔbɔe.

Srɔ̃ nu geɖe tso CSS ƒe tɔtrɔwo ŋu

CSS ƒe tɔtrɔwo zazã

Zã míaƒe xexeame katã ƒe :roottɔtrɔwo dometɔ ɖesiaɖe nàtsɔ aŋlɔ atsyã yeyewo. CSS ƒe tɔtrɔwo zãa var(--bs-variableName)nyagɔmeɖegbalẽ eye woateŋu anyi wo dome to ɖeviwo ƒe akpawo dzi.

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

Trɔtrɔ ɖe nɔnɔmewo ŋu to CSS ƒe tɔtrɔwo dzi

Trɔ asi le xexeame katã, akpa, alo dɔwɔnu ƒe hatsotso ƒe tɔtrɔwo ŋu be nàtrɔ asi le Bootstrap ŋu alesi tututu nèdi. Mehiã be woagbugbɔ aɖe gbeƒã se ɖesiaɖe o, ɖeko asixɔxɔ yeye si trɔna.

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

Kpeɖeŋutɔawo, do go Utility API la gbɔ

Yeye le Bootstrap 5 me, míaƒe dɔwɔnuwo nye esiwo míaƒe Dɔwɔnu API wɔ fifia . Míetue abe Sass ƒe anyigbatata si me nu geɖe le si woate ŋu atrɔ asi le kabakaba eye wòanɔ bɔbɔe ene. Menɔ bɔbɔe nenema gbegbe kpɔ be woatsɔ dɔwɔnu ƒe hatsotso aɖeke akpe ɖe eŋu, aɖee ɖa, alo atrɔ asi le eŋu o. Na utilities nawɔ dɔ nyuie, tsɔ pseudo-class variants kpee, eye nàna ŋkɔ tɔxɛwo wo.

Srɔ̃ nu geɖe tso nuzazãwo ŋu Dzro akpa siwo wowɔ ɖe ɖoɖo nu me

Trɔ asi le akpa vovovoawo ŋu kaba
// 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,
    )
  )
);

JavaScript ƒe kpeɖeŋutɔ sẽŋu siwo me jQuery mele o

Tsɔ nu ɣaɣla siwo woate ŋu atrɔ, modals kple offcanvas menus, popovers kple dɔwɔnu ƒe aɖaŋuɖoɖowo, kple bubu geɖewo kpee bɔbɔe—wo katã jQuery manɔmee. JavaScript le Bootstrap me nye HTML-gbãtɔ, si fia be plugins tsɔtsɔ kpe ɖe eŋu le bɔbɔe abe datanɔnɔmewo tsɔtsɔ kpee ene. Èhiã dziɖuɖu geɖe wua? De plugin ɖekaɖekawo eme le ɖoɖowɔɖi nu.

Srɔ̃ nu geɖe tso Bootstrap JavaScript ŋu

Nyatakaka ƒe nɔnɔme API

Nukatae nàŋlɔ JavaScript geɖe wu evɔ àte ŋu aŋlɔ HTML? Bootstrap ƒe JavaScript ƒe kpeɖeŋutɔawo katã kloe nye nyatakaka API si le ɖoƒe gbãtɔ, si wɔnɛ be nàte ŋu azã JavaScript to datanɔnɔmewo tsɔtsɔ kpee ko me.

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

Srɔ̃ nu geɖe tso míaƒe JavaScript ŋu abe modules ene kple programmatic API zazã ŋu .

Plugins ƒe ƒuƒoƒo bliboa

Bootstrap la ɖea plugins wuieve siwo nàte ŋu atsɔ ade dɔ ɖesiaɖe me la fiana. Tsɔ wo katã de eme zi ɖeka, alo tia esiwo nèhiã la ko.

Ŋute

Fia nuxlɔ̃ame gbedasiwo na wò zãlawo eye nàɣla wo.

Awunugbui

Ðoɖowɔɖi dzi ɖu nɔnɔme si le dɔ wɔm dzi na abɔtawo.

Carousel ƒe ƒuƒoƒo

Tsɔ slideshowwo kpe ɖe axa ɖesiaɖe ŋu, si me crossfade ƒe kpekpeɖeŋu hã le.

Dze anyi

Keke emenyawo ƒe akpa aɖewo ɖe enu eye nàgbã wo, alo nàwɔ accordionwo.

Nusiwo wotsɔna ƒua gbe

Wɔ kadodowo, nuwɔnawo, agbalẽviwo, kple bubuwo ƒe menuwo.

Modal ƒe nɔnɔme

Tsɔ dzeɖonya siwo te ŋu trɔna ɖe nɔnɔmewo ŋu eye wowɔa dɔ nyuie kpe ɖe wò dɔa ŋu.

Offcanvas ƒe akpa aɖe

Tu axadzinu ɣaɣlawo eye nàtrɔ wo ɖe axa ɖesiaɖe dzi.

Ahedada

Wɔ nusiwo wowɔ ɖe ɖoɖo nu. Wotue ɖe Popper dzi.

Agbalẽxatsaxatsa

Trɔ asi le nav kadodo siwo le dɔ wɔm ŋu le ɖokuiwò si le axaa ƒe ʋuʋu nu.

Tab ƒe akpa aɖe

Ðe mɔ na Bootstrap nav ƒe akpawo be woatrɔ asi le emenyawo ŋu.

Ɖo dze

Fia nyatakakawo eye nàɣla wo na wò amedzrowo.

Dɔwɔnu ƒe Aɖaŋuɖoɖo

Tsɔ dɔwɔnu siwo wowɔ ɖe ɖoɖo nu la ɖɔ li browser dɔwɔnuwo. Wotue ɖe Popper dzi.

Trɔ asi le eŋu wòasɔ na wò ŋutɔ kple Bootstrap Icons

Bootstrap Icons nye SVG dzesiwo ƒe agbalẽdzraɖoƒe si le ʋuʋu ɖi si me nuŋɔŋlɔ siwo wu 1,500 le, eye wotsɔa bubuwo kpena ɖe eŋu le eƒe tata ɖesiaɖe me. Wotrɔ asi le wo ŋu be woawɔ dɔ le dɔ ɖesiaɖe me, eɖanye Bootstrap ŋutɔe nèzã alo mèzãe o. Zã wo abe SVG alo dzesi ŋɔŋlɔdzesiwo ene—tiatia eveawo siaa naa vector scaling kple asitɔtrɔ bɔbɔe to CSS dzi.

Na Bootstrap ƒe Nɔnɔmetatawo Nasu asiwò

Bootstrap ƒe Nɔnɔmetatawo

Na wòanye tɔwò kple Bootstrap Tanyawo le se nu

Kplɔ Bootstrap yi ɖoƒe si kplɔe ɖo kple tanya nyuitɔwo tso Bootstrap Tanyawo ƒe asi si dziɖuɖua ɖo la me . Wotu tanyawo ɖe Bootstrap dzi abe woawo ŋutɔ ƒe ɖoɖo siwo keke ta ene, siwo me kesinɔnuwo le kple akpa yeyewo kple kpeɖeŋutɔ yeyewo, nuŋlɔɖiwo, kple xɔtudɔwɔnu sẽŋuwo.

Kpɔ Bootstrap ƒe Tanyawo

Bootstrap ƒe Tanyawo