Rach gu prìomh shusbaint
Check
Ùr ann an v5.2 Caochladairean CSS, offcanvas freagairteach, goireasan ùra, agus barrachd! Bootstrap

Tog làraich luath, freagairteach le Bootstrap

Inneal aghaidh cumhachdach, leudachail agus làn fheartan. Tog agus gnàthaich le Sass, cleachd siostam clèithe ro-thogte agus co-phàirtean, agus thoir pròiseactan beò le plugins cumhachdach JavaScript.

npm i [email protected]
Leugh na docaichean

An- dràsta v5.2.1 · Luchdaich sìos · v4.6.x docs · A h-uile brath

Tòisich mar a tha thu ag iarraidh

Leum dìreach a-steach don togalach le Bootstrap - cleachd an CDN, stàlaich e tro mhanaidsear pacaid, no luchdaich sìos an còd stòr.

Leugh docaichean stàlaidh

Stàlaich tro mhanaidsear pacaid

Stàlaich faidhlichean stòr Bootstrap Sass agus JavaScript tro npm, RubyGems, Sgrìobhaiche-ciùil, no Meteor. Chan eil goireasan air an stiùireadh le pacaid a’ toirt a-steach sgrìobhainnean no na sgriobtaichean togail iomlan againn. Faodaidh tu cuideachd an repo teamplaid npm againn a chleachdadh gus pròiseact Bootstrap a ghineadh gu sgiobalta tro npm.

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

Leugh na docaichean stàlaidh againn airson tuilleadh fiosrachaidh agus manaidsearan pacaid a bharrachd.

Cuir a-steach tro CDN

Nuair nach fheum thu ach CSS no JS a chuir ri chèile aig Bootstrap, faodaidh tu jsDelivr . Faic e ann an gnìomh leis an tòiseachadh sgiobalta sìmplidh againn , no thoir sùil air na h-eisimpleirean gus an ath phròiseact agad a thòiseachadh. Faodaidh tu cuideachd roghnachadh Popper agus an JS againn a thoirt a-steach air leth .

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

Leugh an stiùireadh tòiseachaidh againn

Faigh leum air adhart a’ toirt a-steach faidhlichean stòr Bootstrap ann am pròiseact ùr leis na stiùiridhean oifigeil againn.

Pasgan-lìn Pasgan Bhite

Gnàthaich a h-uile càil le Sass

Bidh Bootstrap a’ cleachdadh Sass airson ailtireachd modular agus gnàthaichte. Na cuir a-steach ach na pàirtean a tha a dhìth ort, leig le roghainnean cruinneil leithid caiseadan is faileasan, agus sgrìobh do CSS fhèin leis na caochladairean, mapaichean, gnìomhan agus measgachadh againn.

Ionnsaich tuilleadh mu bhith a 'gnàthachadh

Cuir a-steach a h-uile gin de Bootstrap's Sass

Cuir a-steach aon duilleag stoidhle agus bidh thu air falbh gu na rèisean leis a h-uile feart den CSS againn.

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

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

Ionnsaich tuilleadh mu na roghainnean Sass cruinne againn .

Cuir a-steach na tha a dhìth ort

An dòigh as fhasa air Bootstrap a ghnàthachadh - na cuir a-steach ach an CSS a tha a dhìth ort.

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

Ionnsaich tuilleadh mu bhith a’ cleachdadh Bootstrap le Sass .

Tog agus leudaich ann an àm fìor le caochladairean CSS

Tha Bootstrap 5 a’ tighinn air adhart le gach foillseachadh gus caochladairean CSS a chleachdadh nas fheàrr airson stoidhlichean cuspair cruinneil, co-phàirtean fa leth, agus eadhon goireasan. Bidh sinn a’ toirt seachad dusanan de chaochladairean airson dathan, stoidhlichean cruth-clò, agus barrachd aig :rootìre airson an cleachdadh an àite sam bith. A thaobh co-phàirtean agus goireasan, tha caochladairean CSS air an cuairteachadh chun chlas iomchaidh agus faodar an atharrachadh gu furasta.

Ionnsaich tuilleadh mu chaochladairean CSS

A’ cleachdadh caochladairean CSS

Cleachd gin de na caochladairean cruinne:root againn gus stoidhlichean ùra a sgrìobhadh. Bidh caochladairean CSS a 'cleachdadh a' cho- var(--bs-variableName)chòrdadh agus faodaidh iad a bhith air an sealbhachadh le eileamaidean chloinne.

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

Dèan gnàthachadh tro chaochladairean CSS

Cuir thairis caochladairean clas cruinne, co-phàirteach no goireasach gus Bootstrap a ghnàthachadh dìreach mar a thogras tu. Chan eil feum air gach riaghailt ath-aithris, dìreach luach caochlaideach ùr.

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

