Gara qabiyyee ijootti darbi
Check
Haaraa v5.2 keessatti Jijjiiramoota CSS, deebii kan kennu offcanvas, faayilii haaraa, fi kkf! Bootstrap jedhamuun beekama

Bootstrap waliin marsariitiiwwan saffisaa, deebii kennan ijaari

Meeshaa fuulduraa humna guddaa qabu, babal'ifamuu danda'uu fi amaloota hedduu qabu. Sass waliin ijaaruu fi dhuunfachiisi, sirna giiridii fi qaamolee dursee ijaarame fayyadami, fi pirojektoota gara jireenyaatti fidi, pilaaginoota JaavaScript humna qabaniin.

npm i [email protected]
Docs dubbisaa

Yeroo ammaa v5.2.1 · Buufadhu · v4.6.x docs · Gadhiifaman hunda

Karaa barbaadde kamiinuu jalqabi

Bootstrap waliin gara ijaarsaatti sirriitti utaali—CDN fayyadami, karaa bulchaa paakeejii fe'i, ykn koodii madda buufadhu.

Docs fe'iinsaa dubbisi

Karaa bulchaa paakeejii fe'i

Faayilota Sass fi JavaScript madda Bootstrap karaa npm, RubyGems, Composer, ykn Meteor fe'i. Fe'iinsi paakeejii bulfamu galmee ykn iskiriiptii ijaarsa guutuu keenya hin dabalatu. Akkasumas karaa npm pirojektii Bootstrap saffisaan uumuuf repo unkaa npm keenya fayyadamuu dandeessu.

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

Odeeffannoo dabalataa fi hoggantoota paakeejii dabalataaf galmeewwan fe'iinsaa keenya dubbisaa .

Karaa CDN dabalaa

Yeroo Bootstrap'n CSS ykn JS qindaa'e qofa hammachuu barbaaddu, jsDelivr fayyadamuu dandeessa . See it in action with our simple quick start , ykn fakkeenyota daawwachuun pirojektii itti aanu utaalchi. Akkasumas Popper fi JS keenya addaan baasuu filachuu dandeessu .

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

Qajeelfama jalqabbii keenya dubbisaa

Faayilota madda Bootstrap pirojektii haaraa keessatti qajeelfamoota ofiisaa keenyaan dabaluu irratti utaalcha argadhu.

Webpack jedhamuun beekama Waraqaan kan marame Vite

Sass tiin waan hunda dhuunfachiisi

Bootstrap Sass fayyadamuun ijaarsa moojuulaa fi dhuunfamuu danda'uuf. Qaamolee si barbaachisan qofa galchi, filannoowwan addunyaa kan akka garaagarummaa fi golboo dandeessisi, fi jijjiiramoota, kaartaa, faankishinii, fi makaa keenyaan CSS mataa kee barreessi.

Waa'ee dhuunfachuu caalaatti baradhu

Bootstrap's Sass hunda dabali

Stylesheet tokko galchiiti amaloota CSS keenyaa hunda waliin gara fiigichaatti baate.

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

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

Waa'ee filannoowwan Sass addunyaa keenyaa caalaatti baradhu .

Waan si barbaachisu dabali

Karaa salphaa Bootstrap dhuunfachuuf—CSS si barbaachisu qofa hammachiisi.

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

Waa'ee Bootstrap Sass waliin fayyadamuu caalaatti baradhu .

Jijjiiramoota CSS waliin yeroo qabatamaa keessatti ijaaruu fi dheeressuu

Bootstrap 5 tokkoon tokkoon gadhiifamuu wajjin jijjiiramoota CSS akkaataa mata duree addunyaa, qaamolee dhuunfaa, fi illee faayidaa haala gaariin fayyadamuuf guddachaa jira. Jijjiiramoota kudhan hedduu halluuwwan, akkaataa qubee, fi kanneen biroo :rootsadarkaa bakka kamittiyyuu fayyadamuuf ni kennina. Qaamolee fi faayidaa irratti, jijjiiramoonni CSS gara gita barbaachisaa ta'etti bal'ifamanii salphaatti fooyya'uu danda'u.

Waa'ee jijjiiramoota CSS caalaatti baradhu

Jijjiiramoota CSS fayyadamuu

Jijjiiramoota addunyaa:root keenya kamiyyuu fayyadamii akkaataa haaraa barreessi. Jijjiiramoonni CSS var(--bs-variableName)gingilchaa fayyadamu fi qaamolee ijoolleetiin dhaalamuu danda'u.

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

Karaa jijjiiramoota CSS dhuunfachuu

Jijjiiramoota gita waliigalaa, qaama, ykn faayidaa irra darbi Bootstrap akkaataa barbaaddetti dhuunfachiisuuf. Tokkoon tokkoo seera irra deebi'anii labsuun hin barbaachisu, gatii jijjiiramaa haaraa qofa.

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

Qaamolee, API Faayidaa guutaa

