Lumaktaw sa pangunahing nilalaman
Check
Bago sa v5.2 Mga variable ng CSS, tumutugon sa offcanvas, mga bagong utility, at higit pa! Bootstrap

Bumuo ng mabilis, tumutugon na mga site gamit ang Bootstrap

Makapangyarihan, napapalawak, at puno ng tampok na frontend toolkit. Bumuo at mag-customize gamit ang Sass, gumamit ng prebuilt grid system at mga bahagi, at bigyang-buhay ang mga proyekto gamit ang malalakas na JavaScript plugin.

npm i [email protected]
Basahin ang mga doc

Kasalukuyang v5.2.1 · I- download · v4.6.x docs · Lahat ng mga release

Magsimula sa anumang paraan na gusto mo

Pumunta mismo sa pagbuo gamit ang Bootstrap—gamitin ang CDN, i-install ito sa pamamagitan ng manager ng package, o i-download ang source code.

Basahin ang mga doc sa pag-install

I-install sa pamamagitan ng manager ng package

I-install ang source ng Bootstrap na Sass at JavaScript na mga file sa pamamagitan ng npm, RubyGems, Composer, o Meteor. Ang mga package na pinamamahalaang pag-install ay hindi kasama ang dokumentasyon o ang aming buong build script. Maaari mo ring gamitin ang aming npm template repo para mabilis na makabuo ng isang Bootstrap na proyekto sa pamamagitan ng npm.

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

Basahin ang aming mga doc sa pag-install para sa higit pang impormasyon at karagdagang mga manager ng package.

Isama sa pamamagitan ng CDN

Kapag kailangan mo lang isama ang pinagsama-samang CSS o JS ng Bootstrap, maaari mong gamitin ang jsDelivr . Tingnan ito sa pagkilos gamit ang aming simpleng mabilis na pagsisimula , o i-browse ang mga halimbawa upang simulan ang iyong susunod na proyekto. Maaari mo ring piliing isama ang Popper at ang aming JS nang hiwalay .

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

Basahin ang aming mga gabay sa pagsisimula

Kumuha ng jump sa pagsasama ng mga source file ng Bootstrap sa isang bagong proyekto kasama ang aming mga opisyal na gabay.

Webpack Parcel Vite

I-customize ang lahat sa Sass

Ginagamit ng Bootstrap ang Sass para sa isang modular at nako-customize na arkitektura. I-import lang ang mga bahaging kailangan mo, paganahin ang mga pandaigdigang opsyon tulad ng mga gradient at shadow, at isulat ang sarili mong CSS gamit ang aming mga variable, mapa, function, at mixin.

Matuto pa tungkol sa pag-customize

Isama ang lahat ng Bootstrap's Sass

Mag-import ng isang stylesheet at pupunta ka sa mga karera sa bawat tampok ng aming CSS.

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

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

Matuto pa tungkol sa aming pandaigdigang mga opsyon sa Sass .

Isama ang kailangan mo

Ang pinakamadaling paraan upang i-customize ang Bootstrap—isama lang ang CSS na kailangan mo.

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

Matuto nang higit pa tungkol sa paggamit ng Bootstrap sa Sass .

Bumuo at mag-extend nang real-time gamit ang mga variable ng CSS

Ang Bootstrap 5 ay umuunlad sa bawat paglabas upang mas mahusay na magamit ang mga variable ng CSS para sa mga estilo ng global na tema, indibidwal na mga bahagi, at kahit na mga utility. Nagbibigay kami ng dose-dosenang mga variable para sa mga kulay, estilo ng font, at higit pa sa isang :rootantas para magamit kahit saan. Sa mga bahagi at kagamitan, ang mga variable ng CSS ay nasasakupan sa nauugnay na klase at madaling mabago.

Matuto nang higit pa tungkol sa mga variable ng CSS

Paggamit ng mga variable ng CSS

Gamitin ang alinman sa aming mga pandaigdigang :rootvariable upang magsulat ng mga bagong istilo. Ginagamit ng mga variable ng CSS ang var(--bs-variableName)syntax at maaaring ma-inherit ng mga elemento ng 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 sa pamamagitan ng mga variable ng CSS

I-override ang global, component, o utility class variable para i-customize ang Bootstrap kung paano mo gusto. Hindi na kailangang muling ideklara ang bawat panuntunan, isang bagong variable value lang.

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 bahagi, matugunan ang Utility API

