Biçe ser naveroka sereke
Check
Di v5.2 de nû Guherînên CSS, offcanvas bersivdar, karûbarên nû, û bêtir! Bootstrap

Bi Bootstrap re malperên bilez, bersivdar ava bikin

Amûrên pêşiyê yên hêzdar, berfireh û taybetmendî. Bi Sass re ava bikin û xweş bikin, pergala torê û hêmanên pêş-avakirî bikar bînin, û bi pêvekên JavaScript-ê yên bihêz projeyan bidin jiyandin.

npm i [email protected]
Belgeyan bixwînin

Niha v5.2.1 · Daxistin · belgeyên v4.6.x · Hemî berdan

Bi her awayî ku hûn dixwazin dest pê bikin

Bi Bootstrap-ê re rast dakêşin nav avahiyê - CDN-ê bikar bînin, wê bi rêvebirê pakêtê saz bikin, an koda çavkaniyê dakêşin.

Belgeyên sazkirinê bixwînin

Bi rêya rêveberê pakêtê saz bikin

Bi navgîniya npm, RubyGems, Composer, an Meteor pelên çavkaniya Bootstrap Sass û JavaScript saz bikin. Sazkirinên bi rêve birina pakêtê belgekirin an jî skrîptên avakirina meya tevahî nagirin. Her weha hûn dikarin repoya meya şablonê npm bikar bînin da ku zû projeyek Bootstrap bi navgîniya npm ve çêbikin.

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

Ji bo bêtir agahdarî û rêveberên pakêtê yên din belgeyên sazkirinê yên me bixwînin .

Bi rêya CDN vekin

Gava ku hûn tenê hewce ne ku CSS an JS-ya berhevkirî ya Bootstrap-ê têxin nav xwe, hûn dikarin jsDelivr bikar bînin . Bi destpêka meya bilez a hêsan re wê di çalakiyê de bibînin , an jî mînakan bigerin da ku hûn projeya xweya paşîn dest pê bikin. Her weha hûn dikarin hilbijêrin ku Popper û JS-ya me ji hev veqetînin .

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

Rêbernameyên me yên destpêkirinê bixwînin

Bi rêberên me yên fermî re di projeyek nû de pelên çavkaniyê yên Bootstrap-ê tevbigerin.

Webpack Pakêt Vite

Bi Sass re her tiştî xweş bikin

Bootstrap Sass-ê ji bo mîmariyek modular û xwerû bikar tîne. Tenê hêmanên ku hûn hewce ne derxînin, vebijarkên gerdûnî yên mîna gradient û siya çalak bikin, û CSS-ya xwe bi guhêrbar, nexşe, fonksiyon û mîksên me re binivîsin.

Di derbarê xwerûkirinê de bêtir fêr bibin

Hemî Sassên Bootstrap-ê tevde bikin

Yek şêwazek derxînin û hûn bi her taybetmendiya meya CSS-ê ve diçin pêşbaziyan.

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

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

Di derbarê vebijarkên me yên Sass ên gerdûnî de bêtir fêr bibin .

Tiştê ku hûn hewce ne têxin nav xwe

Rêya herî hêsan a xweşkirina Bootstrap-tenê CSS-ya ku hûn hewce ne vedigirin.

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

Di derbarê karanîna Bootstrap bi Sass re bêtir fêr bibin .

Bi guherbarên CSS-ê di wextê rast de ava bikin û dirêj bikin

Bootstrap 5 bi her serbestberdanê re pêşve diçe da ku guhêrbarên CSS-ê ji bo şêwazên mijara gerdûnî, hêmanên kesane, û tewra jî karûbaran çêtir bikar bîne. Em bi dehan guhêrbar ji bo reng, şêwazên tîpan, û hêj bêtir di :rootastek de ji bo karanîna li her deverê peyda dikin. Li ser pêkhate û karûbaran, guhêrbarên CSS li çîna têkildar têne veqetandin û bi hêsanî têne guheztin.

Di derbarê guherbarên CSS de bêtir fêr bibin

Bikaranîna guherbarên CSS

Ji bo nivîsandina şêwazên nû yek ji guhêrbarên me yên gerdûnî bikar bînin. :rootGuherbarên CSS var(--bs-variableName)hevoksaziyê bikar tînin û dikarin ji hêla hêmanên zarokan ve werin mîras kirin.

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

Xweserkirina bi guhêrbarên CSS-ê

Guherbarên çîna gerdûnî, pêkhatî, an bikêrhatî bişopînin da ku Bootstrap çawa ku hûn dixwazin xweş bikin. Ne hewce ye ku her qaîdeyek ji nû ve were ragihandin, tenê nirxek guhêrbarek nû.

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

