Laktawan sa panguna nga sulud
Check
Bag-o sa v5.2 CSS variables, responsive offcanvas, bag-ong utilities, ug daghan pa! Bootstrap

Paghimo paspas, responsive nga mga site gamit ang Bootstrap

Kusog, mapalapad, ug puno sa feature nga frontend toolkit. Paghimo ug pagpahiangay sa Sass, gamita ang prebuilt grid system ug mga sangkap, ug buhion ang mga proyekto gamit ang kusgan nga mga plugin sa JavaScript.

npm i [email protected]
Basaha ang mga doc

Sa pagkakaron v5.2.1 · Pag- download · v4.6.x docs · Tanan nga gipagawas

Pagsugod sa bisan unsang paagi nga gusto nimo

Ambak dayon sa pagtukod gamit ang Bootstrap—gamita ang CDN, i-install kini pinaagi sa package manager, o i-download ang source code.

Basaha ang mga doc sa pag-install

I-install pinaagi sa manager sa package

I-install ang gigikanan sa Bootstrap nga Sass ug mga file sa JavaScript pinaagi sa npm, RubyGems, Composer, o Meteor. Ang mga pag-install nga gidumala sa package wala maglakip sa dokumentasyon o among tibuuk nga mga script sa paghimo. Mahimo usab nimo gamiton ang among npm template repo aron dali nga makamugna og proyekto sa Bootstrap pinaagi sa npm.

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

Basaha ang among mga dokumento sa pag-install alang sa dugang nga impormasyon ug dugang nga mga manager sa package.

Ilakip pinaagi sa CDN

Kung kinahanglan nimo nga ilakip ang giipon nga CSS o JS sa Bootstrap, mahimo nimong gamiton ang jsDelivr . Tan-awa kini sa aksyon sa among yano nga dali nga pagsugod , o pag-browse sa mga pananglitan aron masugdan ang imong sunod nga proyekto. Makapili ka usab nga iapil ang Popper ug ang among JS nga gilain .

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

Basaha ang among mga giya sa pagsugod

Pag-apil sa mga gigikanan nga file sa Bootstrap sa usa ka bag-ong proyekto gamit ang among opisyal nga mga giya.

Webpack Parcel Vite

Ipasibo ang tanan gamit ang Sass

Gigamit sa Bootstrap ang Sass alang sa usa ka modular ug napasadya nga arkitektura. I-import lang ang mga component nga imong gikinahanglan, i-enable ang global nga mga opsyon sama sa gradients ug shadows, ug isulat ang imong kaugalingong CSS gamit ang among mga variables, mapa, functions, ug mixins.

Pagkat-on og dugang mahitungod sa pag-customize

Ilakip ang tanan nga Bootstrap's Sass

Pag-import ug usa ka stylesheet ug moadto ka sa mga lumba sa matag bahin sa among CSS.

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

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

Pagkat-on og dugang bahin sa among global nga mga kapilian sa Sass .

Ilakip ang imong gikinahanglan

Ang pinakasayon ​​nga paagi sa pag-customize sa Bootstrap—iapil lang ang CSS nga imong gikinahanglan.

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

Pagkat-on og dugang mahitungod sa paggamit sa Bootstrap uban sa Sass .

Pagtukod ug pagpalapad sa tinuod nga panahon uban sa CSS variables

Ang Bootstrap 5 nag-uswag sa matag pagpagawas aron mas maayo nga magamit ang mga variable sa CSS alang sa mga estilo sa tema sa kalibutan, indibidwal nga mga sangkap, ug bisan mga gamit. Naghatag kami daghang mga variable para sa mga kolor, estilo sa font, ug daghan pa sa :rootlebel nga magamit bisan asa. Sa mga sangkap ug mga gamit, ang mga variable sa CSS gisakupan sa may kalabutan nga klase ug dali nga mabag-o.

Pagkat-on og dugang mahitungod sa CSS variables

Paggamit sa CSS variables

Gamita ang bisan unsa sa among mga global :rootvariable sa pagsulat og bag-ong mga estilo. Ang mga variable sa CSS naggamit sa var(--bs-variableName)syntax ug mahimong mapanunod sa mga elemento sa mga bata.

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

Pag-customize pinaagi sa CSS variables

I-override ang global, component, o utility class variables aron ipahiangay ang Bootstrap sa imong gusto. Dili kinahanglan nga ipahayag pag-usab ang matag lagda, usa lang ka bag-ong variable nga kantidad.

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

Mga component, tagboa ang Utility API

