Ruka hadi kwa yaliyomo kuu
Check
Mpya katika v5.2 Vigeu vya CSS, turubai sikivu, huduma mpya, na zaidi! Bootstrap

Jenga tovuti za haraka, zinazoitikia ukitumia Bootstrap

Kifurushi chenye nguvu, kinachoweza kupanuka na kilichojaa vipengele vya mbele. Unda na ubinafsishe ukitumia Sass, tumia mfumo wa gridi iliyojengwa awali na vijenzi, na uhuishe miradi ukitumia programu jalizi zenye nguvu za JavaScript.

npm i [email protected]
Soma hati

Hivi sasa v5.2.1 · Pakua · v4.6.x hati · Matoleo yote

Anza kwa njia yoyote unayotaka

Rukia moja kwa moja katika kujenga na Bootstrap—tumia CDN, isakinishe kupitia kidhibiti kifurushi, au pakua msimbo wa chanzo.

Soma hati za usakinishaji

Sakinisha kupitia kidhibiti kifurushi

Sakinisha faili za Chass na JavaScript chanzo cha Bootstrap kupitia npm, RubyGems, Mtunzi, au Meteor. Usakinishaji unaodhibitiwa na vifurushi haujumuishi hati au hati zetu kamili za muundo. Unaweza pia kutumia repo yetu ya kiolezo cha npm kutoa mradi wa Bootstrap haraka kupitia npm.

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

Soma hati zetu za usakinishaji kwa maelezo zaidi na wasimamizi wa ziada wa vifurushi.

Jumuisha kupitia CDN

Wakati unahitaji tu kujumuisha CSS iliyokusanywa ya Bootstrap au JS, unaweza kutumia jsDelivr . Ione ikitekelezwa na mwanzo wetu rahisi wa haraka , au vinjari mifano ili kuanzisha mradi wako unaofuata. Unaweza pia kuchagua kujumuisha Popper na JS yetu kando .

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

Soma miongozo yetu ya kuanza

Pata maelezo zaidi kujumuisha faili za chanzo za Bootstrap katika mradi mpya na miongozo yetu rasmi.

Webpack Sehemu Vite

Geuza kila kitu kukufaa ukitumia Sass

Bootstrap hutumia Sass kwa usanifu wa kawaida na unaoweza kubinafsishwa. Ingiza tu vipengee unavyohitaji, washa chaguo za kimataifa kama vile gradient na vivuli, na uandike CSS yako mwenyewe ukitumia vigeu vyetu, ramani, vitendaji na vichanganyiko.

Pata maelezo zaidi kuhusu kubinafsisha

Jumuisha Sass zote za Bootstrap

Ingiza laha moja ya mtindo na utaenda kwenye mbio na kila kipengele cha CSS yetu.

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

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

Pata maelezo zaidi kuhusu chaguo zetu za kimataifa za Sass .

Jumuisha kile unachohitaji

Njia rahisi zaidi ya kubinafsisha Bootstrap- inajumuisha tu CSS unayohitaji.

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

Pata maelezo zaidi kuhusu kutumia Bootstrap na Sass .

Unda na ueneze katika muda halisi ukitumia vigeu vya CSS

Bootstrap 5 inabadilika kwa kila toleo ili kutumia vyema vigeu vya CSS kwa mitindo ya mandhari ya kimataifa, vijenzi mahususi na hata huduma. Tunatoa anuwai nyingi za rangi, mitindo ya fonti, na zaidi kwa kiwango :rootcha matumizi popote. Kwenye vipengee na huduma, vigeu vya CSS vinaangaziwa kwa darasa husika na vinaweza kurekebishwa kwa urahisi.

Pata maelezo zaidi kuhusu vigezo vya CSS

Kwa kutumia vigezo vya CSS

Tumia vigeu vyetu vyovyote vya kimataifa kuandika:root mitindo mipya. Vigezo vya CSS hutumia var(--bs-variableName)sintaksia na vinaweza kurithiwa na vipengele vya watoto.

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

Kubinafsisha kupitia vigeu vya CSS

Batilisha vigeu vya kimataifa, kijenzi, au matumizi ili kubinafsisha Bootstrap jinsi unavyopenda. Hakuna haja ya kutangaza upya kila sheria, thamani mpya tu ya kutofautisha.

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

