Tīpoka ki te ihirangi matua
Check
Hou i roto i te v5.2 Ko nga taurangi CSS, ko te waaawa urupare, ko nga taputapu hou, me etahi atu! Bootstrap

Hangaia nga waahi tere, whakautu ki a Bootstrap

He kete taputapu o mua he kaha, he whakawhanui, kua kikii. Hanga me te whakarite ki a Sass, whakamahi i te punaha matiti me nga waahanga kua oti te hanga, ka ora ai nga kaupapa me nga taputapu JavaScript kaha.

npm i [email protected]
Pānuihia nga tuhinga

I tenei wa v5.2.1 · Tikiake · v4.6.x docs · Nga putanga katoa

Me timata i nga huarahi e hiahia ana koe

Peke tika ki te hanga me Bootstrap—whakamahia te CDN, whakauruhia ma te kaiwhakahaere kete, tango mai ranei i te waehere puna.

Pānuihia nga tuhinga whakaurunga

Tāuta mā te kaiwhakahaere mōkihi

Tāutahia te pūtake o Bootstrap Sass me ngā kōnae JavaScript mā npm, RubyGems, Composer, Meteor ranei. Ko nga whakaurunga whakahaere mokete kaore e uru ki nga tuhinga me o maatau tuhinga hanga katoa. Ka taea hoki e koe te whakamahi i ta maatau repo tauira npm kia tere te whakaputa kaupapa Bootstrap ma te npm.

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

Panuitia a maatau tuhinga whakaurunga mo etahi atu korero me etahi atu kaiwhakahaere kete.

Whakauru ma CDN

Mena ka hiahia koe ki te whakauru i te CSS kua whakahiatohia e Bootstrap, JS ranei, ka taea e koe te whakamahi jsDelivr . Tirohia te mahi me ta maatau tiimata tere , tirotirohia ranei nga tauira hei tiimata i to kaupapa ka whai ake. Ka taea hoki e koe te kowhiri kia whakauruhia a Popper me a maatau JS motuhake .

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

Panuihia a maatau kaiarahi timata

Haere ki te whakauru i nga konae puna a Bootstrap ki tetahi kaupapa hou me o maatau kaiarahi whai mana.

Paetukutuku Peera Vite

Whakaritea nga mea katoa me Sass

Ka whakamahi a Bootstrap i a Sass mo te hoahoanga rereke me te whakarite. Kawemai i nga waahanga anake e hiahia ana koe, whakaahei i nga whiringa o te ao penei i nga rōnaki me nga atarangi, ka tuhi i a koe ake CSS me o maatau taurangi, mapi, mahi, me nga whakauru.

Ako atu mo te whakarite

Whakauruhia nga Sass katoa a Bootstrap

Kawemai i tetahi pepa ahua ka haere koe ki nga reihi me nga ahuatanga katoa o ta maatau CSS.

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

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

Ako atu mo o maatau whiringa Sass ao .

Whakauruhia nga mea e hiahia ana koe

Ko te huarahi ngawari ki te whakarite i a Bootstrap—whakauruhia te CSS anake e hiahia ana koe.

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

Ako atu mo te whakamahi i a Bootstrap me Sass .

Hanga me te whakawhānui i roto i te wa-tūturu me nga taurangi CSS

Kei te tipu haere a Bootstrap 5 me ia tukunga kia pai ake te whakamahi i nga taurangi CSS mo nga momo kaupapa o te ao, nga waahanga takitahi, tae atu ki nga taputapu. Ka whakaratohia e matou te maha o nga taurangi mo nga tae, momo momotuhi, me etahi atu i te :roottaumata hei whakamahi ki hea. Mo nga waahanga me nga taputapu, ka horahia nga taurangi CSS ki te karaehe e tika ana, ka ngawari te whakarereke.

Ako atu mo nga taurangi CSS

Te whakamahi i nga taurangi CSS

Whakamahia tetahi o a maatau taurangi ao:root ki te tuhi momo hou. Ko nga taurangi CSS e whakamahi ana i te var(--bs-variableName)wetereo ka taea te tuku iho e nga huānga tamariki.

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

Whakaritea ma nga taurangi CSS

Whakakorehia nga taurangi o te ao, te waahanga, te karaehe whaipainga ranei hei whakarite i a Bootstrap ki taau e pai ai. Kaore he take ki te whakapuaki ano i ia ture, he uara taurangi hou noa.

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

