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.
Yeroo ammaa v5.2.1 · Buufadhu · v4.6.x docs · Gadhiifaman hunda
Bootstrap waliin gara ijaarsaatti sirriitti utaali—CDN fayyadami, karaa bulchaa paakeejii fe'i, ykn koodii madda buufadhu.
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.1Odeeffannoo dabalataa fi hoggantoota paakeejii dabalataaf galmeewwan fe'iinsaa keenya dubbisaa .
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>
Faayilota madda Bootstrap pirojektii haaraa keessatti qajeelfamoota ofiisaa keenyaan dabaluu irratti utaalcha argadhu.
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.
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 .
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 .
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.
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);
}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;
}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
// 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,
)
)
);
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.
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 .
Bootstrap plugins kudhan kanneen gara pirojektii kamiyyuutti gadi dhiisuu dandeessan qaba. Yeroo tokkotti hunda isaanii gadi dhiisi, ykn kanneen si barbaachisan qofa filadhu.
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.
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.
