Pereiti prie pagrindinio turinio
Check
Naujiena 5.2 versijos CSS kintamuosiuose, interaktyvioje erdvėje, naujoms programoms ir dar daugiau! Bootstrap

Kurkite greitas, reaguojančias svetaines naudodami „Bootstrap“.

Galingas, išplečiamas ir daug funkcijų turintis sąsajos įrankių rinkinys. Kurkite ir tinkinkite naudodami „Sass“, naudokite iš anksto sukurtą tinklelio sistemą ir komponentus ir atgaivinkite projektus naudodami galingus „JavaScript“ papildinius.

npm i [email protected]
Perskaitykite dokumentus

Šiuo metu v5.2.1 · Atsisiųsti · v4.6.x dokumentai · Visi leidimai

Pradėkite taip, kaip norite

Pereikite tiesiai į kūrimą naudodami „Bootstrap“ – naudokite CDN, įdiekite jį naudodami paketų tvarkyklę arba atsisiųskite šaltinio kodą.

Skaitykite diegimo dokumentus

Įdiekite per paketų tvarkyklę

Įdiekite „Bootstrap“ šaltinio „Sass“ ir „JavaScript“ failus naudodami „npm“, „RubyGems“, „Composer“ arba „Meteor“. Į paketų valdomus diegimus neįtraukiama dokumentacija ar visi mūsų kūrimo scenarijai. Taip pat galite naudoti mūsų npm šablono repo , kad greitai sugeneruotumėte Bootstrap projektą naudodami npm.

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

Norėdami gauti daugiau informacijos ir papildomų paketų tvarkytuvų, skaitykite mūsų diegimo dokumentus .

Įtraukti per CDN

Kai reikia įtraukti tik Bootstrap sukompiliuotą CSS arba JS, galite naudoti jsDelivr . Pamatykite tai veikiant naudodami paprastą greitą pradžią arba naršykite pavyzdžius , kad greitai pradėtumėte kitą projektą. Taip pat galite pasirinkti įtraukti Popper ir mūsų JS atskirai .

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

Perskaitykite mūsų darbo pradžios vadovus

Išbandykite „Bootstrap“ šaltinio failus į naują projektą naudodami oficialius vadovus.

Webpack Parcel Vite

Tinkinkite viską naudodami Sass

„Bootstrap“ naudoja „Sass“ modulinei ir pritaikomai architektūrai. Importuokite tik jums reikalingus komponentus, įgalinkite visuotines parinktis, pvz., gradientus ir šešėlius, ir parašykite savo CSS su mūsų kintamaisiais, žemėlapiais, funkcijomis ir mišiniais.

Sužinokite daugiau apie tinkinimą

Įtraukite visą „Bootstrap's Sass“.

Importuokite vieną stiliaus lapą ir galėsite lenktyniauti naudodami visas mūsų CSS funkcijas.

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

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

Sužinokite daugiau apie mūsų pasaulines Sass parinktis .

Įtraukite tai, ko jums reikia

Lengviausias būdas tinkinti „Bootstrap“ – įtraukite tik jums reikalingą CSS.

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

Sužinokite daugiau apie Bootstrap naudojimą su Sass .

Kurkite ir išplėskite realiuoju laiku naudodami CSS kintamuosius

„Bootstrap 5“ tobulėja su kiekvienu leidimu, kad būtų galima geriau panaudoti CSS kintamuosius, skirtus visuotiniams temų stiliams, atskiriems komponentams ir net komunalinėms paslaugoms. Mes teikiame daugybę spalvų, šriftų stilių ir kitų kintamųjų, :rootskirtų naudoti bet kur. Komponentų ir paslaugų CSS kintamieji priskiriami atitinkamoms klasėms ir gali būti lengvai modifikuojami.

Sužinokite daugiau apie CSS kintamuosius

Naudojant CSS kintamuosius

Norėdami rašyti naujus stilius , naudokite bet kurį iš mūsų visuotinių :rootkintamųjų . CSS kintamieji naudoja var(--bs-variableName)sintaksę ir gali būti paveldimi antrinių elementų.

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

Tinkinimas naudojant CSS kintamuosius

Nepaisykite visuotinių, komponentų ar paslaugų klasės kintamųjų, kad pritaikytumėte Bootstrap taip, kaip jums patinka. Nereikia iš naujo deklaruoti kiekvienos taisyklės, užtenka nauja kintamojo reikšmė.

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

