Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
Check
in English

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.

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 .


  1. 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>
    
  2. 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>
    
  3. 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 .

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

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.