in English

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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

Maro amin'ireo singantsika no mitaky ny fampiasana JavaScript mba hiasa. Indrindra indrindra, mitaky jQuery , Popper.js , 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. Ny jQuery dia tsy maintsy tonga aloha, avy eo Popper.js, ary avy eo ny plugins JavaScript.

fehin'aina

Ampidiro ao anatin'ny script iray miaraka amin'ny fonosanay ny zavatra rehetra ilainao. Ny anay bootstrap.bundle.jsary bootstrap.bundle.min.jsmisy Popper , fa tsy jQuery . Raha mila fanazavana fanampiny momba izay tafiditra ao amin'ny Bootstrap dia jereo azafady ny fizarana atiny .

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Misaraka

Raha manapa-kevitra ny handeha miaraka amin'ny vahaolana script misaraka ianao, dia tsy maintsy tonga aloha ny Popper.js, ary avy eo ny plugins JavaScript.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

singa

Manontany tena hoe inona no singa mitaky mazava ny jQuery, ny JS, ary ny Popper.js? 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.js 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
  • Toasts aseho sy ariana
  • Tooltips sy popover ho an'ny fampisehoana sy ny fametrahana (mitaky Popper.js ihany koa )
  • Scrollspy ho an'ny fihetsehan'ny horonana sy fanavaozana ny fitetezana

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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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.

  • Araho @getbootstrap ao amin'ny Twitter .
  • Vakio sy misoratra anarana amin'ny The Official Bootstrap Blog .
  • Miresaha amin'ireo Bootstrappers hafa ao amin'ny IRC. Ao amin'ny irc.freenode.netserver, 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.