Tlolela go diteng tše kgolo
Check
E mpsha ka go v5.2 Diphetogo tša CSS, offcanvas ye e arabelago, didirišwa tše mpsha, le tše dingwe! Lebanta la Bootstrap

Aga mafelo a ka lebelo, a arabelago ka Bootstrap

Matla, atoloswa, le tšobotsi tletse frontend toolkit. Aga le go tlwaetša ka Sass, diriša tshepedišo ya keriti yeo e agilwego pele le dikarolo, gomme o tliše diprotšeke bophelong ka di-plugin tše matla tša JavaScript.

npm i [email protected]
Bala di-docs

Ga bjale v5.2.1 · Download · v4.6.x ditokomane · Ditokollo ka moka

Thoma ka tsela efe goba efe yeo o e nyakago

Tlolela thwii ka moagong ka Bootstrap—diriša CDN, e tsenye ka molaodi wa sephuthelwana goba o taoneloute khoutu ya mohlodi.

Bala ditokomane tša go hloma

Tsenya ka molaodi wa sephuthelwana

Tsenya difaele tša mohlodi tša Bootstrap tša Sass le JavaScript ka npm, RubyGems, Composer, goba Meteor. Ditlhomo tše di laolwago ke sephuthelwana ga di akaretše ditokomane goba dingwalwa tša rena tša go aga ka botlalo. O ka boela wa diriša repo ya rena ya thempleite ya npm go tšweletša ka pela porojeke ya Bootstrap ka npm.

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

Bala ditokomane tša rena tša go hloma bakeng sa tshedimošo e oketšegilego le balaodi ba tlaleletšo ba diphuthelwana.

Akaretša ka CDN

Ge o nyaka feela go akaretša CSS goba JS yeo e kgobokeditšwego ya Bootstrap, o ka diriša jsDelivr . Bona e le ka tiro le rona bonolo ka potlako qala , kapa phetla mehlala ho jumpstart porojeke e ne hao e latelang. O ka kgetha gape go akaretša Popper le JS ya rena 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 ditlhahlo tša rena tša go thoma

Hwetša go tlola go akaretša difaele tša mohlodi tša Bootstrap mo protšekeng ye mpsha ka dihlahli tša rena tša semmušo.

Webpack ya go swana le yona Phasela Vite

Tlwaetša se sengwe le se sengwe ka Sass

Bootstrap utilizes Sass bakeng sa modular le customizable mehaho. Tsenya ka ntle fela dikarolo te o di hlokago, kgontsha dikgetho ta lefase ka bophara go swana le dikelo le meriti, gomme o ngwale CSS ya gago ka diphetogo ta rena, dimmapa, meomo, le di-mixin.

Ithute ka botlalo ka ga go tlwaetša

Akaretša ka moka ga Bootstrap's Sass

Tsenya letlakala le tee la setaele gomme o tlogile go ya merafong ka tšobotsi ye nngwe le ye nngwe ya CSS ya rena.

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

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

Ithute ka botlalo ka ga dikgetho tša rena tša lefase ka bophara tša Sass .

Akaretša seo o se nyakago

Tsela e bonolo ya go dira gore Bootstrap e be ya gago—akaretša feela CSS yeo o e nyakago.

// 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 ka botlalo ka ga go šomiša Bootstrap ka Sass .

Aga le go katološa ka nako ya nnete ka diphetogo tša CSS

Bootstrap 5 e evolving le tokollo e nngwe le e nngwe go diriša gakaone diphetogo tša CSS bakeng sa mekgwa ya sehlogo sa lefase ka bophara, dikarolo ka botee, gaešita le didirišwa. Re fana ka diphetogo tše mmalwa tša mebala, mekgwa ya fonte, le tše dingwe maemong :roota go šomišwa kae goba kae. Ka dikarolo le didirišwa, diphetogo tša CSS di scoped go sehlopha sa maleba gomme di ka fetošwa gabonolo.

Ithute ka botlalo ka ga diphetogo tša CSS

Go šomiša diphetogo tša CSS

Šomiša efe goba efe ya diphetogo tša rena tša lefase ka bophara:root go ngwala ditaele tše mpsha. Diphetogo tša CSS di šomiša var(--bs-variableName)polelo ya go hlama gomme di ka abelwa ke dielemente tša 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);
}

Go tlwaetša ka diphetogo tša CSS

Tloša diphetogo tša lefase ka bophara, karolo, goba sehlopha sa utility go tlwaetša Bootstrap feela kamoo o ratago ka gona. Ga go nyakege gore o tsebagatše gape molao wo mongwe le wo mongwe, e no ba boleng bjo bofsa bja phetogo.

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

Dikarolo, kopana le Utility API

