Kitapom-pitaovana eo anoloana mahery vaika, azo itarina ary feno endri-javatra. Amboary sy amboary miaraka amin'ny Sass, ampiasao ny rafitra sy ny singa efa namboarina mialoha, ary velomy ny tetikasa miaraka amin'ny plugins JavaScript mahery vaika.
Amin'izao fotoana izao v5.2.1 · Download · v4.6.x docs · Ny famoahana rehetra
Mankanesa avy hatrany amin'ny fananganana miaraka amin'ny Bootstrap—ampiasao ny CDN, apetraho amin'ny alàlan'ny mpitantana fonosana, na alaivo ny kaody loharano.
Ampidiro ny rakitra Sass sy JavaScript loharanon'i Bootstrap amin'ny alàlan'ny npm, RubyGems, Composer, na Meteor. Ny fametrahana fehezin'ny fonosana dia tsy ahitana antontan-taratasy na script fananganana feno. Azonao atao koa ny mampiasa ny repo template npm mba hamoronana tetikasa Bootstrap amin'ny alàlan'ny npm.
npm install [email protected]gem install bootstrap -v 5.2.1Vakio ny antontan-taratasy fametrahana anay raha mila fanazavana fanampiny sy mpitantana fonosana fanampiny.
Rehefa mila ampidirinao fotsiny ny CSS na JS natambatra an'i Bootstrap dia azonao atao ny mampiasa jsDelivr . Jereo izany amin'ny hetsika miaraka amin'ny fanombohana haingana tsotsotra , na tsidiho ny ohatra mba hanombohana ny tetikasanao manaraka. Azonao atao ihany koa ny misafidy ny hampiditra an'i Popper sy ny JS anay misaraka .
<!-- 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 dia mampiasa Sass ho an'ny maritrano modular sy azo zahana. Ampidiro ihany ny singa ilainao, avelao ny safidy manerantany toy ny gradients sy aloka, ary soraty ny CSS-nao manokana miaraka amin'ireo fari-pitsipika, sarintany, fiasa ary mixins.
Manafatra stylesheet iray ary mandeha amin'ny hazakazaka ianao miaraka amin'ny endri-javatra rehetra amin'ny CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Mianara bebe kokoa momba ny safidy Sass manerantany .
Ny fomba tsotra indrindra hanamboarana Bootstrap—dia ny CSS ilainao ihany no ampidiro.
// 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";
Mianara bebe kokoa momba ny fampiasana Bootstrap amin'ny Sass .
Ny Bootstrap 5 dia mivoatra miaraka amin'ny famoahana tsirairay mba hampiasana tsara kokoa ny fari-piainan'ny CSS ho an'ny endrika lohahevitra manerantany, singa tsirairay ary na dia ny fitaovana. Manome karazany am-polony izahay ho an'ny loko, ny endri-tsoratra ary ny maro hafa amin'ny :rootambaratonga azo ampiasaina na aiza na aiza. Amin'ny singa sy fitaovana, ny fari-piainan'ny CSS dia mivelatra amin'ny kilasy mifandraika ary azo ovaina mora foana.
Ampiasao ny iray amin'ireo fari- pahalalana maneran:root - tany hanoratana fomba vaovao. Ny variable CSS dia mampiasa ny var(--bs-variableName)syntax ary azo lovain'ny singa ankizy.
.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);
}Atsipazo ny fari-pahalalana manerantany, singa, na fitaovana ampiasaina hanamboarana ny Bootstrap araka izay tianao. Tsy ilaina ny mamerina manambara ny fitsipika tsirairay, sanda miovaova vaovao fotsiny.
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;
}Vaovao ao amin'ny Bootstrap 5, novokarin'ny Utility API ny fitaovanay ankehitriny . Namboarinay ho sarintany Sass feno endri-javatra izay azo namboarina haingana sy mora. Tsy mora kokoa ny manampy, manala, na manova izay kilasy ilaina rehetra. Ataovy mamaly ny fampitaovana, ampio variana pseudo-class ary omeo anarana manokana izy ireo.
Mianara bebe kokoa momba ny fitaovana Diniho ny singa namboarina
// 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,
)
)
);
Ampio mora foana ny singa miafina, modals ary offcanvas menus, popovers sy tooltips, ary ny maro hafa — tsy misy jQuery daholo. JavaScript ao amin'ny Bootstrap dia HTML-voalohany, izay midika fa ny fampidirana plugins dia mora toy ny manampy datatoetra. Mila fifehezana bebe kokoa? Ampidiro ny plugins tsirairay amin'ny programa.
Maninona no manoratra JavaScript bebe kokoa rehefa afaka manoratra HTML ianao? Saika ny plugins JavaScript an'ny Bootstrap rehetra dia manana API data kilasy voalohany, ahafahanao mampiasa JavaScript amin'ny fampidirana datatoetra fotsiny.
<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>
Mianara bebe kokoa momba ny JavaScript ho toy ny maody sy ny fampiasana ny programmatic API .
Ny Bootstrap dia manasongadina plugins am-polony izay azonao apetraka amin'ny tetikasa rehetra. Alefaso indray miaraka izy ireo, na fidio izay ilainao fotsiny.
Bootstrap Icons dia tranomboky kisary SVG loharano misokatra ahitana glyphs 1,500 mahery, miaraka amin'ny fanampiny fanampiny isaky ny famoahana. Izy ireo dia natao hiasa amin'ny tetikasa rehetra, na mampiasa Bootstrap mihitsy ianao na tsia. Ampiasao ho SVG na endri-tsoratra kisary izy ireo — ireo safidy roa ireo dia manome anao scaling vector sy fanamboarana mora amin'ny alàlan'ny CSS.
Raiso ny Bootstrap amin'ny ambaratonga manaraka miaraka amin'ny lohahevitra premium avy amin'ny tsena ofisialy Bootstrap Themes . Ny lohahevitra dia naorina amin'ny Bootstrap ho toy ny rafitra mivelatra, manankarena amin'ny singa vaovao sy plugins, antontan-taratasy ary fitaovana fananganana matanjaka.
