E hoʻomaka me Bootstrap
ʻO Bootstrap kahi mea hana ikaika a piha i nā hiʻohiʻona. E kūkulu i kekahi mea—mai ka prototype a i ka hana—i nā minuke.
Hoʻomaka wikiwiki
E hoʻomaka me ka hoʻokomo ʻana i kā Bootstrap hoʻomākaukau-hoʻomākaukau CSS a me JavaScript ma CDN me ka ʻole o ka pono o nā hana kūkulu. E ʻike iā ia ma ka hoʻomaʻamaʻa me kēia Bootstrap CodePen demo .
-
E hana i kahi
index.html
faila hou ma kāu kumu papahana. E hoʻokomo pū i ka<meta name="viewport">
hōʻailona no ka hana pane kūpono i nā polokalamu kelepona.<!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>
-
E hoʻokomo i kā Bootstrap CSS a me JS. E kau i ka
<link>
hōʻailona ma ka<head>
CSS, a me ka<script>
hōʻailona no kā mākou puʻupuʻu JavaScript (me Popper no ka hoʻonohonoho ʻana i nā hāʻule iho, poppers, a me nā mea hana) ma mua o ka pani ʻana</body>
. E aʻo hou e pili ana i kā mākou mau loulou 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>
Hiki iā ʻoe ke hoʻohui pū me Popper a me kā mākou JS. Inā ʻaʻole ʻoe e hoʻolālā e hoʻohana i nā hāʻule iho, popovers, a i ʻole nā mea hana, e mālama i kekahi mau kilobytes ma ka hoʻokomo ʻole ʻana iā 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>
-
Aloha, honua! E wehe i ka ʻaoʻao ma kāu polokalamu kele pūnaewele e ʻike i kāu ʻaoʻao Bootstrapped. I kēia manawa hiki iā ʻoe ke hoʻomaka i ke kūkulu ʻana me Bootstrap ma ka hana ʻana i kāu hoʻolālā ponoʻī , hoʻohui i nā ʻāpana he nui , a me ka hoʻohana ʻana i kā mākou mau hiʻohiʻona kūhelu .
Nā loulou CDN
Ma ke ʻano he kuhikuhi, eia kā mākou mau loulou CDN mua.
wehewehe | HKH |
---|---|
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 |
Hiki nō hoʻi iā ʻoe ke hoʻohana i ka CDN e kiʻi i kekahi o kā mākou mau kūkulu hou i helu ʻia ma ka ʻaoʻao Contents .
Nā ʻanuʻu aʻe
-
E heluhelu hou aʻe e pili ana i kekahi mau hoʻonohonoho kaiapuni honua nui a Bootstrap e hoʻohana ai.
-
E heluhelu e pili ana i ka mea i komo i loko o Bootstrap i kā mākou ʻatikala a me ka papa inoa o nā mea e koi ai iā JavaScript ma lalo.
-
Makemake ʻoe i kahi mana hou aʻe? E noʻonoʻo i ke kūkulu ʻana me Bootstrap ma o ka hoʻokomo ʻana i nā faila kumu ma o ka luna pūʻulu .
-
Ke ʻimi nei e hoʻohana iā Bootstrap ma ke ʻano he module me
<script type="module">
? E ʻoluʻolu e nānā i kā mākou hoʻohana ʻana iā Bootstrap ma ke ʻano he ʻāpana module .
Nā ʻāpana JS
Makemake ʻoe i nā ʻāpana e koi pono i kā mākou JavaScript a me Popper? Kaomi i ka loulou hōʻike ʻāpana ma lalo. Inā ʻaʻole maopopo ʻoe e pili ana i ke ʻano o ka ʻaoʻao maʻamau, e hoʻomau i ka heluhelu ʻana no kahi laʻana ʻaoʻao.
Hōʻike i nā ʻāpana e koi ana iā JavaScript
- ʻŌlelo no ka hoʻokuʻu ʻana
- Nā pihi no ka hoʻololi ʻana i nā mokuʻāina a me ka hana pahu pahu
- Carousel no nā ʻano paheʻe a pau, nā mana, a me nā hōʻailona
- E hāʻule no ka hoʻololi ʻana i ka ʻike o ka ʻike
- Nā hāʻule no ka hōʻike ʻana a me ka hoʻonohonoho ʻana (pono pū kekahi Popper )
- Nā ʻano no ka hōʻike ʻana, ka hoʻonohonoho ʻana, a me ka hana ʻōwili
- Navbar no ka hoʻonui ʻana i kā mākou Collapse a me Offcanvas plugins e hoʻokō i nā ʻano pane
- Navs me ka plugin Tab no ka hoʻololi ʻana i nā pane ʻike
- Offcanvases no ka hōʻike ʻana, ka hoʻonohonoho ʻana, a me ka hana ʻōwili
- Scrollspy no ka hana scroll a me nā hoʻokele hoʻokele
- Toasts no ka hōʻike ʻana a me ka hoʻokuʻu ʻana
- Nā mea hana a me nā popovers no ka hōʻike ʻana a me ka hoʻonohonoho ʻana (pono pū kekahi Popper )
Nā honua koʻikoʻi
Hoʻohana ʻo Bootstrap i kahi lima o nā kaila honua koʻikoʻi a me nā hoʻonohonoho, ʻo ia mau mea a pau i hoʻonohonoho wale ʻia i ka hoʻomaʻamaʻa ʻana o nā ʻano polokalamu kele pūnaewele. E luʻu kākou.
HTML5 doctype
Pono ʻo Bootstrap i ka hoʻohana ʻana i ka HTML5 doctype. Inā ʻaʻole ia, e ʻike ʻoe i kahi ʻano leʻaleʻa a piha ʻole.
<!doctype html>
<html lang="en">
...
</html>
ʻO ka tag meta pane
Hoʻokumu mua ʻia ʻo Bootstrap i ka mobile , kahi hoʻolālā e hoʻopaʻa mua ai mākou i nā code no nā polokalamu kelepona a laila e hoʻonui i nā mea e pono ai me ka hoʻohana ʻana i nā nīnau media CSS. No ka hōʻoia ʻana i ka hāʻawi pono ʻana a me ka hoʻopā ʻana i nā hāmeʻa a pau, e hoʻohui i ka tag meta viewport pane i kāu <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Hiki iā ʻoe ke ʻike i kahi laʻana o kēia i ka hana ma ka hoʻomaka wikiwiki .
Ka nui pahu
No ka hoʻonui pololei ʻana i ka CSS, hoʻololi mākou i ka box-sizing
waiwai honua mai content-box
ka border-box
. padding
ʻAʻole pili kēia i ka laulā helu hope o kahi mea, akā hiki ke hoʻopilikia i kekahi polokalamu ʻaoʻao ʻekolu e like me Google Maps a me Google Custom Search Engine .
I ka manawa kakaikahi pono ʻoe e hoʻopau iā ia, e hoʻohana i kahi mea e like me kēia:
.selector-for-some-widget {
box-sizing: content-box;
}
Me ka snippet i luna, nā mea i hoʻopaʻa ʻia-me ka ʻike i hana ʻia ma o ::before
a - e loaʻa i nā mea ::after
āpau i ʻōlelo ʻia box-sizing
no kēlā .selector-for-some-widget
.
E aʻo hou e pili ana i ka pahu pahu a me ka nui ʻana ma CSS Tricks .
Hoʻomaka hou
No ka hoʻomaikaʻi ʻana i ka hoʻololi ʻana i ka polokalamu kele pūnaewele, hoʻohana mākou i ka Reboot e hoʻoponopono i nā ʻokoʻa like ʻole ma waena o nā polokalamu kele pūnaewele a me ka hāʻawi ʻana i nā manaʻo hou i nā mea HTML maʻamau.
Kaiāulu
E hoʻomau mau i ka hoʻomohala ʻana o Bootstrap a hiki i ke kaiāulu me kēia mau kumuwaiwai kōkua.
- Heluhelu a kau inoa ʻo The Official Bootstrap Blog .
- E nīnau a e ʻimi i kā mākou Kūkākūkā GitHub .
- E kamaʻilio me nā hoa Bootstrappers ma IRC. Ma ke
irc.libera.chat
kikowaena, ma ke#bootstrap
kahawai. - Hiki ke loaʻa ke kōkua hoʻokō ma Stack Overflow (tagged
bootstrap-5
). - Pono nā mea hoʻomohala e hoʻohana i ka huaʻōlelo
bootstrap
ma nā pūʻolo e hoʻololi a hoʻohui paha i ka hana o Bootstrap i ka wā e puʻunaue ai ma o npm a i ʻole nā mea hoʻopuka like ʻole no ka ʻike kiʻekiʻe.
Hiki iā ʻoe ke hahai iā @getbootstrap ma Twitter no nā wikiō mele weliweli loa.