Pêkhatî, bi API-ya Karûbar re hevdîtin bikin

Di Bootstrap 5-ê de nû, karûbarên me naha ji hêla Utility API- ya me ve têne çêkirin . Me ew wekî nexşeyek Sass-a taybetmendî çêkir ku dikare zû û bi hêsanî were xweş kirin. Zêdekirin, rakirin, an guheztina dersên bikêrhatî qet hêsantir nebû. Karûbaran bersivdar bikin, guhertoyên pseudo-class zêde bikin, û navên xwerû bidin wan.

Di derheqê karûbaran de bêtir fêr bibin Li pêkhateyên xwerû bigerin

Bi lez hêmanan xweş bikin
// 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,
    )
  )
);

Pêvekên hêzdar ên JavaScript bêyî jQuery

Hêmanên veşartî yên veguhezbar, modal û menuyên offcanvas, popover û serişteyên amûran, û hêj bêtir zêde bikin - hemî bêyî jQuery. JavaScript di Bootstrap de HTML-yekemîn e, ku tê vê wateyê ku lê zêdekirina pêvekan bi qasî lê zêdekirina datataybetmendiyan hêsan e. Zêdetir kontrol hewce ne? Pêvekên ferdî bi bernamekî têxin nav xwe.

Di derbarê Bootstrap JavaScript de bêtir fêr bibin

Taybetmendiya daneyê API

Dema ku hûn dikarin HTML-ê binivîsin çima bêtir JavaScript binivîsin? Hema hema hemî pêvekên JavaScript-ê yên Bootstrap API-ya daneya pola yekem vedihewînin, ku dihêle hûn JavaScript-ê tenê bi lê zêdekirina datataybetmendiyan bikar bînin.

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

Di derbarê JavaScript-a me de wekî modul û karanîna API-ya bernamesaz bêtir fêr bibin .

Komek berfireh a pêvekan

Bootstrap bi dehan pêvekan vedihewîne ku hûn dikarin di her projeyê de bavêjin. Wan bi carekê davêjin, an tenê yên ku hûn hewce ne hilbijêrin.

Hişyar

Ji bikarhênerên xwe re peyamên hişyariyê nîşan bidin û veşêrin.

Pişkov

Ji bo bişkokan bi bername rewşa çalak kontrol bikin.

Carousel

Slideshows li her rûpelê zêde bikin, tevî piştgiriya ji bo crossfade.

Jiberhevketin

Zeviyên naverokê berfireh bikin û hilweşînin, an jî akordeyonan biafirînin.

Dropdown

Pêşekên girêdan, çalakî, form û hêj bêtir biafirînin.

Modal

Di projeya xwe de diyalogên maqûl û bersivdar zêde bikin.

Offcanvas

Di her rûpelê de kêlekên veşartî ava bikin û biguhezînin.

Popover

Zeviyên xwerû biafirînin. Li ser Popper hatî çêkirin.

Scrollspy

Li ser bingeha geroka rûpelê bixweber girêdanên navika çalak nûve bikin.

Tab

Destûr bidin pêkhateyên navika Bootstrap ku naverokê biguherînin.

Tost

Agahdariyên ji mêvanên xwe re nîşan bidin û veşêrin.

Tooltip

Serişteyên toolbarên gerokê bi yên xwerû veguherînin. Li ser Popper hatî çêkirin.

Wê bi îkonên Bootstrap kesane bikin

Bootstrap Icons pirtûkxaneyek îkonê ya SVG-ya çavkaniyek vekirî ye ku zêdetirî 1,500 glyph vedihewîne, ku her serbestberdanek bêtir lê zêde dibe. Ew hatine sêwirandin ku di her projeyekê de bixebitin, gelo hûn Bootstrap bixwe bikar tînin an na. Wan wekî SVG an tîpên îkonê bikar bînin - her du vebijark bi navgîniya CSS-ê pîvana vektor û xwerûkirina hêsan didin we.

Îkonên Bootstrap bistînin

Îkonên Bootstrap

Bi Mijarên Bootstrap-ê yên fermî re wê bikin ya xwe

Bootstrap-ê bi mijarên premium ji sûka fermî ya Mijarên Bootstrap -ê bigihînin astek din . Mijar li ser Bootstrap-ê wekî çarçoveyên xwe yên dirêjkirî têne çêkirin, bi hêman û pêvekên nû, belgekirin, û amûrên avakirina hêzdar ve dewlemend in.

Mijarên Bootstrap bigerin

Mijarên Bootstrap