Гузаштан ба мундариҷаи асосӣ
Check
Нав дар v5.2 Тағйирёбандаҳои CSS, тасвирҳои ғайрифаъол, утилитаҳои нав ва ғайра! Bootstrap

Бо Bootstrap сайтҳои зуд ва ҷавобгӯро созед

Маҷмӯаи абзорҳои пуриқтидор, васеъшаванда ва дорои хусусиятҳо. Бо Sass созед ва танзим кунед, система ва ҷузъҳои шабакаи қаблан сохташударо истифода баред ва лоиҳаҳоро бо плагинҳои пурқуввати JavaScript ба ҳаёт оваред.

npm i [email protected]
Ҳуҷҷатҳоро хонед

Дар айни замон v5.2.1 · Зеркашӣ · v4.6.x docs · Ҳама нашрҳо

Ҳар гуна роҳе, ки мехоҳед, оғоз кунед

Бо Bootstrap рост ба сохтмон ҷаҳед - CDN-ро истифода баред, онро тавассути мудири баста насб кунед ё рамзи сарчашмаро зеркашӣ кунед.

Ҳуҷҷатҳои насбкуниро хонед

Тавассути мудири баста насб кунед

Файлҳои манбаи Bootstrap Sass ва JavaScript-ро тавассути npm, RubyGems, Composer ё Meteor насб кунед. Насбҳои бастаи идорашаванда ҳуҷҷатҳо ё скриптҳои пурраи моро дар бар намегиранд. Шумо инчунин метавонед репои шаблони npm -и моро барои зуд тавлид кардани лоиҳаи Bootstrap тавассути npm истифода баред.

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

Барои маълумоти бештар ва мудирони бастаҳои иловагӣ ҳуҷҷатҳои насби моро хонед .

Ба воситаи CDN дохил кунед

Вақте ки шумо танҳо бояд CSS ё JS-и тартибдодашудаи Bootstrap -ро дохил кунед, шумо метавонед jsDelivr -ро истифода баред . Бо оғози зуди мо онро дар амал бубинед ё мисолҳоро паймоиш кунед, то лоиҳаи навбатии худро оғоз кунед. Шумо инчунин метавонед интихоб кунед, ки Popper ва JS-и моро алоҳида дохил кунед.

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

Дастурҳои оғози моро хонед

Бо дастурҳои расмии мо ворид кардани файлҳои сарчашмаи Bootstrap дар лоиҳаи нав шавед.

Webpack Постка Вите

Ҳама чизро бо Sass фармоиш диҳед

Bootstrap Sass-ро барои меъмории модулӣ ва фармоишӣ истифода мебарад. Танҳо ҷузъҳои ба шумо лозимиро ворид кунед, имконоти глобалиро ба монанди градиентҳо ва сояҳо фаъол созед ва CSS-и худро бо тағирёбандаҳо, харитаҳо, функсияҳо ва омехтаҳои мо нависед.

Дар бораи мутобиқсозӣ бештар маълумот гиред

Ҳама Sass-и Bootstrap-ро дар бар гиред

Як ҷадвали услубро ворид кунед ва шумо бо ҳар як хусусияти CSS-и мо ба мусобиқаҳо меравед.

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

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

Дар бораи имконоти глобалии Sass маълумоти бештар гиред .

Он чизеро, ки ба шумо лозим аст, дохил кунед

Роҳи осонтарини танзими Bootstrap - танҳо CSS-и ба шумо лозимиро дар бар мегирад.

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

Дар бораи истифодаи Bootstrap бо Sass маълумоти бештар гиред .

Бо тағирёбандаҳои CSS дар вақти воқеӣ созед ва васеъ кунед

Bootstrap 5 бо ҳар як нашр такмил меёбад, то тағирёбандаҳои CSS-ро барои услубҳои глобалии мавзӯъ, ҷузъҳои инфиродӣ ва ҳатто утилитаҳо беҳтар истифода барад. Мо даҳҳо тағирёбандаҳоро барои рангҳо, услубҳои ҳуруф ва ғайра дар :rootсатҳ барои истифода дар ҳама ҷо пешниҳод мекунем. Дар ҷузъҳо ва утилитаҳо, тағирёбандаҳои CSS ба синфи мувофиқ фаро гирифта шудаанд ва онҳоро ба осонӣ тағир додан мумкин аст.

Дар бораи тағирёбандаҳои CSS бештар маълумот гиред

Истифодаи тағирёбандаҳои CSS

Барои навиштани услубҳои нав ягон тағирёбандаи глобалии:root моро истифода баред . Тағйирёбандаҳои CSS var(--bs-variableName)синтаксисро истифода мебаранд ва метавонанд аз ҷониби унсурҳои кӯдакон ба мерос гирифта шаванд.

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

Мутобиқсозӣ тавассути тағирёбандаҳои CSS

Тағирёбандаҳои синфи глобалӣ, ҷузъӣ ё утилитаҳоро бекор кунед, то Bootstrap-ро чӣ гуна ба шумо маъқул созед. Ҳар як қоидаро дубора эълон кардан лозим нест, танҳо арзиши тағирёбандаи нав.

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

Компонентҳо, бо API Utility мувофиқат кунед

