Pitani kuzinthu zazikulu
Check
Zatsopano mu v5.2 Zosintha za CSS, ma offcanvas omvera, zida zatsopano, ndi zina zambiri! Bootstrap

Pangani masamba ofulumira, omvera ndi Bootstrap

Zamphamvu, zowonjezera, komanso zodzaza ndi zida zakutsogolo. Pangani ndikusintha mwamakonda ndi Sass, gwiritsani ntchito makina omangira gridi ndi zida zina, ndikupangitsa kuti mapulojekiti akhale ndi moyo ndi mapulagini amphamvu a JavaScript.

npm i [email protected]
Werengani madotolo

Panopa v5.2.1 · Koperani · v4.6.x docs · Zonse zotulutsidwa

Yambani mwanjira iliyonse yomwe mukufuna

Lumphani ndikumanga ndi Bootstrap-gwiritsani ntchito CDN, yikani kudzera pa phukusi loyang'anira, kapena tsitsani code code.

Werengani zolemba zolemba

Ikani kudzera pa phukusi woyang'anira

Ikani mafayilo a Sass ndi JavaScript a Bootstrap kudzera pa npm, RubyGems, Composer, kapena Meteor. Kuyika koyendetsedwa ndi paketi sikuphatikiza zolembedwa kapena zolemba zathu zonse. Mutha kugwiritsanso ntchito yathu npm template repo kuti mupange pulojekiti ya Bootstrap mwachangu kudzera npm.

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

Werengani zolemba zathu zoyika kuti mumve zambiri komanso oyang'anira phukusi owonjezera.

Phatikizani kudzera pa CDN

Mukangofunika kuphatikiza CSS kapena JS ya Bootstrap, mutha kugwiritsa ntchito jsDelivr . Ziwoneni zikugwira ntchito ndi chiyambi chathu chosavuta , kapena sakatulani zitsanzo kuti muyambitse pulojekiti yotsatira. Mutha kusankhanso kuphatikiza Popper ndi JS yathu padera .

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

Werengani malangizo athu oyambira

Dziwani zambiri kuphatikiza mafayilo a Bootstrap mu projekiti yatsopano yokhala ndi maupangiri athu ovomerezeka.

Webpack Phukusi Vite

Sinthani mwamakonda anu zonse ndi Sass

Bootstrap imagwiritsa ntchito Sass pamapangidwe osinthika komanso osinthika. Lowetsani zigawo zomwe mukufuna, yambitsani zosankha zapadziko lonse lapansi monga ma gradients ndi mithunzi, ndikulemba CSS yanu ndi zosintha zathu, mamapu, ntchito, ndi zosakaniza.

Dziwani zambiri zakusintha mwamakonda anu

Phatikizani zonse za Bootstrap's Sass

Lowetsani masitayelo amodzi ndipo mwanyamuka kupita ku mipikisano ndi chilichonse cha CSS yathu.

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

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

Dziwani zambiri za zosankha zathu zapadziko lonse za Sass .

Phatikizaninso zomwe mukufuna

Njira yosavuta yosinthira Bootstrap - kuphatikiza CSS yomwe mukufuna.

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

Dziwani zambiri za kugwiritsa ntchito Bootstrap ndi Sass .

Pangani ndikukulitsa munthawi yeniyeni ndi zosintha za CSS

Bootstrap 5 ikusintha ndikutulutsa kulikonse kuti igwiritse ntchito bwino masitayilo a CSS pama masitayilo amutu wapadziko lonse lapansi, magawo amtundu uliwonse, ngakhale zofunikira. Timapereka mitundu ingapo yamitundu, masitayelo amtundu, ndi zina zambiri :rootkuti zigwiritsidwe ntchito kulikonse. Pazigawo ndi zofunikira, zosintha za CSS zimayikidwa m'kalasi yoyenera ndipo zitha kusinthidwa mosavuta.

Dziwani zambiri zamitundu yosiyanasiyana ya CSS

Kugwiritsa ntchito mitundu yosiyanasiyana ya CSS

Gwiritsani ntchito zosintha zathu zilizonse zapadziko lonse lapansi:root kuti mulembe masitayelo atsopano. Zosintha za CSS zimagwiritsa ntchito var(--bs-variableName)syntax ndipo zimatha kutengera ana.

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

Kusintha mwamakonda kudzera pamitundu yosiyanasiyana ya CSS

