Neidio i'r prif gynnwys
Check
Newydd yn v5.2 Newidynnau CSS, cynfas ymatebol, cyfleustodau newydd, a mwy! Bootstrap

Adeiladu gwefannau cyflym, ymatebol gyda Bootstrap

Pecyn cymorth frontend pwerus, estynadwy, llawn nodweddion. Adeiladu ac addasu gyda Sass, defnyddio system grid a chydrannau wedi'u hadeiladu ymlaen llaw, a dod â phrosiectau'n fyw gydag ategion JavaScript pwerus.

npm i [email protected]
Darllenwch y dogfennau

Ar hyn o bryd v5.2.1 · Lawrlwytho · v4.6.x docs · Pob datganiad

Dechreuwch unrhyw ffordd y dymunwch

Neidiwch i'r dde i mewn i'r adeilad gyda Bootstrap - defnyddiwch y CDN, gosodwch ef trwy'r rheolwr pecyn, neu lawrlwythwch y cod ffynhonnell.

Darllenwch y dogfennau gosod

Gosod trwy reolwr pecyn

Gosodwch ffeiliau ffynhonnell Sass a JavaScript Bootstrap trwy npm, RubyGems, Composer, neu Meteor. Nid yw gosodiadau a reolir gan becyn yn cynnwys dogfennaeth na'n sgriptiau adeiladu llawn. Gallwch hefyd ddefnyddio ein templed repo npm i gynhyrchu prosiect Bootstrap yn gyflym trwy npm.

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

Darllenwch ein dogfennau gosod am ragor o wybodaeth a rheolwyr pecyn ychwanegol.

Cynnwys trwy CDN

Pan nad oes ond angen i chi gynnwys CSS neu JS a luniwyd gan Bootstrap, gallwch ddefnyddio jsDelivr . Dewch i'w weld ar waith gyda'n cychwyn cyflym syml , neu porwch yr enghreifftiau i gychwyn eich prosiect nesaf. Gallwch hefyd ddewis cynnwys Popper a'n JS ar wahân .

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

Darllenwch ein canllawiau cychwyn arni

Mynnwch naid ymlaen gan gynnwys ffeiliau ffynhonnell Bootstrap mewn prosiect newydd gyda'n canllawiau swyddogol.

Pecyn gwe Parsel Vite

Addaswch bopeth gyda Sass

Mae Bootstrap yn defnyddio Sass ar gyfer pensaernïaeth fodiwlaidd y gellir ei haddasu. Mewnforiwch y cydrannau sydd eu hangen arnoch yn unig, galluogwch opsiynau byd-eang fel graddiannau a chysgodion, ac ysgrifennwch eich CSS eich hun gyda'n newidynnau, mapiau, swyddogaethau a chymysgeddau.

Dysgwch fwy am addasu

Cynhwyswch holl Sass Bootstrap

Mewnforiwch un ddalen arddull ac rydych chi'n mynd i'r rasys gyda phob nodwedd o'n CSS.

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

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

Dysgwch fwy am ein hopsiynau Sass byd-eang .

Cynhwyswch yr hyn sydd ei angen arnoch

Y ffordd hawsaf i addasu Bootstrap - cynhwyswch y CSS sydd ei angen arnoch yn unig.

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

Dysgwch fwy am ddefnyddio Bootstrap gyda Sass .

Adeiladu ac ymestyn mewn amser real gyda newidynnau CSS

Mae Bootstrap 5 yn esblygu gyda phob datganiad i ddefnyddio newidynnau CSS yn well ar gyfer arddulliau thema byd-eang, cydrannau unigol, a hyd yn oed cyfleustodau. Rydym yn darparu dwsinau o newidynnau ar gyfer lliwiau, arddulliau ffont, a mwy ar :rootlefel i'w defnyddio yn unrhyw le. Ar gydrannau a chyfleustodau, mae newidynnau CSS yn cael eu cwmpasu i'r dosbarth perthnasol a gellir eu haddasu'n hawdd.

Dysgwch fwy am newidynnau CSS

Defnyddio newidynnau CSS

Defnyddiwch unrhyw un o'n newidynnau byd:root -eang i ysgrifennu arddulliau newydd. Mae newidynnau CSS yn defnyddio'r var(--bs-variableName)gystrawen a gellir eu hetifeddu gan elfennau plant.

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

Addasu trwy newidynnau CSS

Diystyru newidynnau dosbarth byd-eang, cydran neu gyfleustodau i addasu Bootstrap yn union fel y dymunwch. Nid oes angen ailddatgan pob rheol, dim ond gwerth newidiol newydd.

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

