Jya ku bintu nyamukuru
Check
Gishya muri v5.2 Impinduka za CSS, offcanvas yitabira, ibikorwa bishya, nibindi byinshi! Bootstrap

Kubaka imbuga zihuse, zishubije hamwe na Bootstrap

Imbaraga, zagutse, kandi ziranga-ibikoresho byimbere. Kubaka no gutunganya hamwe na Sass, koresha sisitemu ya gride ya sisitemu n'ibigize, hanyuma uzane imishinga mubuzima hamwe na plugin zikomeye za JavaScript.

npm i [email protected]
Soma inyandiko

Kugeza ubu v5.2.1 · Gukuramo · v4.6.x docs · Ibyasohotse byose

Tangira inzira zose ushaka

Simbuka neza mu nyubako hamwe na Bootstrap - koresha CDN, iyishyireho ukoresheje umuyobozi wa pack, cyangwa ukuremo code yinkomoko.

Soma inyandiko yo kwishyiriraho

Shyiramo ukoresheje umuyobozi

Shyiramo inkomoko ya Bootstrap Sass na JavaScript dosiye ukoresheje npm, RubyGems, Composer, cyangwa Meteor. Gucunga ibicuruzwa byinjizwamo ntabwo birimo inyandiko cyangwa ibyuzuye byubaka. Urashobora kandi gukoresha npm template repo kugirango ubyare vuba umushinga wa Bootstrap ukoresheje npm.

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

Soma ibyashizweho byubushakashatsi kubindi bisobanuro hamwe nabandi bashinzwe gucunga paki.

Shyiramo ukoresheje CDN

Mugihe ukeneye gusa gushyiramo Bootstrap yakozwe CSS cyangwa JS, urashobora gukoresha jsDelivr . Reba mubikorwa hamwe byoroshye gutangira byihuse , cyangwa reba ingero zo gusimbuka umushinga wawe utaha. Urashobora kandi guhitamo gushiramo Popper na JS yacu ukwayo .

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

Soma ibyatangiye kuyobora

Shakisha gusimbuka ushizemo ama dosiye ya Bootstrap mumushinga mushya hamwe nuyobora abayobozi.

Urubuga Parcelle Vite

Hindura ibintu byose hamwe na Sass

Bootstrap ikoresha Sass muburyo bwububiko kandi bwihariye. Kuzana ibice ukeneye gusa, gushoboza amahitamo yisi yose nka gradients nigicucu, hanyuma wandike CSS yawe hamwe nibihinduka, amakarita, imikorere, hamwe na mixin.

Wige byinshi kubyerekeye kwihitiramo

Shyiramo Sass zose za Bootstrap

Kuzana urupapuro rumwe hanyuma ukajya mumarushanwa hamwe nibintu byose biranga CSS.

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

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

Wige byinshi kubyerekeye amahitamo ya Sass kwisi yose .

Shyiramo ibyo ukeneye

Inzira yoroshye yo gutunganya Bootstrap-shyiramo CSS gusa ukeneye.

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

Wige byinshi kubyerekeye gukoresha Bootstrap hamwe na Sass .

Kubaka no kwagura mugihe nyacyo hamwe na CSS ihinduka

Bootstrap 5 igenda ihinduka hamwe na buri gusohora kugirango ukoreshe neza CSS ihindagurika kumiterere yinsanganyamatsiko yisi yose, ibice byihariye, ndetse nibikorwa byingirakamaro. Dutanga impinduka nyinshi kumabara, imiterere yimyandikire, nibindi byinshi kurwego :rootrwo gukoresha ahantu hose. Kubigize nibikoresho byingirakamaro, impinduka za CSS zashyizwe kumurongo bireba kandi birashobora guhinduka byoroshye.

Wige byinshi kubyerekeye impinduka za CSS

Gukoresha impinduka za CSS

Koresha icyaricyo cyose gihinduka kwisi:root kugirango wandike uburyo bushya. Impinduka za CSS zikoresha var(--bs-variableName)syntax kandi zirashobora kuragwa nibintu byabana.

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

Guhindura ukoresheje CSS ihinduka

Kurenga isi yose, ibigize, cyangwa ibyiciro byingirakamaro kugirango uhindure Bootstrap uko ukunda. Ntabwo ari ngombwa gusubiramo buri tegeko, gusa agaciro gashya gahinduka.

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

