Yambani ndi Bootstrap
Bootstrap ndi chida champhamvu, chodzaza ndi zida zakutsogolo. Pangani chilichonse - kuyambira pa prototype mpaka kupanga - mumphindi.
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.html
fayilo 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-sizing
mtengo wapadziko lonse lapansi content-box
kupita ku border-box
. Izi zimawonetsetsa padding
kuti 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 - ::before
zonse ::after
zidzalandira zomwe box-sizing
zafotokozedwazo .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.chat
seva, mu#bootstrap
tchanelo. - Thandizo lokhazikitsa litha kupezeka pa Stack Overflow (tagged
bootstrap-5
). - Madivelopa akuyenera kugwiritsa ntchito mawu osakira
bootstrap
pamaphukusi 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.