Hla mus rau cov ntsiab lus tseem ceeb
Check
Tshiab hauv v5.2 CSS variables, teb offcanvas, cov khoom siv tshiab, thiab ntau dua! Bootstrap

Tsim kom ceev, teb chaw nrog Bootstrap

Hwj chim, extensible, thiab feature-packed frontend toolkit. Tsim thiab kho nrog Sass, siv cov kab sib txuas ua ntej thiab cov khoom siv, thiab coj cov haujlwm rau lub neej nrog cov muaj zog JavaScript plugins.

npm i [email protected]
Nyeem cov ntaub ntawv

Tam sim no v5.2.1 · Download · v4.6.x docs · Txhua qhov tso tawm

Pib txhua txoj kev koj xav tau

Dhia mus rau hauv lub tsev nrog Bootstrap - siv CDN, nruab nws ntawm tus thawj tswj pob, lossis rub tawm qhov chaws.

Nyeem cov ntaub ntawv installation

Nruab ntawm pob tus thawj tswj

Nruab Bootstrap qhov chaw Sass thiab JavaScript cov ntaub ntawv ntawm npm, RubyGems, Composer, lossis Meteor. Package tswj kev teeb tsa tsis suav nrog cov ntaub ntawv lossis peb cov ntawv sau tag nrho. Koj tuaj yeem siv peb npm template repo sai sai tsim ib qhov haujlwm Bootstrap ntawm npm.

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

Nyeem peb cov ntaub ntawv teeb tsa kom paub ntau ntxiv thiab cov tswj hwm pob ntxiv.

suav nrog ntawm CDN

Thaum koj tsuas xav tau suav nrog Bootstrap's compiled CSS lossis JS, koj tuaj yeem siv jsDelivr . Pom nws ua haujlwm nrog peb qhov yooj yim pib sai , lossis xauj cov piv txwv kom dhia pib koj qhov project tom ntej. Koj tuaj yeem xaiv suav nrog Popper thiab peb JS cais .

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

Nyeem peb cov lus qhia pib

Tau txais kev dhia nrog suav nrog Bootstrap cov ntaub ntawv hauv qhov project tshiab nrog peb cov lus qhia ua haujlwm.

Webpack Parcel Vite

Kho txhua yam nrog Sass

Bootstrap siv Sass rau cov qauv tsim thiab kho kom haum. Ntshuam tsuas yog cov khoom uas koj xav tau, ua kom muaj kev xaiv thoob ntiaj teb xws li gradients thiab duab ntxoov ntxoo, thiab sau koj tus kheej CSS nrog peb qhov sib txawv, daim duab qhia chaw, kev ua haujlwm, thiab mixins.

Kawm paub ntau ntxiv txog customizing

suav nrog txhua yam ntawm Bootstrap's Sass

Import ib daim ntawv style thiab koj tawm mus rau kev sib tw nrog txhua yam ntawm peb CSS.

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

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

Kawm ntxiv txog peb cov kev xaiv Sass thoob ntiaj teb .

suav nrog yam koj xav tau

Txoj hauv kev yooj yim tshaj plaws los kho Bootstrap - suav nrog tsuas yog CSS koj xav tau.

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

Kawm paub ntxiv txog kev siv Bootstrap nrog Sass .

Tsim thiab txuas ntxiv hauv lub sijhawm tiag tiag nrog CSS hloov pauv

Bootstrap 5 tab tom hloov zuj zus nrog txhua qhov kev tso tawm kom zoo dua siv CSS qhov sib txawv rau cov ntsiab lus thoob ntiaj teb, cov khoom ntiag tug, thiab txawm tias cov khoom siv hluav taws xob. Peb muab ntau qhov sib txawv rau cov xim, font style, thiab ntau dua ntawm ib :rootqib rau siv nyob txhua qhov chaw. Ntawm cov khoom siv thiab cov khoom siv hluav taws xob, CSS cov kev hloov pauv tau ua rau cov chav kawm cuam tshuam thiab tuaj yeem hloov kho tau yooj yim.

Kawm paub ntau ntxiv txog CSS variables

Siv CSS variables

Siv ib qho ntawm peb cov kev :roothloov pauv thoob ntiaj teb los sau cov qauv tshiab. CSS variables siv cov var(--bs-variableName)syntax thiab tuaj yeem tau txais los ntawm cov menyuam yaus.

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

Customizing ntawm CSS variables

Override thoob ntiaj teb, tivthaiv, lossis cov khoom siv hluav taws xob sib txawv los kho Bootstrap raws li koj nyiam. Tsis tas yuav tshaj tawm txhua txoj cai, tsuas yog tus nqi hloov pauv tshiab.

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

