Sava lalana

Atombohy amin'ny Bootstrap, rafitra malaza indrindra eran-tany amin'ny fananganana tranokala mandray andraikitra, voalohany amin'ny finday, miaraka amin'ny jsDelivr sy pejy fanombohana môdely.

Manomboka haingana

Mitady hampiditra haingana ny Bootstrap amin'ny tetikasanao? Mampiasà jsDelivr, CDN malalaka malalaka. Mampiasa mpitantana fonosana sa mila misintona ireo rakitra loharano? Mankanesa any amin'ny pejy fampidinana .

CSS

Adikao-mametaka ao amin'ny takelakao ny stylesheet <link>alohan'ny <head>hafa rehetra hampidirana ny CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Maro amin'ireo singantsika no mitaky ny fampiasana JavaScript mba hiasa. Raha ny tokony ho izy dia mitaky jQuery , Popper , ary ny plugins JavaScript antsika manokana izy ireo. Mampiasa jQuery's slim build , fa ny dikan-teny feno dia tohana ihany koa.

Apetraho eo akaikin'ny faran'ny pejinao ny iray amin'ireto manaraka ireto, alohan'ny marika famaranana , mba<script></body> hahafahan'izy ireo. Tsy maintsy tonga aloha ny jQuery, avy eo Popper, ary avy eo ny plugins JavaScript.

fehin'aina

Ampidiro ny plugin Bootstrap JavaScript tsirairay miaraka amin'ny iray amin'ireo fonosana roa. Samy bootstrap.bundle.jsary bootstrap.bundle.min.jsampidiro ny Popper ho an'ny toro-làlanay sy popovers, fa tsy jQuery . Ampidiro aloha ny jQuery, avy eo ny fonosana JavaScript Bootstrap. Raha mila fanazavana fanampiny momba izay tafiditra ao amin'ny Bootstrap dia jereo azafady ny fizarana atiny .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Misaraka

Raha manapa-kevitra ny handeha amin'ny vahaolana script misaraka ianao, dia tsy maintsy i Popper no voalohany (raha mampiasa toro-hevitra na popovers ianao), ary avy eo ny plugins JavaScript.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

singa

Manontany tena hoe inona avy ireo singa mitaky mazava ny jQuery, ny JavaScript, ary ny Popper? Kitiho ny rohy aseho eto ambany. Raha tsy azonao antoka ny momba ny firafitry ny pejy dia tohizo ny famakiana ny môdely pejy ohatra.

Asehoy ireo singa mila JavaScript

Fanairana ho an'ny fandroahana
Bokotra ho an'ny fampandehanana fanjakana sy ny fampandehanana ny boaty/radio
Carousel ho an'ny fihetsika, fanaraha-maso ary tondro rehetra
Mirodana noho ny famadihana ny fahitana ny atiny
Dropdowns ho an'ny fampisehoana sy fametrahana toerana (mitaky Popper ihany koa )
Modely amin'ny fampisehoana, ny fametrahana ary ny fihetsika amin'ny horonana
Navbar amin'ny fanitarana ny plugin Collapse mba hampiharana ny fitondrantena mandray andraikitra
Scrollspy ho an'ny fihetsehan'ny horonana sy fanavaozana ny fitetezana
Tooltips sy popovers amin'ny fampisehoana sy ny fametrahana (mitaky Popper ihany koa )

Modely fanombohana

Ataovy azo antoka fa amboarina miaraka amin'ny fenitry ny famolavolana sy ny fampandrosoana farany ny pejinao. Midika izany fa mampiasa doctype HTML5 ary mampiditra meta tag viewport ho an'ny fitondran-tena mety. Ampifandraiso daholo izany ary ny pejinao dia tokony ho toy izao:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Izay ihany no ilainao amin'ny fitakiana pejy ankapobeny. Tsidiho ny Layout docs na ny ohatra ofisialy mba hanombohana ny fametrahana ny atiny sy ny singa ao amin'ny tranokalanao.

Globals manan-danja

Bootstrap dia mampiasa fomba sy toe-javatra manan-danja eran-tany vitsivitsy izay tokony ho fantatrao amin'ny fampiasana azy, izay saika miompana manokana amin'ny fanamafisana ny fomba navigateur cross avokoa. Andao hiroboka.

HTML5 doctype

Ny Bootstrap dia mitaky ny fampiasana ny HTML5 doctype. Raha tsy misy an'io dia hahita endrika tsy feno mahatsikaiky ianao, fa ny fampidirana azy io dia tsy tokony hiteraka hiccups be.

