Rekọja si akoonu akọkọ
Check
Tuntun ni v5.2 Awọn oniyipada CSS, ifaworanhan offcanvas, awọn ohun elo tuntun, ati diẹ sii! Bootstrap

Kọ yarayara, awọn aaye idahun pẹlu Bootstrap

Alagbara, extensible, ati ẹya-ara-aba ti frontend irinṣẹ. Kọ ati ṣe akanṣe pẹlu Sass, lo eto akoj ti a ti kọ tẹlẹ ati awọn paati, ati mu awọn iṣẹ akanṣe wa si igbesi aye pẹlu awọn afikun JavaScript ti o lagbara.

npm i [email protected]
Ka awọn iwe aṣẹ naa

Lọwọlọwọ v5.2.1 · Gbigba lati ayelujara · v4.6.x docs · Gbogbo awọn idasilẹ

Bẹrẹ eyikeyi ọna ti o fẹ

Lọ ọtun sinu ile pẹlu Bootstrap — lo CDN, fi sii nipasẹ oluṣakoso package, tabi ṣe igbasilẹ koodu orisun.

Ka awọn iwe aṣẹ fifi sori ẹrọ

Fi sori ẹrọ nipasẹ oluṣakoso package

Fi sori ẹrọ orisun Bootstrap Sass ati awọn faili JavaScript nipasẹ npm, RubyGems, Olupilẹṣẹ, tabi Meteor. Awọn fifi sori ẹrọ iṣakoso akopọ ko pẹlu iwe tabi awọn iwe afọwọkọ kikọ ni kikun wa. O tun le lo repo awoṣe npm wa lati ṣe agbejade iṣẹ akanṣe Bootstrap ni kiakia nipasẹ npm.

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

Ka awọn iwe aṣẹ fifi sori wa fun alaye diẹ sii ati awọn alakoso package afikun.

Pẹlu nipasẹ CDN

Nigbati o ba nilo nikan lati ṣafikun Bootstrap's CSS ti o ṣajọ tabi JS, o le lo jsDelivr . Wo ni iṣe pẹlu ibẹrẹ iyara wa ti o rọrun , tabi ṣawari awọn apẹẹrẹ lati fo bẹrẹ iṣẹ akanṣe atẹle rẹ. O tun le yan lati pẹlu Popper ati JS wa lọtọ .

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

Ka awọn itọsọna bibẹrẹ wa

Gba fo lori pẹlu awọn faili orisun Bootstrap ni iṣẹ akanṣe tuntun pẹlu awọn itọsọna osise wa.

Apo wẹẹbu Ile Vite

Ṣe akanṣe ohun gbogbo pẹlu Sass

Bootstrap nlo Sass fun apọjuwọn ati faaji asefara. Ṣe agbewọle awọn paati ti o nilo nikan, mu awọn aṣayan agbaye ṣiṣẹ bi awọn gradients ati awọn ojiji, ati kọ CSS tirẹ pẹlu awọn oniyipada, maapu, awọn iṣẹ ati awọn alapọpo wa.

Kọ ẹkọ diẹ sii nipa isọdi-ara-ẹni

Fi gbogbo Bootstrap's Sass kun

Ṣe agbewọle iwe aṣa kan ati pe o lọ si awọn ere-ije pẹlu gbogbo ẹya ti CSS wa.

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

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

Kọ ẹkọ diẹ sii nipa awọn aṣayan Sass agbaye wa .

Fi ohun ti o nilo

Ọna to rọọrun lati ṣe akanṣe Bootstrap — pẹlu CSS nikan ti o nilo.

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

Kọ ẹkọ diẹ sii nipa lilo Bootstrap pẹlu Sass .

Kọ ati faagun ni akoko gidi pẹlu awọn oniyipada CSS

Bootstrap 5 n dagba pẹlu itusilẹ kọọkan lati lo awọn oniyipada CSS dara julọ fun awọn aza akori agbaye, awọn paati kọọkan, ati paapaa awọn ohun elo. A pese awọn dosinni ti awọn oniyipada fun awọn awọ, awọn aza fonti, ati diẹ sii ni :rootipele kan fun lilo nibikibi. Lori awọn paati ati awọn ohun elo, awọn oniyipada CSS wa ni iwọn si kilasi ti o yẹ ati pe o le ṣe atunṣe ni rọọrun.

Kọ ẹkọ diẹ sii nipa awọn oniyipada CSS

Lilo awọn oniyipada CSS

Lo eyikeyi awọn oniyipada agbaye:root wa lati kọ awọn aza tuntun. Awọn oniyipada CSS lo var(--bs-variableName)sintasi ati pe o le jogun nipasẹ awọn eroja ọmọde.

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

Isọdọtun nipasẹ awọn oniyipada CSS

Paarẹ agbaye, paati, tabi awọn oniyipada kilasi ohun elo lati ṣe akanṣe Bootstrap gẹgẹ bi o ṣe fẹ. Ko si iwulo lati tun sọ ofin kọọkan, o kan iye oniyipada tuntun.

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

Awọn paati, pade API IwUlO