Ibigize, hura na API yingirakamaro

Gishya muri Bootstrap 5, ibikorwa byacu ubu byakozwe na Utility API yacu . Twubatse nk'ikarita yuzuye Sass ikarita ishobora kwihuta kandi byoroshye. Ntabwo byoroshye kongeramo, gukuraho, cyangwa guhindura ibyiciro byingirakamaro. Kora ibikorwa byingirakamaro, ongeraho pseudo-class variants, hanyuma ubahe amazina yihariye.

Wige byinshi kubyingenzi Shakisha ibice byabigenewe

Hindura vuba ibice
// 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,
    )
  )
);

Amacomeka akomeye ya JavaScript adafite jQuery

Byoroshye kongeramo ibintu byihishe ibintu byihishe, modal na offcanvas menus, popovers hamwe nibikoresho, nibindi byinshi - byose bidafite jQuery. JavaScript muri Bootstrap ni HTML-yambere, bivuze ko kongera amacomeka byoroshye nko kongeramo dataibiranga. Ukeneye kugenzura byinshi? Shyiramo amacomeka kugiti cye.

Wige byinshi kuri Bootstrap JavaScript

Ikiranga Data API

Kuki wandika JavaScript nyinshi mugihe ushobora kwandika HTML? Hafi ya plugin ya JavaScript ya Bootstrap igaragaramo amakuru yo mu rwego rwa mbere API, igufasha gukoresha JavaScript wongeyeho dataibiranga.

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

Wige byinshi kuri JavaScript yacu nka module no gukoresha porogaramu ya API .

Gushiraho byuzuye Amacomeka

Bootstrap igaragaramo amacomeka icumi ushobora guta mumushinga uwo ariwo wose. Ujugunye icyarimwe, cyangwa uhitemo gusa ibyo ukeneye.

Imenyesha

Erekana kandi uhishe ubutumwa bwimenyesha kubakoresha.

Button

Gahunda igenzure leta ikora kuri buto.

Carousel

Ongeraho amashusho kurupapuro urwo arirwo rwose, harimo inkunga ya crossfade.

Gusenyuka

Kwagura no gusenyuka ibice birimo, cyangwa gukora akabariro.

Kumanuka

Kora menus ihuza, ibikorwa, imiterere, nibindi byinshi.

Modal

Ongeraho ibiganiro byoroshye kandi byitabira umushinga wawe.

Offcanvas

Kubaka no guhinduranya uruhande rwihishwa kurupapuro urwo arirwo rwose.

Umuyoboro

Kora ibicuruzwa byuzuye. Yubatswe kuri Popper.

Umuzingo

Mu buryo bwikora kuvugurura imikorere ya nav ishingiye kumuzingo wurupapuro.

Tab

Emerera Bootstrap nav ibice kugirango uhindure ibirimo.

Toast

Erekana kandi uhishe imenyesha kubasuye.

Igikoresho

Simbuza ibikoresho bya mushakisha hamwe nibisanzwe. Yubatswe kuri Popper.

Ihindure hamwe na Bootstrap Udushushondanga

Ibishushanyo bya Bootstrap ni isoko ifunguye isomero rya SVG ryerekana ububiko burenga 1.500 glyphs, hamwe nibindi byongeweho buri gusohora. Byaremewe gukora mumushinga uwo ariwo wose, waba ukoresha Bootstrap ubwayo cyangwa udakoresha. Koresha nka SVGs cyangwa igishushanyo cyimyandikire - amahitamo yombi aguha ibipimo bya vector hamwe no kwihitiramo byoroshye ukoresheje CSS.

Kubona Agashusho

Udushushondanga

Bikore ibyawe hamwe na Bootstrap Insanganyamatsiko

Fata Bootstrap kurwego rukurikira hamwe na premium insanganyamatsiko kuva kumasoko yemewe ya Bootstrap . Insanganyamatsiko zubatswe kuri Bootstrap nkibikoresho byabo byagutse, bikungahaye hamwe nibice bishya hamwe namacomeka, inyandiko, nibikoresho byubaka bikomeye.

Shakisha Bootstrap Insanganyamatsiko

Insanganyamatsiko ya Bootstrap