Aqbeż għall-kontenut prinċipali
Check
Ġdid fi v5.2 Varjabbli CSS, offcanvas li jirrispondu, utilitajiet ġodda, u aktar! Bootstrap

Ibni siti veloċi u li jirrispondu b'Bootstrap

Sett ta' għodod ta' frontend b'saħħtu, estensibbli u mimli karatteristiċi. Ibni u ppersonalizza b'Sass, uża sistema ta' grilja u komponenti mibnija minn qabel, u ġġib il-ħajja lill-proġetti b'plugins JavaScript qawwija.

npm i [email protected]
Aqra d-doks

Bħalissa v5.2.1 · Niżżel · v4.6.x docs · Ir-rilaxxi kollha

Ibda kif trid

Aqbeż dritt fil-bini bil-Bootstrap—uża s-CDN, installah permezz tal-maniġer tal-pakketti, jew niżżel il-kodiċi tas-sors.

Aqra d-dokumenti tal-installazzjoni

Installa permezz tal-maniġer tal-pakkett

Installa l-fajls Sass u JavaScript sors ta 'Bootstrap permezz ta' npm, RubyGems, Composer, jew Meteor. L-installazzjonijiet ġestiti mill-pakkett ma jinkludux dokumentazzjoni jew l-iskripts tal-bini sħaħ tagħna. Tista 'wkoll tuża npm template repo tagħna biex tiġġenera malajr proġett Bootstrap permezz npm.

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

Aqra d-dokumenti tal-installazzjoni tagħna għal aktar informazzjoni u maniġers tal-pakketti addizzjonali.

Inkludi permezz tas-CDN

Meta jkollok bżonn biss li tinkludi CSS jew JS ikkumpilati ta' Bootstrap, tista' tuża jsDelivr . Araha fl-azzjoni bil- bidu ta' malajr sempliċi tagħna , jew ibbrawżja l-eżempji biex tibda l-proġett li jmiss tiegħek. Tista 'wkoll tagħżel li tinkludi Popper u JS tagħna separatament .

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

Aqra l-gwidi tal-bidu tagħna

Ikseb qabża dwar l-inklużjoni tal-fajls tas-sors ta 'Bootstrap fi proġett ġdid bil-gwidi uffiċjali tagħna.

Webpack Pakkett Vite

Ippersonalizza kollox b'Sass

Bootstrap juża Sass għal arkitettura modulari u customizable. Importa biss il-komponenti li għandek bżonn, ppermetti għażliet globali bħal gradjenti u dellijiet, u ikteb is-CSS tiegħek stess bil-varjabbli, il-mapep, il-funzjonijiet u l-mixins tagħna.

Tgħallem aktar dwar il-personalizzazzjoni

Inkludi l-Sass kollha ta' Bootstrap

Importa stylesheet waħda u int titlaq għat-tiġrijiet b'kull karatteristika tas-CSS tagħna.

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

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

Tgħallem aktar dwar l -għażliet Sass globali tagħna .

Inkludi dak li għandek bżonn

L-eħfef mod biex tippersonalizza Bootstrap — inkludi biss is-CSS li għandek bżonn.

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

Tgħallem aktar dwar l-użu ta' Bootstrap ma' Sass .

Ibni u testendi f'ħin reali b'varjabbli CSS

Bootstrap 5 qed jevolvi ma 'kull rilaxx biex jutilizza aħjar il-varjabbli CSS għal stili ta' temi globali, komponenti individwali, u anke utilitajiet. Aħna nipprovdu għexieren ta 'varjabbli għal kuluri, stili ta' font, u aktar f'livell :rootgħall-użu kullimkien. Fuq il-komponenti u l-utilitajiet, il-varjabbli CSS huma skoperti għall-klassi rilevanti u jistgħu faċilment jiġu modifikati.

Tgħallem aktar dwar il-varjabbli CSS

Bl-użu ta' varjabbli CSS

Uża kwalunkwe varjabbli globali:root tagħna biex tikteb stili ġodda. Il-varjabbli CSS jużaw is- var(--bs-variableName)sintassi u jistgħu jintirtu minn elementi tat-tfal.

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

Customizing permezz ta 'varjabbli CSS

