Tlolela ho litaba tsa mantlha
Check
E ncha ho v5.2 Mefuta e fapaneng ea CSS, li-offcanvas tse arabelang, lisebelisoa tse ncha, le tse ling! Bootstrap

Haha libaka tsa marang-rang tse potlakileng, tse arabelang ka Bootstrap

E matla, e atoloha, 'me e tletse likarolo tse ka pele tsa lisebelisoa. Theha le ho itloaetsa ka Sass, sebelisa sistimi ea grid e hahiloeng esale pele le likaroloana, 'me u ntlafatse merero ka li-plugins tse matla tsa JavaScript.

npm i [email protected]
Bala litokomane

Hajoale v5.2.1 · Khoasolla · v4.6.x docs · Litokollo tsohle

Qala ka tsela efe kapa efe eo u e batlang

Tlolela ka ho toba mohahong ka Bootstrap-sebelisa CDN, e kenye ka mookameli oa sephutheloana, kapa khoasolla khoutu ea mohloli.

Bala litokomane tsa ho kenya

Kenya ka molaoli oa sephutheloana

Kenya lifaele tsa Sass le JavaScript mohloling oa Bootstrap ka npm, RubyGems, Composer, kapa Meteor. Lipakete tse laoloang ha li kenyelle litokomane kapa litokomane tsa rona tse felletseng. U ka sebelisa repo ea rona ea template ea npm ho hlahisa projeke ea Bootstrap kapele ka npm.

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

Bala litokomane tsa rona tsa ho kenya bakeng sa lintlha tse ling le batsamaisi ba liphutheloana tse ling.

Kenyelletsa ka CDN

Ha o hloka feela ho kenyelletsa CSS kapa JS e hlophisitsoeng ea Bootstrap, o ka sebelisa jsDelivr . E bone ha e ntse e sebetsa ka qalo ea rona e bonolo , kapa sheba mehlala ho qala morero oa hau o latelang. U ka khetha ho kenyelletsa Popper le JS ea rona ka thoko .

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

Bala litataiso tsa rona tsa ho qala

Fumana monyetla oa ho kenyelletsa lifaele tsa mohloli oa Bootstrap morerong o mocha o nang le litataiso tsa rona tsa semmuso.

Webpack Sephutheloana Vite

Iketsetse tsohle ka Sass

Bootstrap e sebelisa Sass bakeng sa meralo ea modular le e ka khonehang. Kena feela likarolo tseo u li hlokang, lumella likhetho tsa lefats'e joalo ka likhahla le meriti, 'me u ngole CSS ea hau ka mefuta ea rona, limmapa, mesebetsi le metsoako.

Ithute haholoanyane ka ho itlhophisa

Kenyelletsa tsohle tsa Bootstrap's Sass

Kenya leqephe le le leng la setaele 'me u tla ea peisong ka likarolo tsohle tsa CSS ea rona.

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

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

Ithute haholoanyane ka likhetho tsa rona tsa lefats'e tsa Sass .

Kenyelletsa seo u se hlokang

Mokhoa o bonolo oa ho etsa Bootstrap - kenyelletsa feela CSS eo u e hlokang.

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

Ithute haholoanyane ka ho sebelisa Bootstrap ka Sass .

Theha 'me u atolose ka nako ea nnete ka mefuta e fapaneng ea CSS

Bootstrap 5 e ntse e tsoela pele ka tokollo e 'ngoe le e' ngoe ho sebelisa hamolemo mefuta ea CSS bakeng sa setaele sa sehlooho sa lefats'e, likarolo tsa motho ka mong, esita le lits'ebeletso. Re fana ka mefuta e mengata ea mebala, mefuta ea litlhaku, le tse ling tse ngata ho :rootsebelisoa kae kapa kae. Likarolong le lits'ebeletso, mefuta e fapaneng ea CSS e fetisetsoa sehlopheng se amehang mme e ka fetoloa habonolo.

Ithute haholoanyane ka mefuta-futa ea CSS

Ho sebelisa mefuta-futa ea CSS

Sebelisa leha e le efe ea mefuta ea rona ea lefats'e:root ho ngola mekhoa e mecha. Liphetoho tsa CSS li sebelisa var(--bs-variableName)syntax 'me li ka futsoa ke likarolo tsa bana.

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

Ho ikamahanya le maemo ka mefuta ea CSS

Fetola mefuta e fapaneng ea maemo a lefats'e, karolo, kapa utility ho etsa Bootstrap kamoo u ratang kateng. Ha ho hlokahale ho phatlalatsa molao o mong le o mong, ke boleng bo bocha bo fetohang.

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

