Mandehana any amin'ny votoaty fototra
Check
Vaovao amin'ny v5.2 CSS variables, offcanvas mamaly, fitaovana vaovao ary maro hafa! Bootstrap

Mamorona tranokala haingana sy mandray andraikitra amin'ny Bootstrap

Kitapom-pitaovana eo anoloana mahery vaika, azo itarina ary feno endri-javatra. Amboary sy amboary miaraka amin'ny Sass, ampiasao ny rafitra sy ny singa efa namboarina mialoha, ary velomy ny tetikasa miaraka amin'ny plugins JavaScript mahery vaika.

npm i [email protected]
Vakio ny doka

Amin'izao fotoana izao v5.2.1 · Download · v4.6.x docs · Ny famoahana rehetra

Manomboha amin'izay fomba tianao

Mankanesa avy hatrany amin'ny fananganana miaraka amin'ny Bootstrap—ampiasao ny CDN, apetraho amin'ny alàlan'ny mpitantana fonosana, na alaivo ny kaody loharano.

Vakio ny antontan-taratasy fametrahana

Apetraho amin'ny alàlan'ny mpitantana fonosana

Ampidiro ny rakitra Sass sy JavaScript loharanon'i Bootstrap amin'ny alàlan'ny npm, RubyGems, Composer, na Meteor. Ny fametrahana fehezin'ny fonosana dia tsy ahitana antontan-taratasy na script fananganana feno. Azonao atao koa ny mampiasa ny repo template npm mba hamoronana tetikasa Bootstrap amin'ny alàlan'ny npm.

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

Vakio ny antontan-taratasy fametrahana anay raha mila fanazavana fanampiny sy mpitantana fonosana fanampiny.

Ampidiro amin'ny alàlan'ny CDN

Rehefa mila ampidirinao fotsiny ny CSS na JS natambatra an'i Bootstrap dia azonao atao ny mampiasa jsDelivr . Jereo izany amin'ny hetsika miaraka amin'ny fanombohana haingana tsotsotra , na tsidiho ny ohatra mba hanombohana ny tetikasanao manaraka. Azonao atao ihany koa ny misafidy ny hampiditra an'i Popper sy ny JS anay misaraka .

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

Vakio ny torolalana fanombohana anay

Mandehana mitsambikina amin'ny fampidirana ireo rakitra loharanon'i Bootstrap amin'ny tetikasa vaovao miaraka amin'ny torolàlana ofisialy.

Webpack fonosana Vite

Amboary ny zava-drehetra amin'ny Sass

Bootstrap dia mampiasa Sass ho an'ny maritrano modular sy azo zahana. Ampidiro ihany ny singa ilainao, avelao ny safidy manerantany toy ny gradients sy aloka, ary soraty ny CSS-nao manokana miaraka amin'ireo fari-pitsipika, sarintany, fiasa ary mixins.

Mianara bebe kokoa momba ny fanamboarana

Ampidiro ny Sass Bootstrap rehetra

Manafatra stylesheet iray ary mandeha amin'ny hazakazaka ianao miaraka amin'ny endri-javatra rehetra amin'ny CSS.

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

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

Mianara bebe kokoa momba ny safidy Sass manerantany .

Ampidiro izay ilainao

Ny fomba tsotra indrindra hanamboarana Bootstrap—dia ny CSS ilainao ihany no ampidiro.

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

Mianara bebe kokoa momba ny fampiasana Bootstrap amin'ny Sass .

Manamboara sy manitatra amin'ny fotoana tena izy miaraka amin'ny fari-piadidiana CSS

Ny Bootstrap 5 dia mivoatra miaraka amin'ny famoahana tsirairay mba hampiasana tsara kokoa ny fari-piainan'ny CSS ho an'ny endrika lohahevitra manerantany, singa tsirairay ary na dia ny fitaovana. Manome karazany am-polony izahay ho an'ny loko, ny endri-tsoratra ary ny maro hafa amin'ny :rootambaratonga azo ampiasaina na aiza na aiza. Amin'ny singa sy fitaovana, ny fari-piainan'ny CSS dia mivelatra amin'ny kilasy mifandraika ary azo ovaina mora foana.

Mianara bebe kokoa momba ny variable CSS

Mampiasa variables CSS

Ampiasao ny iray amin'ireo fari- pahalalana maneran:root - tany hanoratana fomba vaovao. Ny variable CSS dia mampiasa ny var(--bs-variableName)syntax ary azo lovain'ny singa ankizy.

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

Fanamboarana amin'ny alàlan'ny variable CSS

