Salá koleka na makambo ya ntina
Check
Ya sika na v5.2 Ba variables ya CSS, offcanvas oyo ezo répondre, ba utilitaires ya sika, pe ebele! Mokanda ya kofungola

Tongela ba sites ya mbangu, oyo ezo répondre na Bootstrap

Bokumbi bisaleli ya liboso ya nguya, oyo ekoki kobakisama, mpe oyo etondi na makambo mingi. Tongela mpe bobongisi na Sass, salelá système ya grille oyo etongami liboso mpe ba composants, mpe mema ba projets na bomoi na ba plugins ya JavaScript ya makasi.

npm i [email protected]
Tanga ba docs

Sikoyo v5.2.1 · Télécharger · v4.6.x docs · Ba sorties nionso

Bandá na ndenge nyonso oyo olingi

Pumbwa mbala moko na kotonga na Bootstrap —salela CDN, installer yango na nzela ya package manager, to télécharger code source.

Tanga ba docs ya installation

Installez via gestionnaire ya ba paquets

Botia ba fichiers Sass mpe JavaScript ya source ya Bootstrap na nzela ya npm, RubyGems, Composer, to Meteor. Ba installations oyo ekambami na paquet ezali na mikanda te to ba scripts na biso ya kotonga mobimba. Okoki mpe kosalela repo na biso ya modèle ya npm mpo na kobimisa nokinoki projet ya Bootstrap na nzela ya npm.

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

Tanga ba docs na biso ya installation pona ba infos ebele pe ba gestionnaires ya ba paquets ya kobakisa.

Botia yango na nzela ya CDN

Tango osengeli kaka kotia CSS to JS ya Bootstrap oyo esangisi, okoki kosalela jsDelivr . Tala yango na mosala na ebandeli na biso ya mbangu ya pɛtɛɛ , to talá bandakisa mpo na kobanda mosala na yo ya nsima. Okoki pe kopona kotia Popper na JS na biso separatement .

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

Tanga ba guides na biso ya kobanda

Bozua saut na ko inclure ba fichiers source ya Bootstrap na projet ya sika na ba guides officiels na biso.

Webpack ya Internet Lopango Vite

Personnaliser nionso na Sass

Bootstrap esalelaka Sass mpo na architecture modulaire mpe personnalisable. Importer kaka ba composants oyo esengeli, activer ba options mondiales lokola ba gradients na ba ombres, pe koma CSS na yo moko na ba variables na biso, ba cartes, ba fonctions, na ba mixins.

Yekola makambo mingi na ntina na kosala makambo na ndenge ya moto ye moko

Botia ba Sass nionso ya Bootstrap

Importer stylesheet moko mpe ozali kokende na ba courses na fonctionnalité nionso ya CSS na biso.

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

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

Yekola makambo mingi na ntina ya ba options na biso ya Sass ya mokili mobimba .

Tyá mpe makambo oyo osengeli na yango

Lolenge ya pete ya kosala Bootstrap na ndenge ya moto ye moko —kotia kaka CSS oyo osengeli na yango.

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

Yekola makambo mingi na ntina ya kosalela Bootstrap na Sass .

Tongela mpe bobakisi na tango ya solo na ba variables ya CSS

Bootstrap 5 ezali ko évoluer na sortie moko na moko pona ko utiliser malamu ba variables CSS pona ba styles ya thème mondial, ba composants individuels, et même ba utilitaires. Tozali kopesa ebele ya ba variables mpo na balangi, mitindo ya makomi, mpe mingi mosusu na :rootniveau moko mpo na kosalela esika nyonso. Na ba composants na ba utilitaires, ba variables CSS ezali scoped na classe pertinente mpe ekoki ko modifier facilement.

Yekola makambo mingi na ntina ya ba variables ya CSS

Kosalela ba variables ya CSS

Salelá ba variables na biso ya mokili mobimba:root mpo na kokoma ba styles ya sika. Ba variables ya CSS esalela var(--bs-variableName)syntaxe mpe ekoki ko hériter na ba éléments ya bana.

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

Personnalisation na nzela ya ba variables ya CSS

Bolongola ba variables ya classe globale, composante, to utilitaire mpo na ko personnaliser Bootstrap kaka ndenge olingi. Ntina ya kozongisa mobeko moko na moko te, kaka motuya ya sika ya 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;
}

Ba composants, kokutana na API ya Utility

