Fa'ase'e ile anotusi autu
Check
Fou ile v5.2 Fesuia'iga CSS, fa'aoga i luga ole tapoleni, mea aoga fou, ma isi mea! Bootstrap

Fausia nofoaga vave, tali mai ma Bootstrap

Malosiaga, fa'alautele, ma fa'apipi'i fa'ailoga meafaigaluega pito i luma. Fau ma fa'avasega ma Sass, fa'aoga faiga fa'avasega ma vaega, ma fa'aola galuega fa'atasi ma fa'apipi'i mamana JavaScript.

npm i [email protected]
Faitau le docs

Ole taimi nei v5.2.1 · La’u mai · v4.6.x docs · Fa’asalalauga uma

Amata i so'o se auala e te mana'o ai

Alu sa'o i totonu o le fale ma Bootstrap—fa'aoga le CDN, fa'apipi'i e ala i le pule o pusa, po'o le la'uina mai o le code source.

Faitau pepa fa'apipi'i

Fa'apipi'i e ala i le package manager

Faʻapipiʻi le puna o Bootstrap Sass ma faila JavaScript e ala ile npm, RubyGems, Composer, poʻo Meteor. O fa'apipi'i fa'afoe fa'apipi'i e le aofia ai fa'amaumauga po'o a tatou fa'amaumauga atoa. E mafai foi ona e faʻaogaina le matou npm template repo e vave faʻatupu ai se poloketi Bootstrap e ala ile npm.

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

Faitau a matou pepa fa'apipi'i mo nisi fa'amatalaga ma isi pule o pusa.

Fa'aaofia e ala i le CDN

A e manaʻomia le faʻapipiʻiina o le CSS tuʻufaʻatasia a Bootstrap poʻo le JS, e mafai ona e faʻaogaina jsDelivr . Va'ai i le gaioiga ma la matou amataga vave vave , po'o le su'esu'e i fa'ata'ita'iga e oso ai lau isi galuega. E mafai foi ona e filifili e aofia ai Popper ma matou JS eseese .

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

Faitau a matou taiala amata

Fai se oso i luga e aofia ai faila faila a Bootstrap i se galuega fou ma a matou taʻiala aloaia.

Webpack Pepa Vite

Fa'avasega mea uma i Sass

E fa'aogaina e Bootstrap le Sass mo se fausaga fa'apitoa ma fa'apitoa. Fa'aulufale mai na'o vaega e te mana'omia, fa'ataga avanoa i le lalolagi e pei o gradients ma ata lafoia, ma tusi lau oe CSS ma a matou fesuiaiga, fa'afanua, galuega, ma fa'afefiloi.

A'oa'o atili e uiga i le fa'avasegaina

Fa'aaofia uma le Bootstrap's Sass

Fa'aulufale mai se sitaili se tasi ona e alu lea i tuuga ma vaega uma o la tatou CSS.

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

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

A'oa'o atili e uiga i la matou filifiliga Sass i le lalolagi atoa .

Fa'aaofia mea e te mana'omia

Ole auala pito sili ona faigofie e fa'avasega ai le Bootstrap—ia aofia ai na'o le CSS e te mana'omia.

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

Aoao atili e uiga i le faʻaaogaina o Bootstrap ma Sass .

Fausia ma faʻalautele i le taimi moni ma fesuiaiga CSS

Bootstrap 5 o loʻo faʻaleleia i faʻasalalauga taʻitasi e faʻaoga lelei ai le CSS fesuiaiga mo sitaili autu o le lalolagi, vaega taʻitasi, ma e oʻo lava i mea aoga. Matou te tuʻuina atu le tele o fesuiaiga mo lanu, sitaili faʻamau, ma sili atu i se :roottulaga mo le faʻaogaina i soo se mea. I luga o vaega ma mea faʻaoga, o fesuiaiga o le CSS o loʻo faʻaogaina i le vasega talafeagai ma e faigofie ona faʻaleleia.

A'oa'o atili e uiga i fesuiaiga CSS

Fa'aaogaina o fesuiaiga CSS

Fa'aoga so'o se tasi oa tatou suiga :rootole lalolagi e tusi ai sitaili fou. CSS fesuiaiga e faʻaaoga le var(--bs-variableName)syntax ma e mafai ona tuʻufaʻatasia e tamaiti elemene.

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

Fa'asinomaga e ala i suiga CSS

Aveese le lalolagi, vaega, po'o le fa'aogaina o le vasega e fa'avasegaina le Bootstrap i le mea e te mana'o ai. Leai se mana'oga e toe fa'ailoa tulafono ta'itasi, na'o se tau fesuia'i fou.

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

