Source

Mawu Oyamba

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

Kuyamba mwachangu

Mukuyang'ana kuwonjezera Bootstrap ku projekiti yanu? Gwiritsani ntchito jsDelivr, yoperekedwa kwaulere ndi anthu pa jsDelivr. 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Zambiri mwazinthu zathu zimafuna kugwiritsa ntchito JavaScript kuti igwire ntchito. Makamaka, amafuna jQuery , Popper.js , ndi mapulagini athu a JavaScript. Ikani zotsatirazi <script>kumapeto kwa masamba anu, pomwe tagi yotseka isanakwane </body>, kuti muwatsegule. jQuery iyenera kubwera poyamba, kenako Popper.js, ndiyeno mapulagini athu a JavaScript.

Timagwiritsa ntchito jQuery's slim build , koma mtundu wathunthu umathandizidwanso.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Yathu bootstrap.bundle.jsndikuphatikiza Popperbootstrap.bundle.min.js , koma osati jQuery . Kuti mumve zambiri za zomwe zikuphatikizidwa mu Bootstrap, chonde onani gawo lathu zomwe zili mkati .

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.js )
  • Makhalidwe owonetsera, kuika, ndi khalidwe la mpukutu
  • Navbar kuti tikulitse pulogalamu yowonjezera yathu ya Collapse kuti tigwiritse ntchito machitidwe omvera
  • Zida ndi popovers zowonetsera ndi kuziyika (zimafunanso Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Ndizo zonse zomwe mukufunikira pazofunikira zamasamba. Pitani ku zolemba za Layout kapena zitsanzo zathu zovomerezeka kuti muyambe kuyika zomwe zili patsamba lanu ndi zigawo zake.

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, shrink-to-fit=no">

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.

  • Tsatirani @getbootstrap pa Twitter .
  • Werengani ndikulembetsa ku The Official Bootstrap Blog .
  • Chezani ndi a Bootstrappers anzanu ku IRC. Pa irc.freenode.netseva, mu ##bootstraptchanelo.
  • Thandizo lokhazikitsa litha kupezeka pa Stack Overflow (tagged bootstrap-4).
  • 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.