Yambani ndi Bootstrap

Bootstrap ndi chida champhamvu, chodzaza ndi zida zakutsogolo. Pangani chilichonse - kuyambira pa prototype mpaka kupanga - mumphindi.

Patsamba ili

Kuyamba mwachangu

Yambani ndikuphatikiza CSS yokonzekera kupanga ya Bootstrap ndi JavaScript kudzera pa CDN popanda kufunikira kwa masitepe aliwonse. Onani mukuchita ndi chiwonetsero cha Bootstrap CodePen .

Pangani index.htmlfayilo yatsopano muzu wa polojekiti yanu. Phatikizani ndi <meta name="viewport">tag komanso machitidwe oyenera omvera pazida zam'manja.

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

Phatikizani CSS ya Bootstrap ndi JS. Ikani <link>chizindikirocho mu <head>CSS yathu, ndi <script>tag ya JavaScript bundle (kuphatikiza Popper yoyika zotsikira, ma poppers, ndi zida) kutseka </body>. Dziwani zambiri za maulalo athu a 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>

Mutha kuphatikizanso Popper ndi JS yathu padera. Ngati simukukonzekera kugwiritsa ntchito zotsikira, popovers, kapena zida zothandizira, sungani ma kilobytes ena osaphatikiza 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>

Moni Dziko Lapansi! Tsegulani tsambalo mu msakatuli wanu wosankha kuti muwone tsamba lanu la Bootstrapped. Tsopano mutha kuyamba kumanga ndi Bootstrap popanga masanjidwe anu , kuwonjezera zigawo zingapo , ndikugwiritsa ntchito zitsanzo zathu zovomerezeka .

Zogwirizana ndi CDN

Monga zofotokozera, nayi maulalo athu oyambira a CDN.

Kufotokozera	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`

Mutha kugwiritsanso ntchito CDN kuti mutenge zina mwazowonjezera zomwe zalembedwa patsamba la Zamkatimu .

Masitepe otsatira

Werengani zambiri za zoikamo zofunika zapadziko lonse lapansi zomwe Bootstrap imagwiritsa ntchito.
Werengani za zomwe zili mu Bootstrap mu gawo lathu lamkati ndi mndandanda wazinthu zomwe zimafuna JavaScript pansipa.
Mukufuna mphamvu yochulukirapo? Ganizirani zomanga ndi Bootstrap pophatikiza mafayilo oyambira kudzera pa package manager .
Mukuyang'ana kugwiritsa ntchito Bootstrap ngati gawo ndi <script type="module">? Chonde onani kugwiritsa ntchito kwathu Bootstrap ngati gawo la gawo.

Zithunzi za JS

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 yokulitsa mapulagini athu a Collapse ndi Offcanvas kuti tigwiritse ntchito machitidwe omvera
Navs ndi pulogalamu yowonjezera ya Tab yosinthira ma pane
Ma Offcanvases owonetsera, kuyika, ndi machitidwe a mpukutu
Scrollspy pamachitidwe a mpukutu ndi zosintha zamayendedwe
Ma toast kuti awonetsedwe ndi kuchotsedwa
Zida ndi popovers zowonetsera ndi kuziyika (zimafunanso Popper )

Zofunika zapadziko lonse lapansi

Bootstrap imagwiritsa ntchito masitayelo ndi masitayilo ofunikira apadziko lonse lapansi, onse omwe amangoyang'anira kukhazikika kwa masitaelo akusakatula. Tiyeni tilowe m'madzi.

HTML5 doctype

Bootstrap imafuna kugwiritsa ntchito HTML5 doctype. Popanda izo, mudzawona masitayelo osangalatsa komanso osakwanira.

<!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 mwachangu .

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 .
Funsani ndikuwunika Zokambirana zathu za GitHub .
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.