<!doctype html>
<html lang="en">
  ...
</html>

Mamaly meta tag

Ny Bootstrap dia novolavolaina voalohany ho an'ny finday , paikady izay ahafahantsika manatsara ny kaody ho an'ny fitaovana finday aloha ary avy eo mampitombo ny singa araka izay ilaina amin'ny alàlan'ny fangatahana media CSS. Mba hiantohana ny famandrihana araka ny tokony ho izy sy ny zooming mikasika ny fitaovana rehetra, ampio ny meta tag viewport mandray andraikitra amin'ny <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Azonao atao ny mahita ohatra amin'izany amin'ny hetsika ao amin'ny môdely fanombohana .

Fametahana boaty

box-sizingRaha mila fandrefesana mahitsy kokoa amin'ny CSS dia avadika content-boxho border-box. Izany dia miantoka paddingfa tsy hisy fiantraikany amin'ny sakan'ny kajy farany amin'ny singa iray, fa mety hiteraka olana amin'ny rindrambaikon'ny antoko fahatelo toy ny Google Maps sy Google Custom Search Engine.

Amin'ny fotoana tsy fahita firy dia mila manafoana azy ianao, ampiasao zavatra toy izao manaraka izao:

.selector-for-some-widget {
  box-sizing: content-box;
}

Miaraka amin'ity snippet etsy ambony ity, ireo singa misy akany—anisan'izany ny atiny novokarina tamin'ny alalan'ny ::beforesy ::after— dia samy handova ny voatondro box-sizingho an'io .selector-for-some-widget.

Mianara bebe kokoa momba ny maodely boaty sy ny habeny ao amin'ny CSS Tricks .

Avereno indray

Ho an'ny famandrihana mifanandrify amin'ny navigateur nohatsaraina, dia mampiasa Reboot izahay hanitsiana ny tsy fitovian-kevitra amin'ny navigateur sy fitaovana ary manome famerenana kely kokoa amin'ireo singa HTML mahazatra.

fiaraha-monina

Tohizo hatrany ny fivoaran'ny Bootstrap ary manatona ny vondrom-piarahamonina miaraka amin'ireo loharano mahasoa ireo.

Vakio sy misoratra anarana amin'ny The Official Bootstrap Blog .
Miresaha amin'ireo Bootstrappers hafa ao amin'ny IRC. Ao amin'ny irc.libera.chatserver, ao amin'ny #bootstrapfantsona.
Ny fanampiana fampiharana dia azo jerena ao amin'ny Stack Overflow (tagged bootstrap-4).
Ny mpamorona dia tokony hampiasa ny teny fototra bootstrapamin'ny fonosana izay manova na manampy amin'ny fiasan'ny Bootstrap rehefa mizara amin'ny npm na mekanika fanaterana mitovitovy amin'izany mba hahitana haingana indrindra.

Azonao atao ihany koa ny manaraka @getbootstrap ao amin'ny Twitter ho an'ny fifosana farany sy horonan-tsary mahafinaritra.

CSP sy SVG tafiditra

Ny singa Bootstrap maromaro dia misy SVG voarakitra ao amin'ny CSS-nay mba hamolavola singa tsy tapaka sy mora amin'ny navigateur sy fitaovana. Ho an'ireo fikambanana manana fandrindrana CSP henjana kokoa , dia nandrakitra an-tsoratra ny tranga rehetra momba ny SVG natsofoka izahay (izay ampiharina amin'ny alalan'ny background-image) mba hahafahanao mandinika tsara kokoa ny safidinao.

bokotra fanakatonana (ampiasaina amin'ny fanairana sy modals)
Boaty manokana sy bokotra radio
Endrika switch
Kisary fanamarinana endrika
Safidy manokana menus
Carousel fanaraha-maso
Navbar toggle bokotra

Mifototra amin'ny resaka fiaraha -monina , ny safidy sasany amin'ny famahana izany ao amin'ny codebase-nao manokana dia ny fanoloana ny URL amin'ny fananana ampiantranoana eo an-toerana, ny fanesorana ny sary ary ny fampiasana sary an-tsoratra (tsy azo atao amin'ny singa rehetra), ary ny fanovana ny CSP-nao. Ny soso-kevitray dia ny mijery tsara ny politikanao momba ny fiarovana ary manapa-kevitra amin'ny lalana tsara indrindra, raha ilaina.