Vipengele, kutana na API ya Utility

Mpya katika Bootstrap 5, huduma zetu sasa zimetolewa na Utility API yetu . Tuliiunda kama ramani ya Sass iliyojaa vipengele ambayo inaweza kubinafsishwa kwa haraka na kwa urahisi. Haijawahi kuwa rahisi kuongeza, kuondoa, au kurekebisha aina zozote za matumizi. Fanya huduma kuitikia, ongeza vibadala vya aina bandia, na uzipe majina maalum.

Pata maelezo zaidi kuhusu huduma Chunguza vipengee vilivyobinafsishwa

Haraka Customize vipengele
// 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,
    )
  )
);

Programu-jalizi zenye nguvu za JavaScript bila jQuery

Ongeza kwa urahisi vipengee vilivyofichwa vinavyoweza kubadilika, miundo na menyu za nje ya turubai, popover na vidokezo vya zana, na mengine mengi—yote bila jQuery. JavaScript katika Bootstrap ni HTML-kwanza, ambayo inamaanisha kuongeza programu-jalizi ni rahisi kama kuongeza datasifa. Je, unahitaji udhibiti zaidi? Jumuisha programu-jalizi za kibinafsi kwa utaratibu.

Pata maelezo zaidi kuhusu Bootstrap JavaScript

API ya sifa ya data

Kwa nini uandike JavaScript zaidi wakati unaweza kuandika HTML? Takriban programu-jalizi zote za JavaScript za Bootstrap zina API ya data ya daraja la kwanza, inayokuruhusu kutumia JavaScript kwa kuongeza tu datasifa.

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

Pata maelezo zaidi kuhusu JavaScript yetu kama moduli na kutumia API ya programu .

Seti ya kina ya programu-jalizi

Bootstrap ina programu-jalizi kadhaa ambazo unaweza kuweka kwenye mradi wowote. Waandishe zote mara moja, au chagua zile tu unazohitaji.

Tahadhari

Onyesha na ufiche ujumbe wa tahadhari kwa watumiaji wako.

Kitufe

Dhibiti kwa utaratibu hali amilifu ya vitufe.

Jukwaa

Ongeza maonyesho ya slaidi kwenye ukurasa wowote, ikijumuisha usaidizi wa kufifia.

Kunja

Panua na ukunje maeneo ya maudhui, au uunde accordions.

Kunjuzi

Unda menyu za viungo, vitendo, fomu na zaidi.

Modal

Ongeza mazungumzo rahisi na sikivu kwa mradi wako.

Nje ya turubai

Unda na ugeuze pau zilizofichwa kuwa ukurasa wowote.

Popover

Unda viwekeleo maalum. Imejengwa juu ya Popper.

Scrollspy

Sasisha kiotomatiki viungo vinavyotumika vya nav kulingana na kusogeza kwa ukurasa.

Kichupo

Ruhusu vijenzi vya Bootstrap nav kugeuza yaliyomo.

Toast

Onyesha na ufiche arifa kwa wageni wako.

Kidokezo cha zana

Badilisha vidokezo vya kivinjari na uweke maalum. Imejengwa juu ya Popper.

Ibinafsishe kwa Aikoni za Bootstrap

Aikoni za Bootstrap ni maktaba ya ikoni ya chanzo huria ya SVG iliyo na zaidi ya glyphs 1,500, na kila toleo limeongezwa zaidi. Zimeundwa kufanya kazi katika mradi wowote, iwe unatumia Bootstrap yenyewe au la. Zitumie kama SVGs au fonti za ikoni-chaguo zote mbili hukupa kuongeza vekta na ubinafsishaji rahisi kupitia CSS.

Pata Icons za Bootstrap

Aikoni za Bootstrap

Ifanye iwe yako ukitumia Mandhari rasmi ya Bootstrap

Peleka Bootstrap hadi kiwango kinachofuata ukitumia mada zinazolipiwa kutoka sokoni rasmi la Mada za Bootstrap . Mandhari hujengwa kwenye Bootstrap kama mifumo yao iliyopanuliwa, iliyojaa vipengee vipya na programu-jalizi, hati, na zana zenye nguvu za uundaji.

Vinjari Mandhari ya Bootstrap

Mandhari ya Bootstrap