Holo i ka ʻike nui
Check
Mea hou ma v5.2 Nā ʻano hoʻololi CSS, pane pane ʻole, nā pono hana hou, a me nā mea hou aku! Bootstrap

E kūkulu wikiwiki a pane i nā pūnaewele me Bootstrap

ʻO ka mea hana mana, hiki ke hoʻonui ʻia, a piha i nā hiʻohiʻona. E hana a hoʻopilikino me Sass, hoʻohana i ka ʻōnaehana mākia i kūkulu mua ʻia a me nā ʻāpana, a hoʻōla i nā papahana me nā plugins JavaScript ikaika.

npm i [email protected]
E heluhelu i nā palapala

I kēia manawa v5.2.1 · Hoʻoiho · v4.6.x docs · Nā hoʻokuʻu a pau

E hoʻomaka i nā ala āu e makemake ai

E lele pololei i ke kūkulu ʻana me Bootstrap—e hoʻohana i ka CDN, e hoʻokomo iā ia ma o ka pūʻulu manakia, a i ʻole e hoʻoiho i ke code kumu.

E heluhelu i nā palapala hoʻokomo

E hoʻouka ma o ka luna pūʻolo

E hoʻouka i kā Bootstrap kumu Sass a me nā faila JavaScript ma o npm, RubyGems, Composer, a i ʻole Meteor. ʻAʻole i hoʻokomo ʻia nā palapala a i ʻole kā mākou mau palapala kūkulu piha. Hiki iā ʻoe ke hoʻohana i kā mākou npm template repo e hana wikiwiki i kahi papahana Bootstrap ma o npm.

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

E heluhelu i kā mākou mau palapala hoʻonohonoho no ka ʻike hou aku a me nā mana hoʻokele ʻē aʻe.

E hoʻokomo ma o CDN

Inā pono ʻoe e hoʻokomo i kā Bootstrap CSS i hōʻuluʻulu ʻia a i ʻole JS, hiki iā ʻoe ke hoʻohana jsDelivr . E ʻike iā ia i ka hana me kā mākou hoʻomaka wikiwiki maʻalahi , a i ʻole e nānā i nā hiʻohiʻona e lele i kāu papahana aʻe. Hiki iā ʻoe ke koho e hoʻokomo iā Popper a me kā mākou JS kaʻawale .

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

E heluhelu i kā mākou alakaʻi hoʻomaka

E kiʻi i kahi lele ma ka hoʻokomo ʻana i nā faila kumu o Bootstrap i kahi papahana hou me kā mākou alakaʻi alakaʻi.

Puke pūnaewele ʻāpana Vite

Hoʻopilikino i nā mea a pau me Sass

Hoʻohana ʻo Bootstrap iā Sass no kahi hoʻolālā modular a maʻamau. Hoʻokomo wale i nā ʻāpana āu e pono ai, hiki i nā koho honua e like me nā gradients a me nā aka, a kākau i kāu CSS ponoʻī me kā mākou mau ʻano, palapala ʻāina, nā hana, a me nā hui pū.

E aʻo hou e pili ana i ka hoʻopilikino ʻana

E hoʻokomo i nā Sass a pau o Bootstrap

Hoʻokomo i hoʻokahi pepa style a hele ʻoe i nā heihei me kēlā me kēia hiʻohiʻona o kā mākou CSS.

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

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

E aʻo hou e pili ana i kā mākou mau koho Sass honua .

E hoʻokomo i kāu mea e pono ai

ʻO ke ala maʻalahi loa e hoʻopilikino iā Bootstrap—e hoʻokomo wale i ka CSS āu e pono ai.

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

E aʻo hou e pili ana i ka hoʻohana ʻana iā Bootstrap me Sass .

Kūkulu a hoʻonui i ka manawa maoli me nā mea hoʻololi CSS

Ke ulu nei ʻo Bootstrap 5 me kēlā me kēia hoʻokuʻu e hoʻohana maikaʻi i nā ʻano CSS no nā ʻano kumuhana honua, nā ʻāpana pākahi, a me nā pono hana. Hāʻawi mākou i nā ʻano like ʻole no nā kala, nā ʻano font, a me nā mea hou aku ma kahi :rootpae no ka hoʻohana ʻana ma nā wahi āpau. Ma nā ʻāpana a me nā pono hana, ua hoʻopili ʻia nā ʻano CSS i ka papa kūpono a hiki ke maʻalahi ke hoʻololi.

E aʻo hou e pili ana i nā mea hoʻololi CSS

Ke hoʻohana nei i nā mea hoʻololi CSS

E hoʻohana i kekahi o kā mākou mau mea hoʻololi honua:root e kākau i nā ʻano hou. Hoʻohana nā mea hoʻololi CSS i ka var(--bs-variableName)syntax a hiki ke hoʻoili ʻia e nā mea keiki.

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

Hoʻopilikino ma o nā ʻano hoʻololi CSS

Hoʻopau i nā ʻano like ʻole o ka honua, ʻāpana, a i ʻole nā ​​​​papa hana pono e hoʻopilikino iā Bootstrap e like me kou makemake. ʻAʻole pono e haʻi hou i kēlā me kēia lula, he waiwai hoʻololi hou wale nō.

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