Komponentai atitinka Utility API

„Bootstrap 5“ naujiena – mūsų paslaugų programas dabar generuoja mūsų paslaugų API . Sukūrėme jį kaip daug funkcijų turintį Sass žemėlapį, kurį galima greitai ir lengvai tinkinti. Dar niekada nebuvo taip paprasta pridėti, pašalinti ar modifikuoti bet kokias paslaugų klases. Padarykite komunalines paslaugas reaguojančias, pridėkite pseudoklasių variantų ir suteikite joms pasirinktinius pavadinimus.

Sužinokite daugiau apie komunalines paslaugas Naršykite tinkintus komponentus

Greitai tinkinkite komponentus
// 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,
    )
  )
);

Galingi „JavaScript“ papildiniai be „jQuery“.

Lengvai pridėkite perjungiamų paslėptų elementų, modalų ir meniu, iššokančių langų, įrankių patarimų ir dar daugiau – visa tai be jQuery. „JavaScript“ programoje „Bootstrap“ pirmiausia yra HTML, o tai reiškia, kad pridėti priedų yra taip pat paprasta, kaip pridėti dataatributų. Reikia daugiau kontrolės? Programiškai įtraukite atskirus papildinius.

Sužinokite daugiau apie „Bootstrap JavaScript“.

Duomenų atributo API

Kam rašyti daugiau JavaScript, kai galite rašyti HTML? Beveik visi „Bootstrap“ „JavaScript“ papildiniai turi aukščiausios klasės duomenų API, leidžiančią naudoti „JavaScript“ tiesiog pridedant dataatributų.

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

Sužinokite daugiau apie „ JavaScript“ kaip modulius ir programinės API naudojimą .

Išsamus papildinių rinkinys

„Bootstrap“ turi tuziną papildinių, kuriuos galite įtraukti į bet kurį projektą. Įmeskite juos visus iš karto arba pasirinkite tik tuos, kurių jums reikia.

Budrus

Rodyti ir slėpti įspėjimo pranešimus savo vartotojams.

Mygtukas

Programiškai valdykite aktyvią mygtukų būseną.

Karuselė

Pridėkite skaidrių demonstraciją prie bet kurio puslapio, įskaitant kryžminio išblukimo palaikymą.

Sutraukti

Išplėskite ir sutraukite turinio sritis arba kurkite akordeonus.

Išskleidžiamasis meniu

Kurkite nuorodų, veiksmų, formų ir kt. meniu.

Modalinis

Į savo projektą įtraukite lanksčius ir reaguojančius dialogus.

Offcanvas

Kurkite ir perjunkite paslėptas šonines juostas į bet kurį puslapį.

Popover

Sukurkite pasirinktines perdangas. Pastatytas ant Popper.

Scrollspy

Automatiškai atnaujinkite aktyvias naršymo nuorodas pagal puslapio slinkimą.

Skirtukas

Leisti Bootstrap navigacijos komponentams perjungti turinį.

Skrudinta duona

Rodyti ir slėpti pranešimus lankytojams.

Patarimas

Pakeiskite naršyklės patarimus pasirinktiniais. Pastatytas ant Popper.

Suasmeninkite jį naudodami „Bootstrap“ piktogramas

„ Bootstrap Icons “ yra atvirojo kodo SVG piktogramų biblioteka, turinti daugiau nei 1 500 glifų, su kiekvienu leidimu pridedama daugiau. Jie skirti veikti bet kuriame projekte, nesvarbu, ar naudojate patį „Bootstrap“, ar ne. Naudokite juos kaip SVG arba piktogramų šriftus – abi parinktys suteikia vektorinio mastelio keitimą ir lengvą tinkinimą naudojant CSS.

Gaukite „Bootstrap“ piktogramas

Įkrovos piktogramos

Padarykite jį savo naudodami oficialias „Bootstrap“ temas

Perkelkite „Bootstrap“ į kitą lygį naudodami aukščiausios kokybės temas iš oficialios „Bootstrap“ temų rinkos . Temos sukurtos naudojant „Bootstrap“ kaip savo išplėstines sistemas, kuriose gausu naujų komponentų ir papildinių, dokumentacijos ir galingų kūrimo įrankių.

Naršykite „Bootstrap“ temas

Bootstrap temos