Bag-o sa Bootstrap 5, ang among mga utilities nahimo na karon sa among Utility API . Gibuhat namo kini isip usa ka mapa nga puno sa feature nga Sass nga dali ug dali nga ma-customized. Dili gyud kadali ang pagdugang, pagtangtang, o pagbag-o sa bisan unsang mga klase sa utility. Himoa nga responsive ang mga utilities, idugang ang pseudo-class nga mga variant, ug hatagi sila og custom nga mga ngalan.

Pagkat-on og dugang mahitungod sa mga utilities Susihon ang gipahiangay nga mga sangkap

Ipasibo dayon ang mga sangkap
// 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,
    )
  )
);

Gamhanan nga JavaScript plugins nga walay jQuery

Sayon nga idugang ang mabalhin-balhin nga mga tinago nga mga elemento, modals ug offcanvas nga mga menu, popover ug tooltip, ug daghan pa-tanan nga wala ang jQuery. Ang JavaScript sa Bootstrap mao ang HTML-una, nga nagpasabut nga ang pagdugang sa mga plugins sama kasayon ​​​​sa pagdugang sa datamga hiyas. Nagkinahanglan ug dugang kontrol? Ilakip ang indibidwal nga mga plugins sa programa.

Pagkat-on og dugang mahitungod sa Bootstrap JavaScript

Data attribute API

Nganong magsulat ug dugang JavaScript kon makasulat ka ug HTML? Hapit tanan sa Bootstrap's JavaScript plugins adunay usa ka first-class data API, nga nagtugot kanimo sa paggamit sa JavaScript pinaagi lamang sa pagdugang sa datamga hiyas.

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

Pagkat-on og dugang mahitungod sa among JavaScript isip mga module ug paggamit sa programmatic API .

Komprehensibo nga hugpong sa mga plugins

Ang Bootstrap adunay usa ka dosena nga mga plugins nga mahimo nimong ihulog sa bisan unsang proyekto. Ihulog kini tanan sa usa ka higayon, o pilia ang mga kinahanglan nimo.

Alerto

Ipakita ug itago ang mga mensahe sa alerto sa imong mga tiggamit.

Butang

Programmatically kontrola ang aktibo nga kahimtang alang sa mga buton.

Carousel

Idugang ang mga slideshow sa bisan unsang panid, lakip ang suporta alang sa crossfade.

Nahugno

Pagpalapad ug paghugno sa mga bahin sa sulod, o paghimo og mga akordyon.

Dropdown

Paghimo og mga menu sa mga link, aksyon, porma, ug uban pa.

Modal

Idugang ang flexible ug responsive nga mga dialog sa imong proyekto.

Offcanvas

Paghimo ug i-toggle ang mga tinago nga sidebar sa bisan unsang panid.

Popover

Paghimo og custom nga mga overlay. Gitukod sa Popper.

Scrollspy

Awtomatikong i-update ang mga aktibong link sa nav base sa pag-scroll sa panid.

Tab

Tugoti ang mga sangkap sa Bootstrap nav sa pag-toggle sa mga sulod.

Tosta

Ipakita ug itago ang mga pahibalo sa imong mga bisita.

Tooltip

Ilisan ang mga tooltip sa browser sa mga naandan. Gitukod sa Popper.

I-personalize kini gamit ang Bootstrap Icons

Ang Bootstrap Icons usa ka open source nga SVG icon library nga adunay labaw sa 1,500 ka mga glyph, nga adunay dugang nga gidugang matag pagpagawas. Gidisenyo sila nga magtrabaho sa bisan unsang proyekto, bisan kung gigamit nimo ang Bootstrap mismo o dili. Gamita kini isip mga SVG o icon nga mga font—ang duha ka mga opsyon naghatag kanimo og vector scaling ug sayon ​​nga pag-customize pinaagi sa CSS.

Pagkuha mga Icon sa Bootstrap

Mga Icon sa Bootstrap

Himoa kini nga imo gamit ang opisyal nga Bootstrap Themes

Dad-a ang Bootstrap sa sunod nga lebel nga adunay mga premium nga tema gikan sa opisyal nga merkado sa Mga Tema sa Bootstrap . Ang mga tema gitukod sa Bootstrap isip ilang kaugalingong gipalapdan nga mga gambalay, puno sa bag-ong mga sangkap ug mga plugins, dokumentasyon, ug gamhanang mga himan sa pagtukod.

Pag-browse sa Mga Tema sa Bootstrap

Mga Tema sa Bootstrap