Main content ah kal rawh
Check
v5.2 ah hian thil thar a awm CSS variable te, responsive offcanvas te, utility thar te, leh thil dang tam tak! Bootstrap a ni

Bootstrap hmangin site rang tak, chhanna pe thei tak tak siam rawh

Frontend toolkit chak tak, tihzauh theih, leh feature tam tak awmna. Sass hmangin build leh customize la, prebuilt grid system leh components te hmang la, JavaScript plugin chak tak tak hmangin project te chu nunna pe rawh.

npm i [email protected]
Docs te chu chhiar la

Tunah hian v5.2.1 · Download · v4.6.x docs · Release zawng zawng

I duh angin tan la rawh

Bootstrap hmanga building-ah lut nghal rawh—CDN hmang la, package manager hmangin install la, source code download rawh.

Installation docs chhiar la

Package manager hmangin install rawh

Bootstrap source Sass leh JavaScript file te chu npm, RubyGems, Composer, emaw Meteor hmangin install rawh. Package managed install-ah hian documentation emaw kan full build scripts emaw a tel lo. Kan npm template repo hmang hian npm hmangin Bootstrap project rang takin i siam thei bawk.

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

Info leh package manager dangte hriat belh duh chuan kan installation docs chhiar la .

CDN kaltlangin dah tel bawk ang che

Bootstrap-a compiled CSS emaw JS emaw chauh i dah tel a ngaih hunah chuan jsDelivr i hmang thei ang . See it in action with our simple quick start , a nih loh leh i project lo awm tur chu jumpstart turin entirnan browse la . Popper leh kan JS te pawh a hranin i dah tel thei bawk .

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

Kan tan tirh dan tur kaihhruaina te chhiar la

Kan official guide te nen project thara Bootstrap source files te dah tel dan tur jump la rawh.

Webpack a ni Bawm Vite a ni

Sass hmangin engkim customize rawh

Bootstrap hian Sass hi modular leh customizable architecture atan a hmang a. I mamawh components chauh import la, gradient leh shadow ang chi global options enable la, kan variable, map, function, leh mixins te hmangin nangmah ngeiin CSS ziak rawh.

Customizing chungchang hi zir belh rawh

Bootstrap-a Sass zawng zawng pawh telh vek rawh

Stylesheet pakhat import la, kan CSS feature zawng zawng nen races-ah i chhuak ang.

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

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

Kan global Sass options chungchang hi zir belh rawh .

I mamawh chu telh bawk ang che

Bootstrap siam dan awlsam ber—i mamawh CSS chauh dah tel bawk ang che.

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

Sass hmanga Bootstrap hman dan tur zir belh rawh .

CSS variable hmangin real-time-a siam leh tihzauh theih a ni

Bootstrap 5 hi release apiangin a lo thang chho zel a, global theme styles, individual components, leh utilities thlengin CSS variables te chu a hmang tangkai zawk thei a ni. :rootKhawi hmunah pawh hman theih tur level -ah color, font style leh a dangte atan variable dozens kan pe a . Component leh utilities-ah chuan CSS variable te chu a kaihhnawih class-ah scope a ni a, awlsam takin a siam danglam theih bawk.

CSS variable chungchang hi zir belh rawh

CSS variable hmangin

Kan global :rootvariable eng pawh hmang la , style thar ziak rawh. CSS variable te hian var(--bs-variableName)syntax an hmang a, children element te hian an inherit thei bawk.

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

CSS variable hmanga customize theih a ni

Bootstrap chu i duh ang taka siam turin global, component, emaw utility class variable te chu override la. Rule tin redeclare a ngai tawh lo, variable value thar chauh a ni.

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

Components te, Utility API te chu zawm rawh

Bootstrap 5-a thil thar, kan utilities te chu kan Utility API hmangin kan siam chhuak tawh a ni. Feature-packed Sass map angin kan siam a, awlsam leh rang taka siam theih a ni. Utility class engmah add, remove, modify hi a awlsam ngai lo. Utilities te chu responsive takin siam la, pseudo-class variant te dah la, custom name pe rawh.

Utilities chungchang hi zir belh rawh Customized components te chu explore rawh

Components te chu rang takin customize theih a ni
// 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,
    )
  )
);

jQuery tel lova JavaScript plugins chak tak tak a awm bawk

A awlsam zawngin toggleable hidden elements, modals leh offcanvas menus, popovers leh tooltips te, leh thil dang tam tak add theih—jQuery tel lovin. dataBootstrap-a JavaScript hi HTML-first a ni a, chu chu plugins dah belh hi attribute dah ang maia awlsam a ni tihna a ni. Control tam zawk mamawh em? Plugin pakhat zel chu programmatic takin dah tel bawk ang che.

Bootstrap JavaScript chungchang hi zir belh rawh

Data attribute chu API a ni

HTML i ziah theih laiin engvangin nge JavaScript tam zawk ziah? dataBootstrap-a JavaScript plugin zawng zawng deuhthaw hian first-class data API a nei a, attribute dah belh mai mai hmangin JavaScript i hmang thei a ni.

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

Kan JavaScript chu module angin leh programmatic API hman dan tur zir belh rawh .

Plugin set kimchang tak a awm

Bootstrap hian plugin dozen zet a nei a, chu chu eng project ah pawh i drop thei a ni. Vawi khatah paih vek la, a nih loh leh i mamawh chauh thlang rawh.

Inring

I users te hnena alert message te entir leh thup thin.

Kawrkilh

Button hrang hrang tan active state chu programmatic takin control rawh.

Carousel hmanga siam a ni

Page eng pawhah slideshow dah la, crossfade support pawh a tel.

Chim

Content area hrang hrangte chu tihzauh leh tihkhawtlai la, a nih loh leh accordion siam rawh.

Dropdown a ni

Link, action, form leh thil dang tam tak menu siam rawh.

Modal a ni

I project ah hian flexible leh responsive dialog te dah la.

Offcanvas ah a awm

Sidebar thup te chu eng page ah pawh siam leh toggle theih a ni.

Popover a ni

Custom overlay siam rawh. Popper hmanga sak a ni.

Scrollspy hmanga ziah a ni

Page scroll hmangin active nav link te chu automatic in update thin ang che.

Tab a ni

Bootstrap nav components te chu contents toggle turin phalsak rawh.

Chhangthawp hem ro

I tlawhtute hnenah notification entir leh thup rawh.

Tooltip a ni

Browser tooltips chu custom hmangin thlak rawh. Popper hmanga sak a ni.

Bootstrap Icons hmangin personalize rawh

Bootstrap Icons hi open source SVG icon library a ni a, glyph 1,500 chuang a awm a, release apiangin a dang a dah belh zel a ni. Eng project pawha thawk thei tura siam an ni a, Bootstrap ngei pawh hmang emaw hmang lo emaw pawh nise. SVG emaw icon font emaw angin hmang la—option pahnih hian vector scaling leh CSS hmanga customization awlsam tak a pe che a ni.

Bootstrap Icons te chu la rawh

Bootstrap Icons te pawh a awm bawk

Official Bootstrap Themes hmangin i ta siam rawh

Bootstrap hi official Bootstrap Themes marketplace atanga premium themes hmangin level sang zawkah hruai rawh . Theme te hi Bootstrap ah hian anmahni extended framework angin an siam a, component leh plugin thar, documentation leh build tool chak tak tak nen a hausa hle.

Bootstrap Themes te chu browse rawh

Bootstrap Thupui hrang hrangte