Ya sika na Bootstrap 5, ba utilitaires na biso esalemi sikoyo na API na biso ya Utility . Totongaki yango lokola karte ya Sass oyo etondi na makambo mingi oyo ekoki kobongisama nokinoki mpe na pɛtɛɛ nyonso. Ezalaki naino pɛtɛɛ te kobakisa, kolongola, to kobongisa bakelasi nyonso ya utilitaire. Sala ba utilitaires responsives, bakisa ba variantes ya pseudo-classe, pe pesa bango ba kombo ya personnalisé.

Yekola makambo mingi na ntina na ba utilités Explorez ba composants personnalisés

Personnaliser noki ba composants
// 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,
    )
  )
);

Ba plugins ya JavaScript ya makasi sans jQuery

Bakisa na pete biloko oyo ebombami oyo ekoki kobongola, ba modals mpe ba menu ya libanda ya toile, ba popovers mpe ba tolips ya bisaleli, mpe mingi mosusu —nyonso kozanga jQuery. JavaScript na Bootstrap ezali HTML-ya liboso, elingi koloba kobakisa ba plugins ezali pete lokola kobakisa databa attributs. Ozali na mposa ya bokonzi mingi? Botia ba plugins moko moko na ndenge ya programme.

Yekola makambo mingi na ntina na Bootstrap JavaScript

API ya attribut ya ba données

Mpo na nini kokoma JavaScript mingi ntango okoki kokoma HTML? Pene na ba plugins nionso ya JavaScript ya Bootstrap ezali na API ya ba données ya classe ya liboso, oyo epesaka yo nzela ya kosalela JavaScript kaka na kobakisa databa attributs.

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

Yekola makambo mingi na ntina ya JavaScript na biso lokola ba modules mpe kosalela API programmatique .

Ensemble complète ya ba plugins

Bootstrap ezali na douzaine ya ba plugins oyo okoki kobwaka na projet nionso. Bwaka yango nyonso na mbala moko, to poná kaka oyo osengeli na yango.

Koyebisa

Lakisa mpe bomba ba messages ya alerte na ba usagers na yo.

Bouton

Contrôle programmatiquement l'état actif pona ba boutons.

Carrousel ya kosala

Bakisa ba diaporama na lokasa nyonso, bakisa mpe lisungi ya crossfade.

Kokwea

Panza mpe kokweisa bisika ya makambo oyo ezali na kati, to kosala ba accordions.

Kokita ya nse

Salá ba menu ya ba liens, misala, ba formulaire, mpe makambo mosusu.

Modal

Bakisa ba dialogues flexibles mpe oyo ezo répondre na projet na yo.

Offcanvas ezali

Tongela mpe toggle ba barres côtés oyo ebombami na page nionso.

Popover ya bato

Bosala ba superpositions personnalisées. Etongami likoló ya Popper.

Scrollspy ya kosala

Mikolo oyo automatiquement ba liens nav actifs basé na défilement ya page.

Tab

Tika ba composants nav ya Bootstrap e changer ba contenus.

Kotumba

Lakisa mpe bomba ba notifications na ba visiteurs na yo.

Likanisi ya bisaleli

Bobongola ba toli ya navigateur na oyo esalemi na ndenge ya moto ye moko. Etongami likoló ya Popper.

Personnalisez yango na ba Icônes ya Bootstrap

Bootstrap Icons ezali bibliothèque ya ba icônes ya SVG ya source ouverte oyo ezali na ba glyphes koleka 1.500, na mingi oyo ebakisami na ebimi nionso. Bazali kosala mpo na kosala na projet nyonso, ezala osaleli Bootstrap yango moko to te. Salelá yango lokola ba SVG to ba fonts ya bilembo —ba options nyonso mibale epesaka yo échelle ya vecteur mpe personnalisation ya pete na nzela ya CSS.

Bozua ba Icônes ya Bootstrap

Ba Icônes ya Bootstrap

Sala yango ya yo na ba Thèmes officiels ya Bootstrap

Mema Bootstrap na niveau oyo elandi na ba thèmes premium oyo ewutaka na marché officiel ya ba Thèmes ya Bootstrap . Ba thèmes etongami na Bootstrap lokola ba cadres na bango moko oyo epanzani, riche na ba composants ya sika mpe ba plugins, documentation, mpe bisaleli ya kotonga ya makasi.

Botala na ba Thèmes ya Bootstrap

Ba Thèmes ya Bootstrap