Дар Bootstrap 5 нав, хидматҳои мо ҳоло аз ҷониби API Utility мо тавлид мешаванд . Мо онро ҳамчун харитаи пур аз хусусияти Sass сохтаем, ки онро зуд ва ба осонӣ танзим кардан мумкин аст. Илова кардан, нест кардан ё тағир додани ягон синфҳои коммуналӣ ҳеҷ гоҳ осон набуд. Утилитаҳоро ҷавобгӯ гардонед, вариантҳои псевдосинфиро илова кунед ва ба онҳо номҳои фармоишӣ диҳед.

Дар бораи хизматрасониҳои коммуналӣ бештар маълумот гиред Ҷузъҳои фармоиширо омӯзед

Компонентҳоро зуд танзим кунед
// 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,
    )
  )
);

Плагинҳои пурқуввати JavaScript бе jQuery

Унсурҳои пинҳонии ивазшаванда, менюҳои модальҳо ва берун аз канвас, поповҳо ва маслиҳатҳои асбобҳо ва ғайраро ба осонӣ илова кунед - ҳама бе jQuery. JavaScript дар Bootstrap HTML-аввал аст, яъне илова кардани плагинҳо мисли илова кардани dataатрибутҳо осон аст. Назорати бештар лозим аст? Ба таври барномавӣ плагинҳои инфиродӣ дохил кунед.

Дар бораи Bootstrap JavaScript маълумоти бештар гиред

API аттрибутҳои додаҳо

Чаро бештар JavaScript нависед, вақте ки шумо метавонед HTML нависед? Қариб ҳамаи плагинҳои JavaScript-и Bootstrap дорои API-и дараҷаи аввал мебошанд, ки ба шумо имкон медиҳад JavaScript-ро танҳо бо илова кардани dataатрибутҳо истифода баред.

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

Дар бораи JavaScript-и мо ҳамчун модулҳо ва истифодаи API-и барномавӣ бештар маълумот гиред .

Маҷмӯи ҳамаҷонибаи плагинҳо

Bootstrap дорои даҳҳо плагинҳо мебошад, ки шумо метавонед ба ҳама гуна лоиҳа дохил шавед. Ҳама онҳоро якбора гузоред ё танҳо онҳоеро, ки ба шумо лозиманд, интихоб кунед.

Огоҳӣ

Паёмҳои огоҳкунандаро ба корбарони худ нишон ва пинҳон кунед.

Тугма

Ҳолати фаъоли тугмаҳоро ба таври барномавӣ назорат кунед.

Карусель

Ба ҳама саҳифа слайд-шоу илова кунед, аз ҷумла дастгирии crossfade.

Фурӯпошӣ

Майдонҳои мундариҷаро васеъ ва вайрон кунед ё аккордеон эҷод кунед.

Поёнафтода

Менюҳои истинодҳо, амалҳо, шаклҳо ва ғайра эҷод кунед.

Модал

Ба лоиҳаи худ муколамаҳои чандир ва ҷавобгӯ илова кунед.

Offcanvas

Панелҳои паҳлӯии пинҳоншударо дар ҳама гуна саҳифа созед ва иваз кунед.

Поповер

Эҷоди қабатҳои фармоишӣ. Дар Поппер сохта шудааст.

Scrollspy

Истинодҳои фаъоли навро дар асоси паймоиши саҳифа ба таври худкор навсозӣ кунед.

Таб

Ба ҷузъҳои Nav Bootstrap иҷозат диҳед, ки мундариҷаро иваз кунанд.

Тост

Ба меҳмонони худ огоҳиномаҳоро нишон диҳед ва пинҳон кунед.

Маслиҳат

Маслиҳатҳои абзорҳои браузерро бо маслиҳатҳои фармоишӣ иваз кунед. Дар Поппер сохта шудааст.

Онро бо Icons Bootstrap шахсӣ кунед

Bootstrap Icons як китобхонаи кушодаасоси SVG мебошад, ки дорои зиёда аз 1500 глифҳо мебошад, ки ҳар як нашри дигар илова карда мешавад. Онҳо барои кор кардан дар ҳама гуна лоиҳа тарҳрезӣ шудаанд, новобаста аз он ки шумо худи Bootstrap-ро истифода мебаред ё не. Онҳоро ҳамчун SVG ё шрифтҳои нишона истифода баред - ҳарду интихоб ба шумо миқёси векторӣ ва мутобиқсозии осон тавассути CSS медиҳад.

Нишонаҳои Bootstrap гиред

Нишонаҳои Bootstrap

Онро бо мавзӯъҳои расмии Bootstrap аз они шумо созед

Bootstrap-ро бо мавзӯъҳои олӣ аз бозори расмии Bootstrap Themes ба сатҳи оянда баред . Мавзӯъҳо дар Bootstrap ҳамчун чаҳорчӯбаҳои васеъи худ сохта шудаанд, ки бо ҷузъҳо ва плагинҳои нав, ҳуҷҷатҳо ва абзорҳои пурқуввати сохтмон бой мебошанд.

Мавзӯъҳои Bootstrap-ро аз назар гузаронед

Мавзӯъҳои Bootstrap