Co-phàirtean, coinnich ris an Utility API

Ùr ann am Bootstrap 5, tha na goireasan againn a-nis air an gineadh leis an Utility API . Thog sinn e mar mhapa Sass làn fheartan a ghabhas gnàthachadh gu sgiobalta agus gu furasta. Cha robh e a-riamh nas fhasa clasaichean goireis sam bith a chur ris, a thoirt air falbh no atharrachadh. Dèan goireasan freagairteach, cuir caochlaidhean clas-brèige, agus thoir ainmean àbhaisteach dhaibh.

Ionnsaich tuilleadh mu ghoireasan Dèan sgrùdadh air co-phàirtean gnàthaichte

Gnàthaich na co-phàirtean gu sgiobalta
// 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,
    )
  )
);

Plugins cumhachdach JavaScript gun jQuery

Cuir gu furasta eileamaidean falaichte toggle, modalan agus clàran-bìdh offcanvas, popovers agus molaidhean innealan, agus mòran a bharrachd - uile às aonais jQuery. Tha JavaScript ann am Bootstrap HTML-an-toiseach, a tha a’ ciallachadh gu bheil e cho furasta plugins a chur ris ri databuadhan a chur ris. Feum air barrachd smachd? Cuir a-steach plugins fa leth gu prògramach.

Ionnsaich tuilleadh mu Bootstrap JavaScript

API feart dàta

Carson a sgrìobhas tu barrachd JavaScript nuair as urrainn dhut HTML a sgrìobhadh? Tha cha mhòr a h-uile gin de na plugins JavaScript aig Bootstrap a 'nochdadh API dàta den chiad ìre, a' toirt cothrom dhut JavaScript a chleachdadh dìreach le bhith a 'cur datafeartan ris.

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

Ionnsaich tuilleadh mun JavaScript againn mar mhodalan agus a’ cleachdadh an API prògramaichte .

Seata farsaing de plugins

Tha Bootstrap a’ nochdadh dusan plugins as urrainn dhut a leigeil a-steach do phròiseact sam bith. Leig a-steach iad uile aig an aon àm, no tagh dìreach an fheadhainn a tha a dhìth ort.

Rabhadh

Seall agus cuir am falach teachdaireachdan rabhaidh don luchd-cleachdaidh agad.

Putan

Smachd a chumail air staid gnìomhach nam putanan gu prògramach.

Carousel

Cuir taisbeanaidhean-shleamhnagan ri duilleag sam bith, a’ toirt a-steach taic airson crossfade.

Tuitidh

Leudaich agus crìonadh raointean susbaint, no cruthaich bogsa-ciùil.

Droch-dhiol

Cruthaich clàran-bìdh de cheanglaichean, gnìomhan, foirmean, agus barrachd.

Modal

Cuir còmhraidhean sùbailte is freagairteach ris a’ phròiseact agad.

Offcanvas

Tog agus tog barraichean-taobh falaichte gu duilleag sam bith.

Popover

Cruthaich ath-chòmhdach àbhaisteach. Air a thogail air Popper.

Scrollspy

Ùraich gu fèin-ghluasadach ceanglaichean gnìomhach nav stèidhichte air scrollaidh duilleag.

Tab

Leig le co-phàirtean Bootstrap nav susbaint a thogail.

Tòstadh

Seall agus cuir am falach fiosan don luchd-tadhail agad.

Gliocas innealan

Cuir feadhainn àbhaisteach an àite molaidhean innealan brabhsair. Air a thogail air Popper.

Dèan pearsanachadh air le Bootstrap Icons

Tha Bootstrap Icons na leabharlann ìomhaigh SVG stòr fosgailte anns a bheil còrr air 1,500 glyphs, le barrachd air a chur ris a h-uile brath. Tha iad air an dealbhadh gus obrachadh ann am pròiseact sam bith, ge bith a bheil thu a’ cleachdadh Bootstrap fhèin no nach eil. Cleachd iad mar SVGn no clòidean ìomhaigh - bheir an dà roghainn dhut sgèileadh vector agus gnàthachadh furasta tro CSS.

Faigh ìomhaighean bootstrap

Icons Bootstrap

Dèan e leatsa le Cuspairean oifigeil Bootstrap

Gabh Bootstrap chun ath ìre le prìomh chuspairean bho mhargaidh oifigeil Bootstrap Themes . Tha cuspairean air an togail air Bootstrap mar na frèaman leudaichte aca fhèin, làn de phàirtean agus plugins ùra, sgrìobhainnean, agus innealan togail cumhachdach.

Dèan brobhsadh air cuspairean Bootstrap

Cuspairean bootstrap