Foireann uirlisí aghaidheanna cumhachtacha, insínte agus lánghnéithe. Tóg agus saincheap le Sass, bain úsáid as córas greille agus comhpháirteanna réamhthógtha, agus cuir tionscadail chun beocht le forlíontáin chumhachtacha JavaScript.
Faoi láthair v5.2.1 · Íoslódáil · v4.6.x docs · Gach eisiúint
Léim díreach isteach sa bhfoirgneamh le Bootstrap - bain úsáid as an CDN, suiteáil tríd an mbainisteoir pacáiste, nó íoslódáil an cód foinse.
Suiteáil comhaid foinse Bootstrap Sass agus JavaScript trí npm, RubyGems, Composer, nó Meteor. Ní chuimsíonn suiteálacha bainistithe pacáiste doiciméadú ná ár scripteanna tógála iomlán. Is féidir leat ár teimpléad repo npm a úsáid freisin chun tionscadal Bootstrap a ghiniúint go tapa trí npm.
npm install [email protected]gem install bootstrap -v 5.2.1Léigh ár ndoiciméid suiteála le haghaidh tuilleadh faisnéise agus bainisteoirí pacáiste breise.
Nuair nach gá duit ach CSS nó JS tiomsaithe Bootstrap a chur san áireamh, is féidir leat jsDelivr . Féach é i ngníomh lenár dtosú tapa simplí , nó brabhsáil na samplaí chun tús a chur le do chéad tionscadal eile. Is féidir leat a roghnú freisin Popper agus ár JS a áireamh ar leithligh .
<!-- 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>
Déan léim ar chomhaid foinse Bootstrap a chur san áireamh i dtionscadal nua lenár dtreoracha oifigiúla.
Úsáideann Bootstrap Sass le haghaidh ailtireacht mhodúlach agus inoiriúnaithe. Ná hiompórtáil ach na comhpháirteanna atá uait, cumasaigh roghanna domhanda cosúil le grádáin agus scáthanna, agus scríobh do CSS féin lenár n-athróga, léarscáileanna, feidhmeanna agus meascáin.
Iompórtáil stílbhileog amháin agus téann tú chuig na rásaí le gach gné dár CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Tuilleadh eolais faoinár roghanna domhanda Sass .
An bealach is éasca chun Bootstrap a shaincheapadh - ná cuir san áireamh ach an CSS atá uait.
// 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";
Foghlaim tuilleadh faoi Bootstrap a úsáid le Sass .
Tá Bootstrap 5 ag teacht chun cinn le gach scaoileadh chun úsáid níos fearr a bhaint as athróga CSS le haghaidh stíleanna téama domhanda, comhpháirteanna aonair, agus fiú fóntais. Soláthraímid mórán athróg le haghaidh dathanna, stíleanna cló, agus níos mó ag :rootleibhéal le húsáid in áit ar bith. Maidir le comhpháirteanna agus fóntais, scóiptear athróga CSS chuig an aicme ábhartha agus is furasta iad a mhodhnú.
Bain úsáid as aon cheann dár n- athróga domhanda:root chun stíleanna nua a scríobh. Úsáideann athróga CSS an var(--bs-variableName)chomhréir agus is féidir le heilimintí leanaí iad a fháil le hoidhreacht.
.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);
}Sáraigh athróga ranga domhanda, comhpháirte nó fóntais chun Bootstrap a shaincheapadh mar is mian leat. Ní gá gach riail a athdhearbhú, gan ach luach athraitheach nua.
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;
}Nua i Bootstrap 5, gintear ár bhfóntais anois ag ár Utility API . Thógamar é mar léarscáil Sass lán-ghnéithe ar féidir é a shaincheapadh go tapa agus go héasca. Ní raibh sé riamh níos éasca aon ranganna fóntais a chur leis, a bhaint nó a mhodhnú. Déan fóntais freagrúil, cuir leaganacha bréige den aicme, agus tabhair ainmneacha saincheaptha dóibh.
Foghlaim tuilleadh faoi fhóntais Déan iniúchadh ar chomhpháirteanna saincheaptha
// 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,
)
)
);
Cuir leis go héasca eilimintí ceilte inghlactha, módúil agus biachláir lasmuigh den chanbhás, popovers agus leideanna uirlisí, agus go leor eile - go léir gan jQuery. Tá JavaScript i Bootstrap HTML-first, rud a chiallaíonn go bhfuil sé chomh héasca breiseán a chur leis agus datatréithe a chur leis. Níos mó smachta uait? Cuir forlíontáin aonair san áireamh go cláir.
Cén fáth a scríobh níos mó JavaScript nuair is féidir leat scríobh HTML? Tá API sonraí den chéad scoth i mbeagnach gach ceann de na forlíontáin JavaScript de chuid Bootstrap, a ligeann duit JavaScript a úsáid ach datatréithe a chur leis.
<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>
Foghlaim tuilleadh faoinár JavaScript mar mhodúil agus úsáid an API ríomhchláraithe .
Tá dosaen breiseán i gceist le Bootstrap ar féidir leat titim isteach in aon tionscadal. Buail isteach iad go léir ag an am céanna, nó roghnaigh na cinn atá uait.
Is leabharlann deilbhíní SVG foinse oscailte é Bootstrap Icons ina bhfuil breis is 1,500 glyphs, le níos mó curtha le gach eisiúint. Tá siad deartha chun oibriú i dtionscadal ar bith, cibé an n-úsáideann tú Bootstrap é féin nó nach n-úsáideann. Úsáid iad mar SVGanna nó clónna deilbhín - tugann an dá rogha scálaithe veicteora agus saincheaptha éasca duit trí CSS.
Tóg Bootstrap go dtí an chéad leibhéal eile le téamaí préimhe ó mhargadh oifigiúil Téamaí Bootstrap . Tógtar téamaí ar Bootstrap mar chreataí leathnaithe dá gcuid féin, saibhir le comhpháirteanna agus forlíontáin nua, doiciméadú, agus uirlisí tógála cumhachtacha.
