Manomboka amin'ny Bootstrap

Bootstrap dia fitaovam-pitaovan'ny frontend mahery sy feno endri-javatra. Manamboara na inona na inona — manomboka amin'ny prototype ka hatramin'ny famokarana — ao anatin'ny minitra.

Amin'ity pejy ity

Manomboka haingana

Manomboha amin'ny fampidirana CSS sy JavaScript efa vonona amin'ny famokarana Bootstrap amin'ny alàlan'ny CDN tsy mila dingana fananganana. Jereo izany amin'ny fampiharana miaraka amin'ity demo Bootstrap CodePen ity .

Mamorona index.htmlrakitra vaovao ao amin'ny fototry ny tetikasanao. Ampidiro ihany koa ny <meta name="viewport">marika ho an'ny fitondran-tena mety amin'ny fitaovana finday.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Ampidiro ny CSS sy JS an'ny Bootstrap. Apetraho <link>ao amin'ny <head>CSS ny tenifototra, ary ny <script>tenifototra ho an'ny fonosana JavaScript (ao anatin'izany ny Popper ho an'ny fametrahana ny dropdowns, poppers, ary fitaovana) alohan'ny famaranana </body>. Mianara bebe kokoa momba ny rohy CDN .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Azonao atao ihany koa ny mampiditra an'i Popper sy ny JS anay misaraka. Raha tsy mikasa ny hampiasa dropdowns, popovers, na tooltips ianao dia tehirizo kilobytes vitsivitsy amin'ny tsy fampidirana Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Hello World! Sokafy ny pejy amin'ny navigateur safidinao hahitanao ny pejinao Bootstrapped. Ankehitriny ianao dia afaka manomboka manangana miaraka amin'ny Bootstrap amin'ny alàlan'ny famoronana ny drafitrao manokana , manampy singa am-polony , ary mampiasa ny ohatra ofisialy .

Ireo singa mifandraika amin'ny CDN

Ho fanondroana, ireto ny rohy CDN voalohany.

Description	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Azonao atao ihany koa ny mampiasa ny CDN mba haka ny iray amin'ireo fananganana fanampiny voatanisa ao amin'ny pejy Votoaty .

Dingana manaraka

Vakio bebe kokoa momba ny toe-javatra manan-danja eran-tany izay ampiasain'i Bootstrap.
Vakio ny momba izay tafiditra ao amin'ny Bootstrap ao amin'ny fizarana atiny sy ny lisitry ny singa mila JavaScript eto ambany.
Mila hery bebe kokoa? Diniho ny fananganana miaraka amin'ny Bootstrap amin'ny fampidirana ireo rakitra loharano amin'ny alàlan'ny mpitantana fonosana .
Mikasa ny hampiasa Bootstrap ho modely miaraka amin'ny <script type="module">? Azafady, jereo ny fampiasanay Bootstrap ho fizarana module.

Ireo singa mifandraika amin'ny JS

Manontany tena hoe inona ny singa mitaky mazava ny JavaScript sy Popper? Kitiho ny rohy aseho eto ambany. Raha tsy azonao antoka ny momba ny firafitry ny pejy ankapobeny 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 Plugins Collapse sy Offcanvas mba hampiharana ny fitondrantena mandray andraikitra
Navs miaraka amin'ny plugin Tab ho an'ny fanodikodinana ny votoaty
Offcanvases amin'ny fampisehoana, ny fametrahana ary ny fitondran'ny horonana
Scrollspy ho an'ny fihetsehan'ny horonana sy fanavaozana ny fitetezana
Toasts aseho sy ariana
Tooltips sy popovers amin'ny fampisehoana sy ny fametrahana (mitaky Popper ihany koa )

Globals manan-danja

Ny Bootstrap dia mampiasa fomba amam-panao manan-danja eran-tany vitsivitsy, izay saika miompana manokana amin'ny fanamafisan'ny navigateur cross avokoa. Andao hiroboka.

HTML5 doctype

Ny Bootstrap dia mitaky ny fampiasana ny HTML5 doctype. Raha tsy misy an'io dia hahita fomba mahatsikaiky sy tsy feno ianao.

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

Azonao atao ny mahita ohatra amin'ity hetsika ity amin'ny fanombohana haingana .

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

Mijanòna hatrany amin'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 .
Anontanio sy diniho ny Resadresakay GitHub .
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-5).
Ny mpamorona dia tokony hampiasa ny teny fanalahidy bootstrapamin'ny fonosana izay manova na manampy amin'ny fiasan'ny Bootstrap rehefa mizara amin'ny alàlan'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.