Buuka ku bigambo ebikulu
Check
Ekipya mu v5.2 Enkyukakyuka za CSS, offcanvas eziddamu, ebikozesebwa ebipya, n'ebirala! Omusipi gwa Bootstrap

Zimba emikutu egy'amangu, egy'okuddamu ne Bootstrap

Ekitabo ky’ebikozesebwa mu maaso eky’amaanyi, ekigaziyizibwa, era ekijjudde ebikozesebwa. Zimba n’okulongoosa ne Sass, kozesa enkola ya grid eyazimbibwa nga tezinnabaawo n’ebitundu, era oleete pulojekiti mu bulamu n’ebikozesebwa eby’amaanyi ebya JavaScript.

npm i [email protected]
Soma ebikwata ku biwandiiko

Mu kiseera kino v5.2.1 · Download · v4.6.x docs · Ebifulumiziddwa byonna

Tandika mu ngeri yonna gy’oyagala

Buuka ddala mu kuzimba ne Bootstrap—kozesa CDN, giteeke ng’oyita mu package manager, oba wanula source code.

Soma ebiwandiiko by'okussaako

Teeka ng'oyita mu muddukanya package

Teeka fayiro za Bootstrap ez'ensibuko Sass ne JavaScript ng'oyita mu npm, RubyGems, Composer, oba Meteor. Package managed installs tezirimu biwandiiko oba scripts zaffe ez'okuzimba mu bujjuvu. Osobola n'okukozesa npm template repo yaffe okukola amangu pulojekiti ya Bootstrap ng'oyita mu npm.

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

Soma ebiwandiiko byaffe eby'okussaako okumanya ebisingawo n'abaddukanya package endala.

Muteekemu ng’oyita mu CDN

Bw'oba weetaaga okussaamu CSS oba JS ya Bootstrap ekung'aanyiziddwa yokka, osobola okukozesa jsDelivr . Laba mu bikolwa n'okutandika kwaffe okwangu okw'amangu , oba genda mu byokulabirako okubuuka okutandika pulojekiti yo eddako. Osobola n'okusalawo okussaamu Popper ne JS yaffe okwawukana .

<!-- 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 ebiragiro byaffe ebikwata ku kutandika

Funa okubuuka ku kussaamu fayiro za Bootstrap ez'ensibuko mu pulojekiti empya n'ebiragiro byaffe ebitongole.

Omukutu gwa yintaneeti Baasa Vite

Customize buli kimu ne Sass

Bootstrap ekozesa Sass okukola modular era customizable architecture. Yingiza ebitundu byokka bye weetaaga, sobozesa eby’okulonda eby’ensi yonna nga gradients ne shadows, era owandiike CSS yo n’enkyukakyuka zaffe, maapu, emirimu, ne mixins.

Manya ebisingawo ku kulongoosa

Muteekemu ne Sass zonna eza Bootstrap

Yingiza stylesheet emu era ogenze okugenda mu mpaka nga buli kimu kiri mu CSS yaffe.

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

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

Manya ebisingawo ku nkola zaffe eza Sass ez'ensi yonna .

Muteekemu n’ebyo by’olina

Engeri ennyangu ey’okulongoosa Bootstrap—ssaamu CSS yokka gy’olina.

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

Manya ebisingawo ku nkozesa ya Bootstrap ne Sass .

Zimba era ogaziye mu kiseera ekituufu n'enkyukakyuka za CSS

Bootstrap 5 egenda ekulaakulana ne buli kifulumizibwa okukozesa obulungi enkyukakyuka za CSS ku sitayiro z’omulamwa ogw’ensi yonna, ebitundu ssekinnoomu, n’ebikozesebwa. Tuwa amakumi g’enkyukakyuka za langi, emisono gy’empandiika, n’ebirala ku :rootddaala ery’okukozesa wonna. Ku bitundu n’ebikozesebwa, enkyukakyuka za CSS ziweebwa ekifo okutuuka ku kiraasi ekwatagana era zisobola bulungi okukyusibwa.

Manya ebisingawo ku nkyukakyuka za CSS

Okukozesa enkyukakyuka za CSS

Kozesa enkyukakyuka zaffe zonna ez’ensi yonna:root okuwandiika emisono emipya. Enkyukakyuka za CSS zikozesa var(--bs-variableName)ensengeka era zisobola okusikira elementi z’abaana.

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

Okulongoosa nga oyita mu nkyukakyuka za CSS

Override global, component, oba utility class variables okulongoosa Bootstrap mu ngeri gy'oyagala. Tekyetaagisa kuddamu kulangirira buli tteeka, omuwendo omupya ogw'enkyukakyuka gwokka.

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