Tuntun ni Bootstrap 5, awọn ohun elo wa ti wa ni ipilẹṣẹ nipasẹ API IwUlO wa . A kọ ọ bi maapu Sass ti o ni ẹya-ara ti o le ṣe adani ni iyara ati irọrun. Ko rọrun rara lati ṣafikun, yọkuro, tabi ṣatunṣe eyikeyi awọn kilasi iwulo. Ṣe awọn ohun elo ni idahun, ṣafikun awọn iyatọ-kilaasi pseudo, ki o fun wọn ni awọn orukọ aṣa.

Kọ ẹkọ diẹ sii nipa awọn ohun elo Ye adani irinše

Ni kiakia ṣe awọn paati
// 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,
    )
  )
);

Awọn afikun JavaScript ti o lagbara laisi jQuery

Ni irọrun ṣafikun awọn eroja ti o farapamọ toggle toggle, awọn awoṣe ati awọn akojọ aṣayan itanafa, awọn agbejade ati awọn imọran irinṣẹ, ati pupọ diẹ sii — gbogbo rẹ laisi jQuery. JavaScript ni Bootstrap jẹ HTML-akọkọ, eyiti o tumọ si fifi awọn afikun jẹ irọrun bi fifi awọn dataabuda kun. Nilo iṣakoso diẹ sii? Fi awọn afikun kọọkan kun ni eto.

Kọ ẹkọ diẹ sii nipa Bootstrap JavaScript

API ikalara

Kini idi ti kọ JavaScript diẹ sii nigbati o le kọ HTML? O fẹrẹ to gbogbo awọn afikun JavaScript Bootstrap ṣe ẹya API data kilasi akọkọ, gbigba ọ laaye lati lo JavaScript kan nipa fifi awọn dataabuda kun.

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

Kọ ẹkọ diẹ sii nipa JavaScript wa bi awọn modulu ati lilo API ti eto .

Okeerẹ ṣeto ti awọn afikun

Bootstrap ṣe ẹya awọn afikun mejila ti o le ju silẹ sinu iṣẹ akanṣe eyikeyi. Fi wọn silẹ ni ẹẹkan, tabi yan awọn ti o nilo nikan.

Itaniji

Ṣe afihan ati tọju awọn ifiranṣẹ itaniji si awọn olumulo rẹ.

Bọtini

Eto iṣakoso ipo ti nṣiṣe lọwọ fun awọn bọtini.

Carousel

Ṣafikun awọn agbelera si oju-iwe eyikeyi, pẹlu atilẹyin fun crossfade.

Subu

Faagun ki o si ṣubu awọn agbegbe ti akoonu, tabi ṣẹda awọn accordions.

Faa silẹ

Ṣẹda awọn akojọ aṣayan awọn ọna asopọ, awọn iṣe, awọn fọọmu, ati diẹ sii.

Awoṣe

Ṣafikun awọn ibaraẹnisọrọ to rọ ati idahun si iṣẹ akanṣe rẹ.

Offcanfasi

Kọ ati yi awọn ẹgbẹ ẹgbẹ ti o farapamọ pada si oju-iwe eyikeyi.

Agbejade

Ṣẹda awọn agbekọja aṣa. Itumọ ti lori Popper.

Scrollspy

Ṣe imudojuiwọn awọn ọna asopọ nav ti nṣiṣe lọwọ laifọwọyi da lori yi lọ oju-iwe.

Taabu

Gba awọn paati Bootstrap nav laaye lati yi akoonu pada.

Tositi

Ṣe afihan ati tọju awọn iwifunni si awọn alejo rẹ.

Ohun elo irinṣẹ

Rọpo awọn itọnisọna ẹrọ aṣawakiri pẹlu awọn aṣa aṣa. Itumọ ti lori Popper.

Ṣe akanṣe rẹ pẹlu Awọn aami Bootstrap

Awọn aami Bootstrap jẹ ile-ikawe aami aami orisun SVG ti o nfihan diẹ sii ju 1,500 glyphs, pẹlu afikun diẹ sii ni gbogbo itusilẹ. Wọn ṣe apẹrẹ lati ṣiṣẹ ni eyikeyi iṣẹ akanṣe, boya o lo Bootstrap funrararẹ tabi rara. Lo wọn bi awọn SVG tabi awọn nkọwe aami — awọn aṣayan mejeeji fun ọ ni igbelowọn fekito ati isọdi irọrun nipasẹ CSS.

Gba Awọn aami Bootstrap

Awọn aami Bootstrap

Jẹ ki o jẹ tirẹ pẹlu Awọn akori Bootstrap osise

Mu Bootstrap lọ si ipele atẹle pẹlu awọn akori Ere lati aaye ọja Awọn akori Bootstrap osise . Awọn akori ti wa ni itumọ ti lori Bootstrap bi awọn ilana ti o gbooro tiwọn, ọlọrọ pẹlu awọn paati tuntun ati awọn afikun, iwe, ati awọn irinṣẹ ikọle ti o lagbara.

Ṣawakiri Awọn akori Bootstrap

Awọn akori Bootstrap