Bago sa Bootstrap 5, ang aming mga utility ay nabuo na ngayon ng aming Utility API . Binuo namin ito bilang isang mapa ng Sass na puno ng tampok na maaaring mabilis at madaling ma-customize. Hindi kailanman naging mas madali ang magdagdag, mag-alis, o magbago ng anumang mga klase ng utility. Gawing tumutugon ang mga utility, magdagdag ng mga pseudo-class na variant, at bigyan sila ng mga custom na pangalan.

Matuto pa tungkol sa mga utility Galugarin ang mga naka-customize na bahagi

Mabilis na i-customize ang mga bahagi
// 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,
    )
  )
);

Napakahusay na mga plugin ng JavaScript na walang jQuery

Madaling magdagdag ng mga toggleable na nakatagong elemento, mga modal at offcanvas na menu, mga popover at tooltip, at marami pang iba—lahat nang walang jQuery. Ang JavaScript sa Bootstrap ay HTML-first, na nangangahulugang ang pagdaragdag ng mga plugin ay kasingdali ng pagdaragdag ng mga datakatangian. Kailangan ng higit pang kontrol? Isama ang mga indibidwal na plugin sa programmatically.

Matuto nang higit pa tungkol sa Bootstrap JavaScript

API ng katangian ng data

Bakit magsulat ng higit pang JavaScript kung maaari kang magsulat ng HTML? Halos lahat ng JavaScript plugin ng Bootstrap ay nagtatampok ng first-class na data API, na nagbibigay-daan sa iyong gumamit ng JavaScript sa pamamagitan lamang ng pagdaragdag ng mga dataattribute.

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

Matuto nang higit pa tungkol sa aming JavaScript bilang mga module at gamit ang programmatic API .

Komprehensibong hanay ng mga plugin

Nagtatampok ang Bootstrap ng isang dosenang mga plugin na maaari mong i-drop sa anumang proyekto. Ilagay ang mga ito nang sabay-sabay, o piliin lamang ang mga kailangan mo.

Alerto

Ipakita at itago ang mga alertong mensahe sa iyong mga user.

Pindutan

Programmatically kontrolin ang aktibong estado para sa mga pindutan.

Carousel

Magdagdag ng mga slideshow sa anumang pahina, kabilang ang suporta para sa crossfade.

Pagbagsak

Palawakin at i-collapse ang mga bahagi ng content, o gumawa ng mga accordion.

Dropdown

Lumikha ng mga menu ng mga link, aksyon, form, at higit pa.

Modal

Magdagdag ng flexible at tumutugon na mga dialog sa iyong proyekto.

Offcanvas

Bumuo at i-toggle ang mga nakatagong sidebar sa anumang page.

Popover

Gumawa ng mga custom na overlay. Itinayo sa Popper.

Scrollspy

Awtomatikong i-update ang mga aktibong link sa nav batay sa pag-scroll ng pahina.

Tab

Payagan ang mga bahagi ng Bootstrap nav na i-toggle ang mga nilalaman.

Toast

Ipakita at itago ang mga notification sa iyong mga bisita.

Tooltip

Palitan ang mga tooltip ng browser ng mga custom. Itinayo sa Popper.

I-personalize ito gamit ang Mga Icon ng Bootstrap

Ang Bootstrap Icons ay isang open source na SVG icon library na nagtatampok ng higit sa 1,500 glyph, na may higit pang idinagdag sa bawat release. Ang mga ito ay idinisenyo upang gumana sa anumang proyekto, kung ikaw mismo ay gumagamit ng Bootstrap o hindi. Gamitin ang mga ito bilang mga SVG o icon font—ang parehong mga opsyon ay nagbibigay sa iyo ng vector scaling at madaling pag-customize sa pamamagitan ng CSS.

Kumuha ng Mga Icon ng Bootstrap

Mga Icon ng Bootstrap

Gawin itong sa iyo gamit ang opisyal na Bootstrap Theme

Dalhin ang Bootstrap sa susunod na antas gamit ang mga premium na tema mula sa opisyal na Bootstrap Themes marketplace . Ang mga tema ay binuo sa Bootstrap bilang sarili nilang pinahabang mga framework, na mayaman sa mga bagong bahagi at plugin, dokumentasyon, at makapangyarihang mga tool sa pagbuo.

Mag-browse ng Mga Tema ng Bootstrap

Mga Tema ng Bootstrap