Негізгі мазмұнға өту
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 арқылы қосыңыз

Сізге тек Bootstrap құрастырылған CSS немесе JS қосу қажет болғанда, 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 бастапқы файлдарын қосуды үйреніңіз.

Веб-пакет Сәлемдеме Vite

Барлығын Sass көмегімен теңшеңіз

Bootstrap модульдік және теңшелетін архитектура үшін Sass пайдаланады. Қажетті құрамдастарды ғана импорттаңыз, градиенттер мен көлеңкелер сияқты жаһандық опцияларды қосыңыз және айнымалылар, карталар, функциялар және араластырғыштармен жеке CSS жазыңыз.

Теңшеу туралы көбірек біліңіз

Барлық Bootstrap Sass-ті қосыңыз

Бір стиль кестесін импорттаңыз және сіз біздің 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";

Sass көмегімен Bootstrap пайдалану туралы көбірек біліңіз .

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

Құрамдас бөліктер, Utility API сәйкес келеді

Bootstrap 5-тегі жаңа, біздің утилиталарымыз енді Utility API арқылы жасалады . Біз оны жылдам және оңай теңшеуге болатын мүмкіндіктерге толы 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,
    )
  )
);

jQuery жоқ қуатты JavaScript плагиндері

Ауыстырылатын жасырын элементтерді, модальдарды және кенептен тыс мәзірлерді, қалқымалы терезелерді және құралдар кеңестерін және тағы басқаларды jQueryсіз оңай қосыңыз. dataBootstrap бағдарламасындағы JavaScript бірінші кезекте HTML болып табылады, яғни плагиндерді қосу атрибуттарды қосу сияқты оңай . Қосымша бақылау керек пе? Бағдарламалық түрде жеке плагиндерді қосыңыз.

Bootstrap JavaScript туралы көбірек біліңіз

Деректер атрибуты API

HTML жаза алатын болсаңыз, неге көбірек JavaScript жазуыңыз керек? dataBootstrap JavaScript плагиндерінің барлығына дерлік атрибуттарды қосу арқылы JavaScript-ті пайдалануға мүмкіндік беретін бірінші дәрежелі деректер API мүмкіндігі бар .

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

Модульдер ретінде және бағдарламалық API пайдалану арқылы JavaScript туралы көбірек біліңіз .

Плагиндердің толық жиынтығы

Bootstrap бағдарламасы кез келген жобаға қосуға болатын ондаған плагиндерді ұсынады. Олардың барлығын бірден салыңыз немесе қажет болғанын таңдаңыз.

Ескерту

Пайдаланушыларыңызға ескерту хабарларын көрсетіңіз және жасырыңыз.

Түйме

Түймелердің белсенді күйін бағдарламалы түрде басқарыңыз.

Карусель

Кез келген бетке слайд-шоуларды қосыңыз, соның ішінде кроссфадты қолдау.

Жыйрату

Мазмұн аймақтарын кеңейту және жию немесе аккордеондар жасау.

Түсіп қалу

Сілтемелер, әрекеттер, пішіндер және т.б. мәзірлерді жасаңыз.

Модаль

Жобаңызға икемді және жауап беретін диалогтарды қосыңыз.

Offcanvas

Жасырын бүйірлік тақталарды құрастырыңыз және кез келген бетке ауыстырыңыз.

Поповер

Арнаулы қабаттасуды жасаңыз. Попперге салынған.

Scrollspy

Бетті айналдыру негізінде белсенді шарлау сілтемелерін автоматты түрде жаңартыңыз.

қойындысы

Bootstrap navigasyon компоненттеріне мазмұнды ауыстырып қосуға рұқсат беріңіз.

Тост

Келушілеріңізге хабарландыруларды көрсетіңіз және жасырыңыз.

Құрал кеңесі

Браузердің кеңестерін реттелетіндермен ауыстырыңыз. Попперге салынған.

Оны Bootstrap белгішелері арқылы жекелендіріңіз

Bootstrap Icons — 1500-ден астам глифтері бар ашық бастапқы SVG белгішелері кітапханасы, әр шығарылымда көбірек қосылады. Олар Bootstrap қолданбасын пайдалансаңыз да, пайдаланбасаңыз да, кез келген жобада жұмыс істеуге арналған. Оларды SVG немесе белгіше қаріптері ретінде пайдаланыңыз — екі опция да векторлық масштабтауға және CSS арқылы оңай теңшеуге мүмкіндік береді.

Bootstrap белгішелерін алыңыз

Жүктеу белгішесі

Ресми Bootstrap тақырыптарымен оны өзіңіздікі етіңіз

Ресми Bootstrap Themes нарығындағы премиум тақырыптармен Bootstrap қолданбасын келесі деңгейге көтеріңіз . Тақырыптар Bootstrap жүйесінде жаңа құрамдас бөліктер мен плагиндерге, құжаттамаға және қуатты құрастыру құралдарына бай жеке кеңейтілген фреймворктер ретінде жасалған.

Bootstrap тақырыптарын шолыңыз

Bootstrap тақырыптары