Sinthani mitundu yapadziko lonse, gawo, kapena zofunikira kuti musinthe Bootstrap momwe mukufunira. Palibe chifukwa chofotokozeranso lamulo lililonse, mtengo wosinthika watsopano.

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

Components, kukumana ndi Utility API

Zatsopano mu Bootstrap 5, zothandizira zathu tsopano zapangidwa ndi Utility API yathu . Tidapanga ngati mapu odzaza ndi Sass omwe amatha kusinthidwa mwachangu komanso mosavuta. Sizinakhalepo zophweka kuwonjezera, kuchotsa, kapena kusintha makalasi aliwonse othandiza. Pangani zofunikira kuti zigwirizane, onjezani mitundu yabodza, ndikuzipatsa mayina.

Dziwani zambiri zamagwiritsidwe ntchito Onani zigawo zosinthidwa mwamakonda

Sinthani mwachangu zigawo
// 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,
    )
  )
);

Mapulagini amphamvu a JavaScript opanda jQuery

Onjezani mosavuta zinthu zobisika zosinthika, ma modals ndi ma menus akunja, popovers ndi zida, ndi zina zambiri - zonse popanda jQuery. JavaScript mu Bootstrap ndi HTML-choyamba, kutanthauza kuti kuwonjezera mapulagini ndikosavuta monga kuwonjezera datamawonekedwe. Mukufuna kuwongolera kwina? Phatikizani mapulagini payekha mwadongosolo.

Dziwani zambiri za Bootstrap JavaScript

Data attribute API

Chifukwa chiyani mulembe JavaScript yochulukirapo pomwe mutha kulemba HTML? Pafupifupi mapulagini onse a Bootstrap a JavaScript amakhala ndi API ya data yoyamba, kukulolani kugwiritsa ntchito JavaScript pongowonjezera mawonekedwe 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>

Dziwani zambiri za JavaScript yathu ngati ma module ndikugwiritsa ntchito pulogalamu ya API .

Mapulagini athunthu

Bootstrap imakhala ndi mapulagini khumi ndi awiri omwe mutha kutsitsa mu projekiti iliyonse. Ikani zonse mwakamodzi, kapena sankhani zomwe mukufuna.

Chenjezo

Onetsani ndi kubisa mauthenga achenjezo kwa ogwiritsa ntchito anu.

Batani

Sinthani mwadongosolo momwe mabatani akugwira ntchito.

Carousel

Onjezani ma slideshows patsamba lililonse, kuphatikiza kuthandizira pakudutsa.

Kugwa

Wonjezerani ndi kugwetsa madera, kapena pangani ma accordion.

Tsitsa m'munsi

Pangani mndandanda wamaulalo, zochita, mafomu, ndi zina zambiri.

Modali

Onjezani ma dialog osinthika komanso omvera ku polojekiti yanu.

Offcanvas

Pangani ndikusintha zisankho zobisika patsamba lililonse.

Popover

Pangani zokutira mwamakonda. Yomangidwa pa Popper.

Scrollspy

Sinthani zokha maulalo a nav okhazikika kutengera mpukutu wamasamba.

Tabu

Lolani zida za Bootstrap nav kuti zisinthe zomwe zili mkati.

Tositi

Onetsani ndi kubisa zidziwitso kwa alendo anu.

Malangizo

M'malo mwa zida za msakatuli ndi zina mwamakonda. Yomangidwa pa Popper.

Sinthani Mwamakonda anu ndi Zithunzi za Bootstrap

Zithunzi za Bootstrap ndi laibulale yazithunzi za SVG yotseguka yokhala ndi zithunzi zopitilira 1,500, ndikuwonjezera kutulutsa kulikonse. Amapangidwa kuti azigwira ntchito iliyonse, kaya mumagwiritsa ntchito Bootstrap yokha kapena ayi. Agwiritseni ntchito ngati ma SVG kapena zilembo zazithunzi-zosankha zonse zimakupatsani makulitsidwe a vector komanso makonda mosavuta kudzera pa CSS.

Pezani Zithunzi za Bootstrap

Zithunzi za Bootstrap

Pangani kukhala yanu ndi Mitu ya Bootstrap yovomerezeka

Tengani Bootstrap kupita pamlingo wina wokhala ndi mitu yoyambira pamsika wa Bootstrap Themes . Mitu imamangidwa pa Bootstrap ngati zomangira zawo zowonjezera, zodzaza ndi zida zatsopano ndi mapulagini, zolemba, ndi zida zomangira zamphamvu.

Sakatulani Mitu ya Bootstrap

Mitu ya Bootstrap