Cheebtsam, ua tau raws li Utility API

Tshiab hauv Bootstrap 5, peb cov khoom siv hluav taws xob tam sim no tsim los ntawm peb qhov Utility API . Peb tsim nws raws li ib tug feature-packed Sass daim ntawv qhia uas yuav ua tau sai thiab yooj yim kho. Nws yeej tsis yooj yim dua ntxiv, tshem tawm, lossis hloov kho cov chav kawm siv hluav taws xob. Ua cov khoom siv teb, ntxiv pseudo-class variants, thiab muab lawv cov npe kev cai.

Kawm ntxiv txog kev siv hluav taws xob Tshawb nrhiav cov khoom siv kho mob

Ceev ceev customize Cheebtsam
// 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,
    )
  )
);

Muaj zog JavaScript plugins tsis muaj jQuery

Yooj yim ntxiv toggleable zais cov ntsiab lus, modals thiab offcanvas menus, popovers thiab tooltips, thiab ntau ntxiv - txhua yam tsis muaj jQuery. JavaScript hauv Bootstrap yog HTML-thawj, uas txhais tau hais tias ntxiv plugins yog ib qho yooj yim li ntxiv cov datacwj pwm. Xav tau kev tswj xyuas ntxiv? suav nrog tus kheej plugins programmatically.

Kawm paub ntxiv txog Bootstrap JavaScript

Data attribute API

Vim li cas thiaj sau JavaScript ntxiv thaum koj tuaj yeem sau HTML? Yuav luag tag nrho ntawm Bootstrap's JavaScript plugins muaj cov ntaub ntawv thawj-chav kawm API, tso cai rau koj siv JavaScript los ntawm kev ntxiv cov datacwj pwm.

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

Kawm paub ntxiv txog peb cov JavaScript ua modules thiab siv qhov programmatic API .

Cov txheej txheem ntawm plugins

Bootstrap nta lub kaum os plugins uas koj tuaj yeem poob rau hauv ib qhov project. Muab lawv tso rau hauv ib zaug, lossis xaiv qhov koj xav tau xwb.

Ceeb toom

Qhia thiab zais cov lus ceeb toom rau koj cov neeg siv.

Khawm

Programmatically tswj lub xeev nquag rau cov nyees khawm.

Carousel

Ntxiv slideshows rau txhua nplooj ntawv, suav nrog kev txhawb nqa rau crossfade.

Kaw

Nthuav thiab tawg thaj chaw ntawm cov ntsiab lus, los yog tsim accordions.

poob

Tsim cov ntawv qhia zaub mov ntawm kev sib txuas, kev ua, cov ntawv, thiab lwm yam.

Modal

Ntxiv dialogs hloov tau yooj yim thiab teb rau koj qhov project.

Offcanvas

Tsim thiab toggle zais sidebars rau hauv ib nplooj ntawv.

Popover

Tsim kev cai overlays. Ua rau Popper.

Scrollspy

Hloov kho cov nquag nav txuas raws li nplooj ntawv scroll.

Tab

Tso cai rau Bootstrap nav Cheebtsam los hloov cov ntsiab lus.

Ci ci

Qhia thiab zais cov ntawv ceeb toom rau koj cov neeg tuaj saib.

Cov lus qhia

Hloov cov lus qhia browser nrog cov kev cai. Ua rau Popper.

Personalize nws nrog Bootstrap Icons

Bootstrap Icons yog qhib qhov chaw SVG lub tsev qiv ntawv icon uas muaj ntau dua 1,500 glyphs, nrog ntau ntxiv txhua qhov kev tso tawm. Lawv tau tsim los ua haujlwm hauv txhua qhov haujlwm, txawm tias koj siv Bootstrap nws tus kheej lossis tsis. Siv lawv li SVGs lossis icon fonts - ob qho kev xaiv muab rau koj vector scaling thiab yooj yim customization ntawm CSS.

Tau txais Bootstrap Icons

Bootstrap Icons

Ua koj li nrog nom Bootstrap Themes

Coj Bootstrap mus rau qib tom ntej nrog cov ntsiab lus hwm los ntawm kev ua lag luam Bootstrap Themes . Cov ntsiab lus tau tsim los ntawm Bootstrap raws li lawv tus kheej txuas ntxiv, nplua nuj nrog cov khoom tshiab thiab plugins, cov ntaub ntawv, thiab cov cuab yeej tsim muaj zog.

Xauj Bootstrap Themes

Bootstrap Cov Ntsiab Lus