Cydrannau, cwrdd â'r Utility API

Yn newydd yn Bootstrap 5, mae ein cyfleustodau bellach yn cael eu cynhyrchu gan ein API Utility . Fe wnaethon ni ei adeiladu fel map Sass llawn nodweddion y gellir ei addasu'n gyflym ac yn hawdd. Ni fu erioed yn haws ychwanegu, dileu, neu addasu unrhyw ddosbarthiadau cyfleustodau. Gwnewch gyfleustodau'n ymatebol, ychwanegwch amrywiadau ffug-ddosbarth, a rhowch enwau personol iddynt.

Dysgwch fwy am gyfleustodau Archwiliwch gydrannau wedi'u haddasu

Addasu cydrannau'n gyflym
// 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,
    )
  )
);

Ategion JavaScript pwerus heb jQuery

Ychwanegwch yn hawdd elfennau cudd toggleable, moddau a bwydlenni oddi ar y cynfas, popovers a chynghorion offer, a llawer mwy - i gyd heb jQuery. Mae JavaScript yn Bootstrap yn HTML-gyntaf, sy'n golygu bod ychwanegu ategion mor hawdd ag ychwanegu datapriodoleddau. Angen mwy o reolaeth? Cynnwys ategion unigol yn rhaglennol.

Dysgwch fwy am Bootstrap JavaScript

API priodoledd data

Pam ysgrifennu mwy o JavaScript pan allwch chi ysgrifennu HTML? Mae bron pob un o ategion JavaScript Bootstrap yn cynnwys API data o'r radd flaenaf, sy'n eich galluogi i ddefnyddio JavaScript trwy ychwanegu datapriodoleddau yn unig.

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

Dysgwch fwy am ein JavaScript fel modiwlau a defnyddio'r API rhaglennol .

Set gynhwysfawr o ategion

Mae Bootstrap yn cynnwys dwsin o ategion y gallwch chi eu gollwng i unrhyw brosiect. Gollyngwch nhw i gyd ar unwaith, neu dewiswch y rhai sydd eu hangen arnoch chi yn unig.

Rhybudd

Dangos a chuddio negeseuon rhybudd i'ch defnyddwyr.

Botwm

Rheoli cyflwr gweithredol botymau yn rhaglennol.

Carwsél

Ychwanegu sioeau sleidiau i unrhyw dudalen, gan gynnwys cefnogaeth ar gyfer crossfade.

Cwymp

Ehangu a dymchwel meysydd cynnwys, neu greu acordions.

Gollwng i lawr

Creu dewislenni o ddolenni, gweithredoedd, ffurflenni, a mwy.

moddol

Ychwanegu deialogau hyblyg ac ymatebol i'ch prosiect.

Offcanvas

Adeiladu a toglo bariau ochr cudd i mewn i unrhyw dudalen.

Popover

Creu troshaenau personol. Adeiladwyd ar Popper.

Sgrolspy

Diweddaru dolenni llywio gweithredol yn awtomatig yn seiliedig ar sgrolio tudalen.

Tab

Caniatáu i gydrannau llywio Bootstrap doglo'r cynnwys.

Tost

Dangos a chuddio hysbysiadau i'ch ymwelwyr.

Cyngor offer

Disodli awgrymiadau porwr gyda rhai personol. Adeiladwyd ar Popper.

Personoli ef gyda Bootstrap Icons

Mae Bootstrap Icons yn llyfrgell eicon SVG ffynhonnell agored sy'n cynnwys dros 1,500 o glyffau, gyda mwy yn cael ei ychwanegu bob datganiad. Maent wedi'u cynllunio i weithio mewn unrhyw brosiect, p'un a ydych chi'n defnyddio Bootstrap ei hun ai peidio. Defnyddiwch nhw fel SVGs neu ffontiau eicon - mae'r ddau opsiwn yn rhoi graddfa fector ac addasu hawdd i chi trwy CSS.

Cael Eiconau Bootstrap

Eiconau Bootstrap

Gwnewch ef yn eiddo i chi gyda Themâu Bootstrap swyddogol

Ewch â Bootstrap i'r lefel nesaf gyda themâu premiwm o farchnad swyddogol Themâu Bootstrap . Mae themâu wedi'u hadeiladu ar Bootstrap fel eu fframweithiau estynedig eu hunain, sy'n llawn cydrannau ac ategion newydd, dogfennaeth ac offer adeiladu pwerus.

Pori Themâu Bootstrap

Themâu Bootstrap