Laktawan ti kangrunaan a linaon
Check
Baro iti v5.2 Dagiti variable ti CSS, makasungbat nga offcanvas, baro a utilidad, ken dadduma pay! Bootstrap nga

Mangbangon kadagiti napartak, makasungbat a site babaen ti Bootstrap

Nabileg, mapalawa, ken napno iti tampok a frontend toolkit. Mangbangon ken mangpasayaat babaen ti Sass, agusar kadagiti nasakbay a naibangon a sistema ti grid ken dagiti paset, ken mangyeg kadagiti proyekto iti biag babaen dagiti nabileg a plugin ti JavaScript.

npm i [email protected]
Basaen dagiti docs

Iti agdama v5.2.1 · I-download · v4.6.x docs · Amin a nairuar

Mangrugika iti aniaman a pamay-an a kayatmo

Lumukso a mismo iti pasdek babaen ti Bootstrap—usarem ti CDN, i-install daytoy babaen ti package manager, wenno i-download ti source code.

Basaen dagiti dokumento ti panagipasdek

I-install babaen ti package manager

I-install dagiti taudan a Sass ken JavaScript a file ti Bootstrap babaen ti npm, RubyGems, Composer, wenno Meteor. Dagiti naiturong a panagipasdek ti pakete ket saan a mangiraman ti dokumentasion wenno dagiti naan-anay nga iskrip ti panagbangonmi. Mabalinmo pay nga usaren ti npm template repo mi tapno napardas a mangpataud ti proyekto ti Bootstrap babaen ti npm.

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

Basaen dagiti dokumentomi ti panagipasdek para iti ad-adu pay nga impormasion ken dagiti kanayonan a manager ti pakete.

Iraman babaen ti CDN

No kasapulam laeng nga iraman ti naurnong a CSS wenno JS ti Bootstrap, mabalinmo nga usaren ti jsDelivr . Kitaen daytoy nga agtigtignay babaen ti simple a napardas a panangrugimi , wenno i-browse dagiti pagarigan tapno mairugi ti sumaganad a proyektom. Mabalinmo pay a pilien nga iraman ti Popper ken ti JS-tayo a naisina .

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

Basaen dagiti giyatayo iti panangrugi

Mangala ti panagluksaw iti panangiraman kadagiti taudan a file ti Bootstrap iti baro a proyekto kadagiti opisial a giyami.

Webpack nga Bungon Vite nga

Ipasayaat ti amin babaen ti Sass

Ti Bootstrap ket agus-usar ti Sass para iti modular ken maibagay nga arkitektura. I-import laeng dagiti paset a kasapulam, pagayatam dagiti sangalubongan a pagpilian a kas dagiti gradient ken anniniwan, ken agsuratka iti bukodmo a CSS babaen dagiti variable, mapa, function, ken mixin-mi.

Ammuem ti ad-adu pay maipapan iti panagpasayaat

Iraman amin a Sass ti Bootstrap

I-import-mo ti maysa nga stylesheet ket ag-off-ka kadagiti lumba nga addaan iti tunggal feature ti CSS-mi.

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

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

Ammuem ti ad-adu pay maipapan kadagiti sangalubongan a pagpilianmi iti Sass .

Iramanmo ti kasapulam

Ti kalalakaan a wagas a mangpasayaat iti Bootstrap—iraman laeng ti CSS a kasapulam.

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

Ammuen ti ad-adu pay maipapan iti panagusar ti Bootstrap iti Sass .

Mangbangon ken mangpalawa iti aktual nga oras babaen dagiti CSS a variable

Ti Bootstrap 5 ket agbaliwbaliw iti tunggal maysa a pannakairuar tapno nasaysayaat a mausar dagiti CSS a variable para kadagiti sangalubongan nga estilo ti tema, dagiti indibidual a paset, ken urayno dagiti utilidad. Mangipaaykami kadagiti pinulpullo a variable para kadagiti kolor, estilo ti letra, ken dadduma pay iti maysa a :rootlebel a mausar iti sadinoman. Kadagiti paset ken dagiti utilidad, dagiti variable ti CSS ket naisakop iti mainaig a klase ken nalaka a mabaliwan.

Ammuen ti ad-adu pay maipapan kadagiti variable ti CSS

Babaen ti panagusar kadagiti variable ti CSS

Usaren ti ania man kadagiti sangalubongan a :rootvariabletayo tapno agsurat kadagiti baro nga estilo. Dagiti variable ti CSS ket agus-usar ti var(--bs-variableName)sintaksis ken mabalin a tawiden babaen dagiti elemento dagiti ubbing.

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

Panagpasayaat babaen dagiti variable ti CSS

I-override dagiti global, component, wenno utility class variables tapno maibagay ti Bootstrap no kasano laeng ti kayatmo. Saan a kasapulan nga ideklara manen ti tunggal pagannurotan, baro laeng a pateg ti variable.

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

Dagiti paset, matungpal ti Utility API