Nā ʻāpana, e hui me ka API Utility

Mea hou ma Bootstrap 5, ua hana ʻia kā mākou mau pono e kā mākou Utility API . Ua kūkulu mākou iā ia ma ke ʻano he palapala ʻāina Sass i piha i nā hiʻohiʻona hiki ke maʻalahi a maʻalahi. ʻAʻole i maʻalahi ka hoʻohui, hoʻoneʻe, a hoʻololi paha i nā papa pono. E hoʻololi i nā pono hana, hoʻohui i nā ʻano ʻano pseudo-class, a hāʻawi iā lākou i nā inoa maʻamau.

E aʻo hou e pili ana i nā pono hana E ʻimi i nā ʻāpana i hana ʻia

Hoʻopilikino koke i nā ʻāpana
// 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,
    )
  )
);

Nā polokalamu JavaScript ikaika me ka ʻole o jQuery

Hoʻohui maʻalahi i nā mea huna hiki ke hoʻololi ʻia, nā modals a me nā menus offcanvas, nā popovers a me nā mea hana, a me nā mea hou aku - me ka ʻole o jQuery. ʻO JavaScript ma Bootstrap ka HTML-mua, ʻo ia hoʻi ka maʻalahi o ka hoʻohui ʻana i nā plugins e like me ka hoʻohui ʻana i nā ʻano data. Pono ka mana hou? E hoʻokomo i nā plugins pākahi me ka polokalamu.

E aʻo hou e pili ana i Bootstrap JavaScript

API huaʻōlelo ʻikepili

No ke aha e kākau hou ai i ka JavaScript inā hiki iā ʻoe ke kākau i ka HTML? Ma kahi kokoke i nā plugins JavaScript a Bootstrap e loaʻa i kahi API data papa mua, e ʻae iā ʻoe e hoʻohana iā JavaScript ma ka hoʻohui ʻana datai nā ʻano.

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

E aʻo hou e pili ana i kā mākou JavaScript ma ke ʻano he modula a me ka hoʻohana ʻana i ka API papahana .

Hoʻonohonoho piha o nā plugins

Hōʻike ʻo Bootstrap i kahi mau plugins hiki iā ʻoe ke hāʻule i kekahi papahana. E hoʻokuʻu iā lākou i ka manawa hoʻokahi, a i ʻole e koho i nā mea āu e pono ai.

Makaʻala

Hōʻike a hūnā i nā memo makaʻala i kāu mea hoʻohana.

pihi

Hoʻoponopono papahana i ke kūlana hana no nā pihi.

Carousel

Hoʻohui i nā kiʻi paʻi kiʻi i kekahi ʻaoʻao, me ke kākoʻo no ka crossfade.

Hāneʻe

E hoʻonui a hoʻohiolo i nā wahi o ka ʻike, a i ʻole e hana i nā accordions.

hāʻule iho

E hana i nā menus o nā loulou, nā hana, nā palapala, a me nā mea hou aku.

Modal

Hoʻohui i nā kamaʻilio maʻalahi a pane i kāu papahana.

Offcanvas

Kūkulu a hoʻololi i nā ʻaoʻao ʻaoʻao huna i kekahi ʻaoʻao.

Popover

E hana i nā uhi maʻamau. Kūkulu ʻia ma luna o Popper.

Scrollspy

Hoʻohou ʻakomi i nā loulou nav hana ma muli o ka ʻōwili ʻaoʻao.

Tab

E ʻae i nā ʻāpana nav Bootstrap e hoʻololi i nā ʻike.

Toast

Hōʻike a hūnā i nā leka hoʻomaopopo i kāu mau malihini.

Mea kōkua

Hoʻololi i nā ʻōlelo kōkua polokalamu me nā mea maʻamau. Kūkulu ʻia ma luna o Popper.

Hoʻopilikino iā ia me nā kiʻi Bootstrap

ʻO Bootstrap Icons kahi waihona waihona ʻona SVG i wehe ʻia e hōʻike ana ma luna o 1,500 glyphs, me nā mea hou aku i kēlā me kēia hoʻokuʻu. Hoʻolālā ʻia lākou e hana i kekahi papahana, inā ʻoe e hoʻohana iā Bootstrap ponoʻī a ʻaʻole paha. E hoʻohana iā lākou ma ke ʻano he SVG a i ʻole nā ​​​​polokalamu ikona - hāʻawi nā koho ʻelua iā ʻoe i ka scaling vector a me ka hana maʻalahi ma o CSS.

E kiʻi i nā kiʻi Bootstrap

Nā Ikona Bootstrap

Hana iā ʻoe me nā kumu Bootstrap mana

E lawe iā Bootstrap i ka pae aʻe me nā kumumanaʻo premium mai ka mākeke Bootstrap Themes . Kūkulu ʻia nā kumumanaʻo ma Bootstrap e like me kā lākou mau kikoʻī hoʻonui, waiwai me nā mea hou a me nā plugins, palapala, a me nā mea hana ikaika.

E nānā i nā kumuhana Bootstrap

Nā kumuhana Bootstrap