U gudub nuxurka muhiimka ah
Check
Ku cusub v5.2 Doorsoomayaasha CSS, canvas ka jawaabaya, yutiilitida cusub, iyo in ka badan! Bootstrap

Si degdeg ah u dhis, goobo ka jawaaba Bootstrap

Xoog badan, la fidin karo, oo sifo leh xirmooyin agabka hore. Ku dhis oo ku habbee Sass, ka faa'iidayso nidaamka xariijimaha hore loo dhisay iyo qaybaha, oo la imow mashaariicda nolosha ee leh furayaasha JavaScript ee xoogga badan.

npm i [email protected]
Akhri dukumentiyada

Hadda v5.2.1 · Soo dejiso · v4.6.x docs · Dhammaan siidaynta

Ku bilow sidaad doonto

Isla markiiba u bood dhismaha Bootstrap- isticmaal CDN-ga, ku rakib maamulaha xirmada, ama soo deji koodka isha.

Akhri dokumentiyada rakibaadda

Ku rakib maamulaha xirmada

Ku rakib isha Bootstrap Sass iyo faylalka JavaScript ee npm, RubyGems, laxanka, ama Meteor. Xidhmada la maareeyay kuma jiraan dukumeenti ama qoraaladayada dhismaha oo dhamaystiran. Waxa kale oo aad isticmaali kartaa qaab-dhismeedkayaga npm repo si aad si dhakhso ah u abuurto mashruuca Bootstrap adigoo isticmaalaya npm.

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

Akhri dukumeentiyada rakibaadda macluumaad dheeri ah iyo maareeyayaasha xirmooyinka dheeraadka ah.

Ku dar CDN

Markaad kaliya u baahan tahay inaad ku darto Bootstrap's CSS ama JS la soo ururiyey, waxaad isticmaali kartaa jsDelivr . U arag si ficil ah bilow fudud oo degdeg ah , ama baadh tusaalooyinka si aad u booddo mashruucaaga xiga. Waxa kale oo aad dooran kartaa inaad ku darto Popper iyo JS-kayaga si gaar ah .

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

Akhri hagayaashayada bilawga ah

Hel boodi oo ay ku jiraan faylasha isha Bootstrap ee mashruuc cusub oo wata hagayaashayada rasmiga ah.

xirmo mareegaha Baakad Vite

Wax walba ku beddel Sass

Bootstrap waxay u isticmaashaa Sass qaab dhismeed modular ah oo la habeyn karo. Soo rar kaliya qaybaha aad u baahan tahay, awood u yeelo doorashooyin caalami ah sida gradients iyo hadh, oo ku qor CSS kaaga doorsoomayaal, khariidado, hawlqabadyadayada, iyo isku darka

Wax badan ka baro habaynta

Ku dar dhammaan Bootstrap's Sass

Soo rar hal xaashi qaab oo waxaad ka baxdey tartamada sifo kasta oo CSS ah.

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

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

Baro wax badan oo ku saabsan doorashooyinkeena caalamiga ah ee Sass .

Ku dar waxaad u baahan tahay

Habka ugu fudud ee lagu habeyn karo Bootstrap-ka ku dar CSS-ga aad u baahan tahay oo keliya.

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

Baro wax badan oo ku saabsan isticmaalka Bootstrap leh Sass .

Ku dhis oo ku kordhi wakhtiga dhabta ah doorsoomayaasha CSS

Bootstrap 5 waxay la soo baxaysaa siideyn kasta si ay si wanaagsan uga faa'ideysato doorsoomayaasha CSS ee qaababka mawduucyada caalamiga ah, qaybaha gaarka ah, iyo xitaa yutiilitiyada. Waxaan bixinaa daraasiin doorsoomayaal ah midabada, qaababka font, iyo in ka badan oo :rootheer loogu isticmaalo meel kasta. Qaybaha iyo utility-yada, doorsoomayaasha CSS waxay ku kooban yihiin fasalka khuseeya oo si fudud ayaa wax looga beddeli karaa.

Wax badan ka baro doorsoomayaasha CSS

Isticmaalka doorsoomayaasha CSS

Isticmaal mid kasta oo ka mid ah doorsoomayaashayada caalamiga:root ah si aad u qorto qaabab cusub. Doorsoomayaasha CSS waxay isticmaalaan var(--bs-variableName)syntax waxaana dhaxli kara canaasiirta carruurta.

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

Ku habeynta iyada oo loo marayo doorsoomayaasha CSS