Atsipazo ny fari-pahalalana manerantany, singa, na fitaovana ampiasaina hanamboarana ny Bootstrap araka izay tianao. Tsy ilaina ny mamerina manambara ny fitsipika tsirairay, sanda miovaova vaovao fotsiny.

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

Ireo singa, mifanena amin'ny Utility API

Vaovao ao amin'ny Bootstrap 5, novokarin'ny Utility API ny fitaovanay ankehitriny . Namboarinay ho sarintany Sass feno endri-javatra izay azo namboarina haingana sy mora. Tsy mora kokoa ny manampy, manala, na manova izay kilasy ilaina rehetra. Ataovy mamaly ny fampitaovana, ampio variana pseudo-class ary omeo anarana manokana izy ireo.

Mianara bebe kokoa momba ny fitaovana Diniho ny singa namboarina

Manamboara singa haingana
// 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 JavaScript mahery tsy misy jQuery

Ampio mora foana ny singa miafina, modals ary offcanvas menus, popovers sy tooltips, ary ny maro hafa — tsy misy jQuery daholo. JavaScript ao amin'ny Bootstrap dia HTML-voalohany, izay midika fa ny fampidirana plugins dia mora toy ny manampy datatoetra. Mila fifehezana bebe kokoa? Ampidiro ny plugins tsirairay amin'ny programa.

Mianara bebe kokoa momba ny Bootstrap JavaScript

Data attribute API

Maninona no manoratra JavaScript bebe kokoa rehefa afaka manoratra HTML ianao? Saika ny plugins JavaScript an'ny Bootstrap rehetra dia manana API data kilasy voalohany, ahafahanao mampiasa JavaScript amin'ny fampidirana datatoetra fotsiny.

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

Mianara bebe kokoa momba ny JavaScript ho toy ny maody sy ny fampiasana ny programmatic API .

Sehatra feno plugins

Ny Bootstrap dia manasongadina plugins am-polony izay azonao apetraka amin'ny tetikasa rehetra. Alefaso indray miaraka izy ireo, na fidio izay ilainao fotsiny.

Fanairana

Asehoy sy afeno ny hafatra fanairana ho an'ny mpampiasa anao.

bokotra

Mifehy amin'ny alalan'ny programa ny toetra mavitrika ho an'ny bokotra.

Carousel

Ampio sary mihetsika amin'ny pejy rehetra, ao anatin'izany ny fanohanana ny crossfade.

firodanan'ny

Ampitomboy sy aforeto ny faritra misy votoaty, na mamorona akorandriaka.

Velarina

Mamorona menio misy rohy, hetsika, endrika, sy ny maro hafa.

Modal

Manampia fifanakalozan-dresaka mora sy mora raisina amin'ny tetikasanao.

Offcanvas

Amboary ary ampidiho ny sisiny miafina amin'ny pejy rehetra.

Popover

Mamorona overlay manokana. Miorina amin'ny Popper.

Scrollspy

Havaozy ho azy ny rohy nav mavitrika mifototra amin'ny horonam-pejy.

kiheba

Avelao ny singa Bootstrap nav hanova ny atiny.

Toast

Asehoy sy afeno ny fampahafantarana amin'ny mpitsidika anao.

toro-hevitra miserana

Soloy ny toro-làlana amin'ny navigateur. Miorina amin'ny Popper.

Ataovy manokana amin'ny kisary Bootstrap

Bootstrap Icons dia tranomboky kisary SVG loharano misokatra ahitana glyphs 1,500 mahery, miaraka amin'ny fanampiny fanampiny isaky ny famoahana. Izy ireo dia natao hiasa amin'ny tetikasa rehetra, na mampiasa Bootstrap mihitsy ianao na tsia. Ampiasao ho SVG na endri-tsoratra kisary izy ireo — ireo safidy roa ireo dia manome anao scaling vector sy fanamboarana mora amin'ny alàlan'ny CSS.

Mahazoa kisary Bootstrap

Kisary Bootstrap

Ataovy izany miaraka amin'ny lohahevitra Bootstrap ofisialy

Raiso ny Bootstrap amin'ny ambaratonga manaraka miaraka amin'ny lohahevitra premium avy amin'ny tsena ofisialy Bootstrap Themes . Ny lohahevitra dia naorina amin'ny Bootstrap ho toy ny rafitra mivelatra, manankarena amin'ny singa vaovao sy plugins, antontan-taratasy ary fitaovana fananganana matanjaka.

Jereo ny lohahevitra Bootstrap

Bootstrap Themes