Nga Waehanga, tutaki ki te API Taputapu

He hou ki Bootstrap 5, kua hangaia a maatau taputapu e to maatau API Taputapu . I hangaia e matou hei mapi Sass kua whakakiia ki nga ahuatanga ka taea te whakarite tere me te ngawari. Kaore i ngawari ake te taapiri, te tango, te whakarereke ranei i nga karaehe whaipainga. Hangaia nga taputapu kia aro, taapirihia nga momo momo akomanga pseudo, ka hoatu ingoa ritenga.

Ako atu mo nga taputapu Te torotoro i nga waahanga kua whakaritea

Whakaritea tere nga waahanga
// 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,
    )
  )
);

Ko nga taputapu JavaScript kaha kaore he jQuery

Maamaa te taapiri i nga huānga huna ka taea te takahuri, nga momo me nga tahua offcanvas, pouvers me nga aki taputapu, me te maha atu—katoa kaore he jQuery. Ko te JavaScript i Bootstrap he HTML-tuatahi, ko te tikanga ko te taapiri i nga mono he ngawari ki te taapiri i nga datahuanga. Me whai mana ake? Whakauruhia nga taputapu takitahi ma te hotaka.

Ako atu mo Bootstrap JavaScript

API huanga Raraunga

He aha te tuhi atu i te JavaScript ka taea e koe te tuhi HTML? Tata ki te katoa o nga taputapu JavaScript a Bootstrap he API raraunga akomanga tuatahi, ka taea e koe te whakamahi JavaScript ma te taapiri i nga datahuanga.

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

Ako atu mo a maatau JavaScript hei waahanga me te whakamahi i te API papatono .

He huinga matawhānui o ngā monomai

Kei a Bootstrap he tatini taapiri ka taea e koe te taka ki tetahi kaupapa. Tukuna katoa ki roto i te wa kotahi, whiriwhiri ranei i nga mea e hiahia ana koe.

Matohi

Whakaatu me te huna i nga karere matohi ki o kaiwhakamahi.

Pātene

Whakahaerehia te mana hohe mo nga paatene.

Carousel

Tāpirihia nga whakaatakiriata ki tetahi wharangi, tae atu ki te tautoko mo te whitiwhiti.

Tiango

Roha me te tiango i nga waahanga o te ihirangi, te hanga accordions ranei.

Whakataka iho

Waihangahia nga rarangi hononga, mahi, puka, me etahi atu.

Modal

Tāpirihia nga korero ngawari me te urupare ki to kaupapa.

Kowekeweke

Hangaia ka takahurihia nga paetaha huna ki tetahi wharangi.

Popover

Waihanga whakakikorua ritenga. I hangaia ki runga Popper.

Scrollspy

Whakahou aunoatia nga hononga nav hohe i runga i te panuku wharangi.

Ripa

Tukua nga waahanga Bootstrap nav ki te takahuri i nga ihirangi.

Toast

Whakaatu me te huna i nga panui ki o manuhiri.

Aki taputapu

Whakakapia nga aki taputapu tirotiro me nga mea ritenga. I hangaia ki runga Popper.

Whakawhaiarohia me nga Tohu Bootstrap

Ko Bootstrap Icons he puna tuwhera puna SVG icon whare pukapuka neke atu i te 1,500 glyphs, me etahi atu taapiri mo ia tukunga. Kua hoahoatia kia mahi i roto i tetahi kaupapa, ahakoa ka whakamahi koe i a Bootstrap ake, kaore ranei. Whakamahia hei SVG, he momotuhi tohu ranei—ma nga whiringa e rua ka hoatu ki a koe te tauine vector me te whakaritenga ngawari ma te CSS.

Tikina nga Tohu Bootstrap

Nga Tohu Bootstrap

Hangaia ki a koe me nga Kaupapa Bootstrap mana

Tangohia a Bootstrap ki te taumata e whai ake nei me nga kaupapa utu nui mai i te maakete Kaupapa Kaupapa Bootstrap mana . Ka hangaia nga kaupapa ki runga i a Bootstrap hei anga whanui ake, he taonga ki nga waahanga hou me nga taapiri, tuhinga, me nga taputapu hanga kaha.

Tirotiro Kaupapa Bootstrap

Kaupapa Bootstrap