Tirtir doorsoomayaal caalami ah, qayb, ama utility si aad u habayso Bootstrap sida aad jeceshahay. Looma baahna in dib loo shaaciyo xeer kasta, kaliya qiime cusub oo doorsooma.

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

Qaybaha, la kulanta Utility API

Ku cusub Bootstrap 5, adeegyadeena hadda waxaa soo saaray Utility API . Waxaan u dhisnay khariidad Sass ka kooban oo si dhakhso ah oo fudud loo habeyn karo. Marna may fududayn in lagu daro, ka saaro, ama wax laga beddelo fasal kasta oo utility ah. Samee utilities kuwa jawaaba, ku dar kala duwanaanshiyaha-fasalka been abuurka ah, oo sii magacyo gaar ah.

Wax badan ka baro adeegyada Baadh qaybaha la habeeyey

Degdeg u habbee qaybaha
// 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,
    )
  )
);

Quwadaha JavaScript ee xoogga leh oo aan lahayn jQuery

Si fudud ugu dar walxaha qarsoon ee la rogrogi karo, moodal iyo menus-ka-baxsan, popovers iyo aaladaha aaladaha, iyo wax badan oo kale—dhammaan jQuery la'aan. JavaScript ee Bootstrap waa HTML-koowaad, taas oo macnaheedu yahay ku darista plugins waa sida ugu fudud ee lagu daro datasifooyinka. Ma u baahan tahay xakameyn dheeraad ah? Ku dar plugins shaqsi barnaamij ahaan.

Wax badan ka baro Bootstrap JavaScript

Xogta sifada API

Maxaad u qortaa JavaScript badan markaad qori karto HTML? Ku dhawaad ​​dhammaan Bootstrap's JavaScript plugins waxay ka kooban yihiin xogta heerka koowaad API, taasoo kuu oggolaanaysa inaad isticmaasho JavaScript kaliya adigoo ku daraya datasifooyin.

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

Baro wax badan oo ku saabsan JavaScript-kayada sida cutubyo iyo adeegsiga barnaamijka API-ga .

set oo dhamaystiran oo plugins ah

Bootstrap wuxuu leeyahay darsin plugins oo aad ku dhex dhici karto mashruuc kasta. Hal mar ku wada rid, ama dooro kuwa aad u baahan tahay.

Digniin

Tus oo qari fariimaha digniinta isticmaalayaashaada.

Badhanka

Barnaamij ahaan u xakamee gobolka firfircoon ee badhamada.

Carousel

Ku dar sawir-qaadista bog kasta, oo ay ku jirto taageerada is-dhaafsiga.

Burbur

Balaadhi oo burburi aagagga tusmada, ama samee heshiisyo.

Hoos u dhigid

Samee liiska isku xirka, falalka, foomamka, iyo in ka badan.

Modal

Ku dar wada hadal dabacsan oo ka jawaabaya mashruucaaga.

Offcanvas

Dhis oo u beddel dhinacyada qarsoon ee bog kasta.

Popover

Samee dulsaar gaar ah Lagu dhisay Popper

Scrollspy

Si otomaatig ah u cusboonaysii isku xidhka nav ee firfircoon ee ku salaysan rogid bogga.

Tab

U oggolow Bootstrap nav qaybaha inay beddelaan waxa ku jira.

Toast

Tus oo qari ogeysiisyada booqdayaashaada.

Tilmaamaha Qalabka

Ku beddel aaladaha browserka kuwo gaar ah. Lagu dhisay Popper

Ku shakhsiyeeyo Bootstrap Icons

Bootstrap Icons waa maktabad sumadda SVG il furan oo ka kooban in ka badan 1,500 glyphs, iyadoo lagu daray siideyn kasta. Waxaa loogu talagalay inay ka shaqeeyaan mashruuc kasta, haddii aad isticmaasho Bootstrap lafteeda iyo haddii kale. U isticmaal sida SVG-yada ama xarfaha sumadda-labadaba ikhtiyaari waxay ku siinayaan cabbirida vector iyo habaynta fudud ee CSS.

Hel Astaamaha Bootstrap

Astaamaha Bootstrap

Ka dhig kaaga mawduucyada Bootstrap-ka rasmiga ah

U qaado Bootstrap heerka ku xiga mawduucyo qaali ah oo ka socda goobta suuqa ee Bootstrap Themes . Mawduucyada waxaa lagu dhisay Bootstrap sidii qaab-dhismeedkooda la fidiyay, oo qani ku ah qaybo cusub iyo plugins, dukumeenti, iyo qalab dhis oo xoog badan.

Ka baadh mawduucyada Bootstrap

Mawduucyada Bootstrap