Vaega, fetaui ma le Utility API

Fou i le Bootstrap 5, o matou mea aoga ua gaosia nei e la matou Utility API . Na matou fausia o se faafanua Sass faʻapipiʻiina e mafai ona vave ma faigofie ona faʻatulagaina. E le'i faigofie lava ona fa'aopoopo, aveese, pe suia so'o se vasega aoga. Fa'aoga mea fa'aoga, fa'aopoopo pseudo-class variants, ma tu'u i ai igoa fa'apitoa.

A'oa'o atili e uiga i mea faigaluega Saili vaega fa'apitoa

Fa'apena vave vaega
// 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,
    )
  )
);

Mamana JavaScript plugins e aunoa ma le jQuery

Fa'afaigofie ona fa'aopoopo elemene natia feliuliua'i, modals ma offcanvas menus, popovers ma tooltips, ma le tele o isi mea—e aunoa ma le jQuery. JavaScript i Bootstrap o le HTML-muamua, o lona uiga o le faʻaopoopoina o plugini e faigofie pei o le faʻaopoopoina o datauiga. Manaomia nisi pule? Fa'aaofia fa'apolokalame fa'apipi'i ta'itasi.

A'oa'o atili e uiga i le Bootstrap JavaScript

Fa'amatalaga uiga API

Aisea e tusi atili ai le JavaScript pe a mafai ona e tusia HTML? Toeitiiti lava o mea uma a Bootstrap's JavaScript plugins o loʻo iai se API faʻamatalaga muamua, e mafai ai ona e faʻaogaina le JavaScript i le faʻaopoopoina datao uiga.

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

A'oa'o atili e uiga i la matou JavaScript e fai ma modules ma fa'aogaina le API fa'apolokalame .

Seti atoatoa o plugini

O le Bootstrap o loʻo faʻaalia ai le tele o plugini e mafai ona e tuʻuina i soʻo se poloketi. Tu'u uma i le taimi e tasi, pe filifili na'o mea e te mana'omia.

Lapata'i

Fa'aali ma nana fe'au mataala i au tagata fa'aoga.

faamau

Pulea fa'apolokalame le tulaga gaioi mo fa'amau.

Carousel

Fa'aopoopo ata fa'ata'ita'i i so'o se itulau, e aofia ai le lagolago mo le fa'afefete.

Pa'u

Fa'alautele ma fa'ato'ilalo vaega o mea o lo'o i totonu, po'o le fa'atupu accordions.

Pa'u i lalo

Fausia lisi o fesoʻotaʻiga, gaioiga, fomu, ma isi mea.

Modal

Fa'aopoopo fa'amatalaga fetu'utu'una'i ma tali atu i lau poloketi.

Fa'alavalava

Fausia ma fesuia'i fa'alava natia i so'o se itulau.

Popover

Fausia mea fa'apipi'i masani. Fausia i luga o Popper.

Scrollspy

Fa'afou otometi feso'ota'iga nav e fa'atatau ile ta'ai itulau.

Tab

Fa'ataga vaega Bootstrap nav e fesuia'i mea i totonu.

Toast

Fa'aali ma nana fa'amatalaga i au tagata asiasi.

Mea faigaluega

Sui mea faigaluega su'esu'e i mea masani. Fausia i luga o Popper.

Fa'apitoa i le Bootstrap Icons

Bootstrap Icons o se faletusi faʻamaufaʻailoga SVG faʻaalia e sili atu i le 1,500 glyphs, faʻatasi ai ma le faʻaopoopoina o faʻasalalauga uma. Ua mamanuina e galulue i soʻo se poloketi, pe e te faʻaaogaina Bootstrap lava ia pe leai. Fa'aoga i latou e fai ma SVGs po'o fa'ailoga fa'ailoga-o filifiliga uma e lua e tu'uina atu ai ia te oe le fa'avasegaina o vete ma faigofie fa'apitoa e ala i le CSS.

Maua Bootstrap Icons

Fa'ailoga Bootstrap

Fai ma oe ile Bootstrap Themes aloaia

Ave Bootstrap i le isi tulaga ma autu faʻapitoa mai le maketi aloaia Bootstrap Themes . O autu e fausia i luga o Bootstrap e avea ma a latou lava auivi faʻalautele, tamaoaiga i vaega fou ma faʻapipiʻi, faʻamaumauga, ma mea faigaluega mamana.

Su'esu'e Autu Bootstrap

Bootstrap Themes