Baro iti Bootstrap 5, dagiti utilidadmi ket napataud itan babaen ti Utility API -mi . Inaramidmi dayta kas feature-packed a mapa ti Sass a napartak ken nalaka a ma-customize. Saan pay a pulos a nalaklaka ti manginayon, mangikkat, wenno mangbalbaliw iti ania man a klase ti utilidad. Pagbalinen dagiti utilidad a makasungbat, manginayon kadagiti pseudo-klase a variante, ken ikkan ida kadagiti kostumbre a nagan.

Ammuem ti ad-adu pay maipapan kadagiti utilidad Sukisoken dagiti napasadaan a paset

Napartak nga i-customize dagiti paset
// 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,
    )
  )
);

Nabileg a plugin ti JavaScript nga awan ti jQuery

Nalaka laeng nga inayon dagiti mai-toggle a nailemmeng nga elemento, modal ken offcanvas menu, popovers ken tooltips, ken adu pay—amin nga awan ti jQuery. Ti JavaScript iti Bootstrap ket HTML-umuna, a ti kayatna a sawen ket ti pananginayon kadagiti plugin ket kasla nalaka a kas ti pananginayon kadagiti dataattribute. Kasapulan kadi ti ad-adu pay a panangtengngel? Iraman dagiti indibidual a plugin iti programatiko.

Ammuen ti ad-adu pay maipapan iti Bootstrap JavaScript

API ti kabileg ti datos

Apay nga agsuratka iti ad-adu a JavaScript idinto ta mabalinmo ti agsurat iti HTML? Dandani amin dagiti plugin ti JavaScript ti Bootstrap ket mangitampok ti umuna a klase nga API ti datos, a mangipalubos kenka nga agusar ti JavaScript babaen laeng ti pananginayon kadagiti 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>

Ammuem ti ad-adu pay maipapan ti JavaScriptmi a kas dagiti modulo ken panagusar ti programatiko nga API .

Komprehensibo a set ti plugins

Ti Bootstrap ket mangitampok ti maysa a dosena a plugin a mabalinmo nga ibaba iti ania man a proyekto. I-drop-mo amin dagitoy a maminsan, wenno piliem laeng dagiti kasapulam.

Alerto

Ipakita ken ilemmeng dagiti mensahe ti alerto kadagiti agar-aramatmo.

Buton

Programmatiko a kontrolen ti aktibo a kasasaad para kadagiti buton.

Karrusel nga

Manginayon kadagiti slideshow iti ania man a panid, a mairaman ti suporta para iti crossfade.

Marpuog

Palawaen ken i-collapse dagiti lugar ti linaon, wenno mangaramid kadagiti akordeon.

Dropdown nga

Mangaramid kadagiti menu dagiti silpo, tignay, porma, ken dadduma pay.

Modal nga

Manginayon kadagiti nalaka a maibagay ken makasungbat a dialogo iti proyektom.

Offcanvas nga

Mangbangon ken mangi-toggle kadagiti nailemmeng a sidebar iti aniaman a panid.

Popover nga

Mangaramid kadagiti kostumbre nga overlay. Naibangon iti Popper.

Scrollspy nga

Automatiko nga i-update dagiti aktibo a silpo ti nav a naibatay iti panag-scroll ti panid.

Tab nga

Palubosan dagiti paset ti nav ti Bootstrap a mangbalbaliw kadagiti linaon.

Itostado

Ipakita ken ilemmeng dagiti pakaammo kadagiti bisitam.

Tip ti remienta

Sukatan dagiti tooltip ti browser kadagiti custom. Naibangon iti Popper.

Ipersonal dayta babaen kadagiti Bootstrap Icons

Ti Bootstrap Icons ket maysa a silulukat a taudan nga SVG a biblioteka ti ikono a mangitampok kadagiti nasurok a 1,500 a glifo, nga addaan kadagiti ad-adu pay a nainayon iti tunggal maysa a pannakairuar. Nadisenio dagitoy nga agtrabaho iti aniaman a proyekto, usarem man ti Bootstrap a mismo wenno saan. Usaren dagitoy a kas dagiti SVG wenno dagiti letra ti ikono—agpada a dagiti pagpilian ket mangted kenka ti panagsukog ti vektor ken nalaka a panagpasayaat babaen ti CSS.

Mangala kadagiti Ikono ti Bootstrap

Dagiti Ikono ti Bootstrap

Pagbalinem a kukuam babaen kadagiti opisial a Bootstrap Themes

Ipan ti Bootstrap iti sumaganad a lebel nga addaan kadagiti premium a tema manipud iti opisial a paglakuan ti Bootstrap Themes . Dagiti tema ket naibangon iti Bootstrap a kas dagiti bukodda a napalawa a balangkas, a nabaknang kadagiti baro a paset ken dagiti plugin, dokumentasion, ken dagiti nabileg nga alikamen ti panagbangon.

I-browse dagiti Tema ti Bootstrap

Dagiti Tema ti Bootstrap