Bootstrap 5 keessatti haaraa, faayidaan keenya amma Utility API keenyaan uumamu . Akka kaartaa Sass kan feature-packed ta'ee fi saffisaa fi salphaatti haala barbaadamuun jijjiiramuu danda'utti ijaarre. Gitoota faayidaa kamiyyuu dabaluu, haquu, ykn fooyyessuu salphaa ta'ee hin beeku. Faayidaawwan deebii akka kennan godhi, garaagarummaa gita sobaa dabali, fi maqaa amala isaaniif kenni.

Waa'ee tajaajila fayyadamtootaa caalaatti baradhu Qaamolee haala barbaadamuun qophaa'an qoradhu

Qaamolee saffisaan dhuunfachiisi
// 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,
    )
  )
);

Ijaarsa JaavaScript humna guddaa qabu jQuery malee

Salphaatti qaamolee dhokataa jijjiiramuu danda'an, moodaalota fi menu offcanvas, popovers fi tooltips, fi waan baay'ee dabali-hunduu jQuery malee. JavaScript Bootstrap keessatti HTML-first dha, kana jechuun plugins dabaluu akkuma dataamaloota dabaluu salphaadha. To'annoo dabalataa barbaadduu? Sagantaadhaan pilaaginoota dhuunfaa hammachiisi.

Waa'ee Bootstrap JavaScript caalaatti baradhu

API amaloota deetaa

HTML barreessuu osoo dandeessu maaliif JavaScript baay'ee barreessi? Ijaarsi JaavaScript Bootstrap hundi jechuun ni danda'ama API deetaa sadarkaa tokkoffaa kan qaban yoo ta'u, dataamaloota dabaluu qofaan JaavaScript akka fayyadamtu si dandeessisa.

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

Waa'ee JaavaScript keenyaa akka moojuulotaatti fi API sagantaa fayyadamuu caalaatti baradhu .

Tuuta pilaaginoota bal'aa

Bootstrap plugins kudhan kanneen gara pirojektii kamiyyuutti gadi dhiisuu dandeessan qaba. Yeroo tokkotti hunda isaanii gadi dhiisi, ykn kanneen si barbaachisan qofa filadhu.

Akeekkachiisuu

Ergaawwan akeekkachiisaa fayyadamtoota keetti agarsiisi fi dhoksi.

Furtuu

Sagantaadhaan haalata socho'aa qareedhaaf to'adhu.

Kaarooseelii

Agarsiisa islaayidii fuula kamiyyuu irratti dabali, deeggarsa qaxxaamuraa dabalatee.

Ijaarsi kufuu

Naannoowwan qabiyyee bal'isi fi kuffisuu, ykn akoordii uumi.

Gadi bu'aa

Menuuwwan hidhannoowwan, gochoota, unkaalee fi kkf uumi.

Moodaalii

Qaaqawwan socho'oo fi deebii kennan piroojektii kee irratti dabali.

Kanfaasiin ala

Sajoo cinaa dhokataa gara fuula kamiyyuutti ijaaruu fi jijjiiri.

Popover jedhamuun beekama

Haguuggii amala uumi. Popper irratti ijaarame.

Scrollspy jechuun kan beekamu

Hidhamtoota nav socho'an ofumaan fuula tarree irratti hundaa'uun fooyyessa.

Tab

Qaamolee Bootstrap nav qabiyyee akka jijjiiran hayyami.

Muraa daabboo abiddarratti diimessanii gogsuu

Daawwattoota keetiif beeksisa agarsiisi fi dhoksi.

Gorsa meeshaa

Gorsa meeshaalee biraawzari kanneen amala ta'aniin bakka buusi. Popper irratti ijaarame.

Bootstrap Icons tiin dhuunfachiisi

Bootstrap Icons mana kitaabaa mallattoo SVG madda banaa ta'ee fi gilgaalota 1,500 ol kan qabu yoo ta'u, gadhiifama hunda keessatti kanneen biroo dabalameera. Isaanis pirojektii kamiyyuu keessatti akka hojjetaniif kan qophaa'anidha, Bootstrap ofii isaa fayyadamtus fayyadamuu baattan. Akka SVGs ykn qubee mallattootti isaan fayyadami-filannoowwan lamaan iskeelii veektarii fi karaa CSS dhuunfachuu salphaa siif kennu.

Mallattoolee Bootstrap argadhaa

Mallattoolee Bootstrap

Bootstrap Themes ofiisaa wajjin kan keessan godhaa

Bootstrap sadarkaa itti aanutti fudhadhu mata dureewwan gatii olaanaa qaban gabaa Bootstrap Themes ofiisaa irraa . Mata dureewwan Bootstrap irratti akka unkaalee bal'aa mataa isaaniitti ijaaramaniiru, qaamolee haaraa fi pilaaginoota, galmee, fi meeshaalee ijaarsaa humna qabaniin badhaadhaa.

Mata dureewwan Bootstrap daawwadhu

Mata dureewwan Bootstrap