Ebitundu, sisinkana Utility API

Ekipya mu Bootstrap 5, ebikozesebwa byaffe kati bikolebwa Utility API yaffe . Twagizimba nga maapu ya Sass erimu ebintu bingi esobola okulongoosebwa amangu era mu ngeri ennyangu. Tekibangako kyangu kwongera, kuggyawo, oba okukyusa kiraasi zonna ez'omugaso. Fuula utilities responsive, yongera ku pseudo-class variants, era oziwe amannya aga custom.

Manya ebisingawo ku bikozesebwa Yeekenneenya ebitundu ebikoleddwa ku mutindo

Yanguwa okulongoosa ebitundu by’omubiri
// 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,
    )
  )
);

Ebikozesebwa bya JavaScript eby'amaanyi ebitaliiko jQuery

Kyangu okwongerako toggleable ebintu ebikwekebwa, modals ne offcanvas menus, popovers ne toltips, n'ebirala bingi-byona nga tewali jQuery. JavaScript mu Bootstrap ye HTML-esooka, ekitegeeza okugattako plugins kyangu nga okugattako dataattributes. Oyagala okufuga okusingawo? Muteekemu plugins ssekinnoomu mu pulogulaamu.

Manya ebisingawo ku Bootstrap JavaScript

API y'ekintu ekikwata ku data

Lwaki owandiika JavaScript esingawo ng’ate osobola okuwandiika HTML? Kumpi byonna ebya Bootstrap ebya JavaScript bibaamu API ya data ey’omutindo ogusooka, ekusobozesa okukozesa JavaScript ng’oyongerako dataebifaananyi byokka.

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

Manya ebisingawo ku JavaScript yaffe nga modules n'okukozesa programmatic API .

Ekibinja ekijjuvu ekya plugins

Bootstrap erimu plugins kkumi z’osobola okusuula mu pulojekiti yonna. Zisuule zonna omulundi gumu, oba londa ezo zokka ze weetaaga.

Okulabula

Laga era okweke obubaka obulabula eri abakozesa bo.

Eppeesa

Programmatically okufuga embeera ekola ku buttons.

Ekyuma ekiyitibwa Carousel

Okwongerako ebifaananyi ku lupapula lwonna, nga mw'otwalidde n'okuwagira crossfade.

Okuzirika

Gaziya era okendeeze ebitundu by’ebirimu, oba okukola accordions.

Okugwa wansi

Tonda menu z'enkolagana, ebikolwa, foomu, n'ebirala.

Modal

Okwongerako emboozi ezikyukakyuka era eziddamu ku pulojekiti yo.

Okuva ku kanvaasi

Zimba era okyuse sidebars ezikwekebwa mu lupapula lwonna.

Obwavu

Tonda ebibikka eby’enjawulo. Yazimbibwa ku Popper.

Ebiwandiiko ebiyitibwa Scrollspy

Okulongoosa mu ngeri ey’otoma enkolagana za nav ezikola okusinziira ku kutambula kw’olupapula.

Tab

Kiriza ebitundu bya Bootstrap nav okukyusa ebirimu.

Ekyuma ekifumba emigati

Laga era okweke okumanyisibwa eri abagenyi bo.

Ebikozesebwa

Kikyuse obukodyo bwa browser oteekemu obw’enjawulo. Yazimbibwa ku Popper.

Kikole nga kikukwatako ne Bootstrap Icons

Bootstrap Icons ye open source SVG icon library erimu glyphs ezisukka mu 1,500, nga n'ebirala byongerwako buli kifulumizibwa. Zikoleddwa okukola mu pulojekiti yonna, oba okozesa Bootstrap yennyini oba nedda. Zikozese nga SVGs oba efonti z’ebifaananyi—eby’okulonda byombi bikuwa vector scaling n’okulongoosa okwangu okuyita mu CSS.

Funa Ebifaananyi bya Bootstrap

Ebifaananyi bya Bootstrap

Kifuule ekikyo n'emiramwa emitongole egya Bootstrap

Twala Bootstrap ku ddaala eddala n'emiramwa egy'omutindo okuva mu katale akatongole aka Bootstrap Themes . Emiramwa gizimbibwa ku Bootstrap nga enkola zaago ezigaziyiziddwa, nga zirimu ebitundu ebipya ne plugins, ebiwandiiko, n’ebikozesebwa eby’amaanyi eby’okuzimba.

Browse Emiramwa gya Bootstrap

Emiramwa gya Bootstrap