E mpsha go Bootstrap 5, didirišwa tša rena bjale di tšweletšwa ke API ya rena ya Didirišwa . Re e agile bjalo ka mmapa wa Sass wo o tletšego ka dikarolo wo o ka rulaganywago ka pela le gabonolo. Ga se gwa ke gwa ba bonolo go oketša, go tloša, goba go fetoša diklase le ge e le dife tša utility. Dira gore didirišwa di arabele, oketša diphetogo tša maemo a maaka, gomme o di fe maina a tlwaelo.

Ithute ka botlalo ka didirišwa tša motheo Hlahloba dikarolo tše di rulagantšwego

Ka potlako customize dikarolo
// 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,
    )
  )
);

Di-plugin tše matla tša JavaScript ntle le jQuery

Habonolo eketsa toggleable patiloeng elements, modals le offcanvas dimenu, popovers le totips, le tse ling tse ngata-kaofela ntle le jQuery. JavaScript ka go Bootstrap ke HTML-pele, e lego seo se bolelago gore go oketša di-plugin go bonolo go swana le go oketša datadika. O nyaka taolo e oketšegilego? Akaretša di-plugin ka botee ka lenaneo.

Ithute ka botlalo ka Bootstrap JavaScript

API ya tšobotsi ya data

Ke ka baka la’ng o ngwala JavaScript e ntši mola o kgona go ngwala HTML? Mo e nyakilego go ba di-plugin ka moka tša JavaScript tša Bootstrap di na le API ya data ya maemo a pele, tšeo di go dumelelago go diriša JavaScript feela ka go oketša datadika.

<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 ka botlalo ka JavaScript ya rena bjalo ka dimmojule le go šomiša API ya lenaneo .

Sete e akaretsang ya di-plugin

Bootstrap e na le di-plugin tše lesomepedi tšeo o ka di lahlelago ka gare ga projeke efe goba efe. Di lahlele ka moka ka nako e tee, goba o kgethe feela tšeo o di nyakago.

Temošo

Bontšha le go uta melaetša ya temošo go badiriši ba gago.

Kunope

Programmatically laola boemo ba mafolofolo bakeng sa dikonopo.

Carousel ya go swara

Oketša dipontšho tša diselaete letlakaleng lefe goba lefe, go akaretšwa thekgo ya crossfade.

Phuhlama

Atološa le go phušola mafelo a diteng, goba o hlame di-accordion.

Dropdown ya go theoga

Hlama dimenu tša dikgokagano, ditiro, diforomo, le tše dingwe.

Modal

Oketša dipoledišano tše di fetofetogago le tše di arabelago go porojeke ya gago.

Ka ntle ga lešela

Aga le go fetoša dibara tša ka thoko tše di utilwego go letlakala lefe goba lefe.

Popover ya go hloka

Hlama dikhupetšo tša tlwaelo. E agilwe godimo ga Popper.

Scrollspy ya go phuthwa

Ka go iketla mpshafatša dikgokagano tša nav tše di šomago tšeo di theilwego godimo ga go sepelasepela ga letlakala.

Tab ya

Dumelela dikarolo tša Bootstrap nav go fetoša dikagare.

Go thousta

Bontšha le go uta ditsebišo go baeti ba gago.

Keletšo ya didirišwa

Efa legatong la didirišwa tša sephephediši ka tšeo di rulagantšwego. E agilwe godimo ga Popper.

E dire gore e be ya gago ka Diaekhone tša Bootstrap

Bootstrap Icons ke bokgobapuku bja maswao a SVG bja mohlodi wo o bulegilego bjo bo nago le di-glyph tša go feta 1 500, ka tše dingwe tšeo di okeditšwego tokollong e nngwe le e nngwe. Di hlamilwe go šoma mo protšekeng efe goba efe, go sa šetšwe gore o šomiša Bootstrap ka boyona goba aowa. Di šomiše bjalo ka di-SVG goba difonte tša leswao—dikgetho tše ka bobedi di go fa go lekanyetša vector le go dira gore dilo di be ka tsela ye bonolo ka CSS.

Hwetša Diaekhone tša Bootstrap

Diaekhone tša Bootstrap

E dire ya gago ka Dihlogo tša semmušo tša Bootstrap

Tšea Bootstrap maemong a latelago ka dihlooho tša maemo a godimo go tšwa mmarakeng wa semmušo wa Dihlogo tša Bootstrap . Dihlogo di agilwe go Bootstrap bjalo ka ditlhako tša tšona tše di katološitšwego, di humile ka dikarolo tše mpsha le di-plugin, ditokomane, le didirišwa tše maatla tša go aga.

Browse Dihlooho tsa Bootstrap

Dihlooho tsa Bootstrap