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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Zambiri mwazinthu zathu zimafuna kugwiritsa ntchito JavaScript kuti igwire ntchito. Makamaka, amafunikira jQuery , Popper , ndi mapulagini athu a JavaScript. Timagwiritsa ntchito jQuery's slim build , koma mtundu wathunthu umathandizidwanso.

Ikani imodzi mwama <script>masekondi pafupi ndi kumapeto kwa masamba anu, pomwe tagi yotseka isanakwane </body>, kuti muwatsegule. jQuery iyenera kubwera poyamba, kenako Popper, kenako mapulagini athu a JavaScript.

Mtolo

Phatikizani pulagi iliyonse ya Bootstrap JavaScript ndi imodzi mwamitolo yathu iwiri. Zonse bootstrap.bundle.jsndikuphatikiza Popperbootstrap.bundle.min.js pazida zathu ndi ma popover, koma osati jQuery . Phatikizani jQuery poyamba, kenako Bootstrap JavaScript mtolo. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Osiyana

Ngati mukuganiza 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Zigawo

Mukufuna kudziwa kuti ndi zigawo ziti zomwe zimafuna jQuery, JavaScript yathu, ndi Popper? 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
Scrollspy pamachitidwe a mpukutu ndi zosintha zamayendedwe
Zida ndi popovers zowonetsera ndi kuziyika (zimafunanso Popper )

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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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.

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

CSPs ndi ma SVG ophatikizidwa

Magawo angapo a Bootstrap amaphatikiza ma SVG ophatikizidwa mu CSS yathu kuti apange mawonekedwe mosasinthasintha komanso mosavuta pakusakatula ndi zida. Kwa mabungwe omwe ali ndi masinthidwe okhwima kwambiri a CSP , talemba zochitika zonse za ma SVG athu ophatikizidwa (onse omwe amagwiritsidwa ntchito kudzera background-image) kuti muwunikenso bwino zomwe mungasankhe.

Tsekani batani (yogwiritsidwa ntchito pazidziwitso ndi ma modals)
Mabokosi ochonga makonda ndi mabatani a wayilesi
Kusintha mawonekedwe
Mafano otsimikizira mawonekedwe
Custom kusankha mindandanda yazakudya
Kuwongolera kwa Carousel
Navbar kusintha mabatani

Kutengera ndi zokambirana za anthu ammudzi , njira zina zothanirana ndi izi mu codebase yanu zikuphatikizapo kusintha ma URL ndi katundu wosungidwa kwanuko, kuchotsa zithunzi ndi kugwiritsa ntchito zithunzi zapaintaneti (sizingatheke m'zigawo zonse), ndikusintha CSP yanu. Malingaliro athu ndikuwunika mosamala mfundo zanu zachitetezo ndikusankha njira yabwino yopitira patsogolo, ngati kuli kofunikira.