Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
in English

Mawu Oyamba

Yambani ndi Bootstrap, chimango chodziwika kwambiri padziko lonse lapansi chomanga masamba omvera, oyambira mafoni, okhala ndi jsDelivr ndi tsamba loyambira ma template.

Patsamba ili

Kuyamba mwachangu

Mukuyang'ana kuwonjezera Bootstrap ku projekiti yanu? Gwiritsani ntchito jsDelivr, CDN yaulere yaulere. Mukugwiritsa ntchito woyang'anira phukusi kapena mukufuna kutsitsa mafayilo oyambira? Pitani patsamba lotsitsa .

CSS

Matulani-mata sitayilo <link>yanu <head>pamaso pa masitayelo ena onse kuti mukweze CSS yathu.

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

JS

Zambiri mwazinthu zathu zimafuna kugwiritsa ntchito JavaScript kuti igwire ntchito. Makamaka, amafunikira mapulagini athu a JavaScript ndi Popper . Ikani imodzi mwama <script>masekondi pafupi ndi kumapeto kwa masamba anu, pomwe tagi yotseka isanakwane </body>, kuti muwatsegule.

Mtolo

Phatikizani pulagi iliyonse ya Bootstrap JavaScript ndi kudalira ndi imodzi mwamitolo yathu iwiri. Zonse bootstrap.bundle.jsndikuphatikiza Popperbootstrap.bundle.min.js pazida zathu ndi ma popover. Kuti mumve zambiri za zomwe zikuphatikizidwa mu Bootstrap, chonde onani gawo lathu zomwe zili mkati .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Osiyana

Ngati mungaganize zopita ndi yankho lazolemba lapadera, Popper ayenera kubwera poyamba (ngati mukugwiritsa ntchito zida kapena popover), kenako mapulagini athu a JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Ma modules

Ngati mugwiritsa ntchito <script type="module">, chonde onani kugwiritsa ntchito kwathu Bootstrap ngati gawo la gawo.

Zigawo

Mukufuna kudziwa kuti ndi zigawo ziti zomwe zimafuna JavaScript ndi Popper yathu? Dinani ulalo wa zigawo zowonetsera pansipa. Ngati simukutsimikiza za kapangidwe ka tsamba, pitilizani kuwerenga mwachitsanzo template ya tsamba.

Onetsani zigawo zomwe zikufunika JavaScript
  • Zidziwitso zochotsa
  • Mabatani osinthira maiko ndi ma checkbox/radio
  • Carousel pamakhalidwe onse a slide, zowongolera, ndi zizindikiro
  • Kugwa kuti musinthe mawonekedwe azinthu
  • Zotsitsa kuti ziwonetsedwe ndi kuziyika (zimafunanso Popper )
  • Makhalidwe owonetsera, kuika, ndi khalidwe la mpukutu
  • Navbar kuti tikulitse pulogalamu yowonjezera yathu ya Collapse kuti tigwiritse ntchito machitidwe omvera
  • Ma Offcanvases owonetsera, kuyika, ndi machitidwe a mpukutu
  • Ma toast kuti awonetsedwe ndi kuchotsedwa
  • Zida ndi popovers zowonetsera ndi kuziyika (zimafunanso Popper )
  • Scrollspy pamachitidwe a mpukutu ndi zosintha zamayendedwe

template yoyambira

Onetsetsani kuti masamba anu ali ndi mapangidwe aposachedwa ndi miyezo yachitukuko. Izi zikutanthauza kugwiritsa ntchito HTML5 doctype ndikuphatikiza meta tag yowonera pamachitidwe oyenera omvera. Ikani zonse pamodzi ndipo masamba anu aziwoneka motere:

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

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Kuti mupeze masitepe otsatirawa, pitani patsamba la Layout docs kapena zitsanzo zathu zovomerezeka kuti muyambe kuyika zomwe zili patsamba lanu.

Zofunika zapadziko lonse lapansi

Bootstrap imagwiritsa ntchito masitayelo ndi masitaelo ofunikira apadziko lonse lapansi omwe muyenera kudziwa mukamagwiritsa ntchito, zonse zomwe zimangoyang'anira kukhazikika kwa masitaelo a msakatuli. Tiyeni tilowe m'madzi.

HTML5 doctype

Bootstrap imafuna kugwiritsa ntchito HTML5 doctype. Popanda izo, mudzawona masitayelo osangalatsa osakwanira, koma kuphatikiza sikuyenera kuyambitsa kudodometsa kulikonse.

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

Kuyankha meta tag

Bootstrap imapangidwa mafoni choyamba , njira yomwe timakulitsa kachidindo kazida zam'manja kaye kenako ndikukulitsa zida ngati kuli kofunikira pogwiritsa ntchito mafunso a CSS media. Kuti muwonetsetse kumasulira koyenera ndi kukhudza kuyandikira kwa zida zonse, onjezani meta tag yoyankhira pa chipangizo chanu <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mutha kuwona chitsanzo cha izi mukuchitapo kanthu poyambira template .

Kukula kwa bokosi

Kuti mumve zambiri zowongoka mu CSS, timasintha box-sizingmtengo wapadziko lonse lapansi content-boxkupita ku border-box. Izi zimawonetsetsa paddingkuti sizikhudza kukula komaliza kwa chinthu, koma zitha kuyambitsa zovuta ndi mapulogalamu ena ena monga Google Maps ndi Google Custom Search Engine.

Nthawi zina zomwe muyenera kuzichotsa, gwiritsani ntchito zinthu monga izi:

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

Ndi mawu omwe ali pamwambapa, zinthu zomwe zasungidwa - kuphatikiza zomwe zapangidwa kudzera - ::beforezonse ::afterzidzalandira zomwe box-sizingzafotokozedwazo .selector-for-some-widget.

Phunzirani zambiri za chitsanzo cha bokosi ndi kukula pa CSS Tricks .

Yambitsaninso

Pakumasulira kopitilira muyeso, timagwiritsa ntchito Reboot kukonza zosagwirizana pa asakatuli ndi zida zonse kwinaku tikukhazikitsanso malingaliro ochulukirapo kuzinthu zodziwika bwino za HTML.

Community

Khalani odziwa za kakulidwe ka Bootstrap ndikufikira anthu ammudzi ndi zinthu zothandizazi.

  • Werengani ndikulembetsa ku The Official Bootstrap Blog .
  • Chezani ndi a Bootstrappers anzanu ku IRC. Pa irc.libera.chatseva, mu #bootstraptchanelo.
  • Thandizo lokhazikitsa litha kupezeka pa Stack Overflow (tagged bootstrap-5).
  • Madivelopa akuyenera kugwiritsa ntchito mawu osakira bootstrappamaphukusi omwe amasintha kapena kuwonjezera magwiridwe antchito a Bootstrap akamagawa kudzera mu npm kapena njira zofananira zotumizira kuti adziwike kwambiri.

Mutha kutsatiranso @getbootstrap pa Twitter pazamiseche zaposachedwa komanso makanema ochititsa chidwi anyimbo.