Ibdel il-varjabbli globali, tal-komponenti jew tal-klassi ta' utilità biex tippersonalizza Bootstrap eżatt kif tixtieq. M'hemmx għalfejn tiddikjara mill-ġdid kull regola, biss valur varjabbli ġdid.

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

Komponenti, jissodisfaw l-API Utility

Ġdid f'Bootstrap 5, l-utilitajiet tagħna issa huma ġġenerati mill- API Utility tagħna . Bnejna bħala mappa Sass ippakkjata b'karatteristiċi li tista 'tiġi personalizzata malajr u faċilment. Qatt ma kien faċli li żżid, tneħħi jew timmodifika xi klassijiet ta' utilità. Agħmel l-utilitajiet li jirrispondu, żid varjanti psewdo-klassi, u agħtihom ismijiet tad-dwana.

Tgħallem aktar dwar l-utilitajiet Esplora komponenti personalizzati

Ippersonalizza malajr il-komponenti
// 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,
    )
  )
);

Plugins JavaScript b'saħħithom mingħajr jQuery

Żid faċilment elementi moħbija toggleable, modals u menus offcanvas, popovers u tooltips, u ħafna aktar—kollha mingħajr jQuery. JavaScript f'Bootstrap huwa l-ewwel HTML, li jfisser li żżid plugins hija faċli daqs iż-żieda ta ' dataattributi. Għandek bżonn aktar kontroll? Inkludi plugins individwali b'mod programmatiku.

Tgħallem aktar dwar Bootstrap JavaScript

API tal-attribut tad-dejta

Għaliex tikteb aktar JavaScript meta tista 'tikteb HTML? Kważi l-plugins JavaScript kollha ta' Bootstrap għandhom API tad-dejta tal-ewwel klassi, li tippermettilek tuża JavaScript biss billi żżid dataattributi.

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

Tgħallem aktar dwar JavaScript tagħna bħala moduli u tuża l-API programmatiku .

Sett komprensiv ta 'plugins

Bootstrap fih tużżana plugins li tista’ tinżel fi kwalunkwe proġett. Waqqagħhom kollha f'daqqa, jew agħżel biss dawk li għandek bżonn.

Twissija

Uri u aħbi messaġġi ta' twissija lill-utenti tiegħek.

Buttuna

Ikkontrolla b'mod programmatiku l-istat attiv għall-buttuni.

Karużell

Żid slideshows fi kwalunkwe paġna, inkluż appoġġ għal crossfade.

Kollass

Tespandi u kollass oqsma tal-kontenut, jew oħloq accordions.

Dropdown

Oħloq menus ta’ links, azzjonijiet, formoli, u aktar.

Modali

Żid dialogs flessibbli u li jirrispondu mal-proġett tiegħek.

Offcanvas

Ibni u aqleb sidebars moħbija fi kwalunkwe paġna.

Popover

Oħloq overlays tad-dwana. Mibnija fuq Popper.

Scrollspy

Aġġorna awtomatikament links tan-nav attivi bbażati fuq iscroll tal-paġna.

Tab

Ħalli l-komponenti tan-nav Bootstrap li jaqilbu l-kontenut.

Toast

Uri u aħbi n-notifiki lill-viżitaturi tiegħek.

Tooltip

Ibdel it-tooltips tal-browser b'oħrajn personalizzati. Mibnija fuq Popper.

Ippersonalizzaha b'Ikoni Bootstrap

Bootstrap Icons hija librerija ta' ikoni SVG ta' sors miftuħ li fiha aktar minn 1,500 glifi, b'aktar miżjud kull rilaxx. Huma ddisinjati biex jaħdmu fi kwalunkwe proġett, kemm jekk tuża Bootstrap innifsu jew le. Użahom bħala SVGs jew fonts tal-ikoni—iż-żewġ għażliet jagħtuk skalar tal-vettur u customization faċli permezz tas-CSS.

Ikseb Ikoni Bootstrap

Ikoni Bootstrap

Agħmilha tiegħek b'Temi Bootstrap uffiċjali

Ħu Bootstrap għal-livell li jmiss b'temi premium mis- suq uffiċjali tat-Temi Bootstrap . It-temi huma mibnija fuq Bootstrap bħala oqfsa estiżi tagħhom stess, rikki b'komponenti u plugins ġodda, dokumentazzjoni, u għodod ta 'bini qawwija.

Fittex Temi Bootstrap

Temi Bootstrap