Likarolo, kopana le Utility API

E ncha ho Bootstrap 5, lisebelisoa tsa rona li se li hlahisoa ke Utility API ea rona . Re e hahile joalo ka 'mapa oa Sass o nang le likarolo tse ngata o ka etsoang kapele le ha bonolo. Ha ho so ka ho ba bonolo ho kenya, ho tlosa, kapa ho fetola litlelase tsa lisebelisoa. Etsa hore lits'ebeletso li arabele, eketsa mefuta e fapaneng ea maemo a pseudo, 'me u li fe mabitso a tloaelo.

Ithute haholoanyane ka lisebelisoa Lekola likarolo tse ikhethileng

Ka potlako iketsetse likarolo
// 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,
    )
  )
);

Li-plugins tse matla tsa JavaScript ntle le jQuery

Kenya lintho tse patiloeng habonolo, li-modal le limmapa tsa offcanvas, popovers le lisebelisoa tsa lisebelisoa, le tse ling tse ngata, ntle le jQuery. JavaScript ho Bootstrap ke HTML-pele, ho bolelang hore ho eketsa li-plugins ho bonolo joalo ka ho eketsa datalitšobotsi. U hloka taolo e eketsehileng? Kenyelletsa li-plugins ka bomong ka lenaneo.

Ithute haholoanyane ka Bootstrap JavaScript

Sebopeho sa data API

Ke hobane'ng ha u ngola JavaScript e eketsehileng ha u khona ho ngola HTML? Hoo e ka bang li-plugins tsohle tsa Bootstrap tsa JavaScript li na le API ea data ea boemo ba pele, e u lumellang hore u sebelise JavaScript ka ho eketsa datalitšobotsi.

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

Ithute haholoanyane ka JavaScript ea rona joalo ka limmojule le ho sebelisa lenaneo la API .

Sete e felletseng ea li-plugins

Bootstrap e na le li-plugins tse leshome le metso e 'meli tseo u ka li kenyang morerong ofe kapa ofe. Li kenye kaofela hang-hang, kapa khetha tseo u li hlokang feela.

Tlhokomeliso

Hlahisa le ho pata melaetsa ea tlhokomeliso ho basebelisi ba hau.

Konopo

Laola ka mokhoa oa lenaneo boemo bo sebetsang ba likonopo.

Carousel

Eketsa li-slideshows leqepheng lefe kapa lefe, ho kenyeletsoa tšehetso bakeng sa crossfade.

Koaleha

Eketsa le ho putlama likarolo tsa litaba, kapa u thehe li-accordion.

Theosa

Theha manane a lihokelo, liketso, liforomo, le tse ling.

Modal

Kenya lipuisano tse feto-fetohang le tse arabelang morerong oa hau.

Offcanvas

Haha le ho fetola maballo a patiloeng leqepheng lefe kapa lefe.

Popover

Theha likoahelo tse ikhethileng. E hahiloe holim'a Popper.

Scrollspy

Ntlafatsa lihokelo tsa nav tse sebetsang ho ipapisitsoe le moqolo oa maqephe.

Taba

Lumella likarolo tsa Bootstrap nav ho fetola litaba.

Toast

Bontša le ho pata litemoso ho baeti ba hau.

Tooltip

Fetola lithulusi tsa sebatli ka tse ikhethileng. E hahiloe holim'a Popper.

E etselitsoe motho ka mong ka Litšoantšo tsa Bootstrap

Li-Icons tsa Bootstrap ke laeborari e bulehileng ea li-icon tsa SVG e nang le li-glyphs tse fetang 1,500, 'me tokollo e ngoe le e ngoe e eketsoa. Li etselitsoe ho sebetsa morerong ofe kapa ofe, hore na u sebelisa Bootstrap ka boeona kapa che. Li sebelise e le li-SVG kapa li-fonts tsa li-icon — likhetho ka bobeli li u fa sekala sa vector le ho se etsa habonolo ka CSS.

Fumana litšoantšo tsa Bootstrap

Litšoantšo tsa Bootstrap

E etse ea hau ka Litema tsa Bootstrap tsa semmuso

Nka Bootstrap ho ea boemong bo latelang ka lihlooho tsa premium ho tsoa 'marakeng oa semmuso oa Bootstrap Themes . Litema li hahiloe ho Bootstrap joalo ka meralo ea tsona e atolositsoeng, e ruileng ka likarolo tse ncha le li-plugins, litokomane le lisebelisoa tse matla tsa ho aha.

Sheba Lihlooho tsa Bootstrap

Lihlooho tsa Bootstrap