Magsimula sa Bootstrap
Ang Bootstrap ay isang malakas, puno ng tampok na frontend toolkit. Bumuo ng kahit ano—mula sa prototype hanggang sa produksyon—sa ilang minuto.
Mabilis na pagsisimula
Magsimula sa pamamagitan ng pagsasama ng CSS at JavaScript na handa sa produksyon ng Bootstrap sa pamamagitan ng CDN nang hindi nangangailangan ng anumang mga hakbang sa pagbuo. Tingnan ito sa pagsasanay sa Bootstrap CodePen demo na ito .
-
Gumawa ng bagong
index.html
file sa root ng iyong proyekto. Isama<meta name="viewport">
rin ang tag para sa tamang tumutugon na gawi sa mga mobile device.<!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>
-
Isama ang CSS at JS ng Bootstrap. Ilagay ang
<link>
tag sa<head>
para sa aming CSS, at ang<script>
tag para sa aming JavaScript bundle (kabilang ang Popper para sa pagpoposisyon ng mga dropdown, poppers, at tooltip) bago ang pagsasara</body>
. Matuto nang higit pa tungkol sa aming mga link sa 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>
Maaari mo ring isama ang Popper at ang aming JS nang hiwalay. Kung hindi mo planong gumamit ng mga dropdown, popover, o tooltip, makatipid ng ilang kilobytes sa pamamagitan ng hindi pagsasama ng 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>
-
Hello, mundo! Buksan ang pahina sa iyong piniling browser upang makita ang iyong Bootstrapped na pahina. Ngayon ay maaari ka nang magsimulang bumuo gamit ang Bootstrap sa pamamagitan ng paglikha ng iyong sariling layout , pagdaragdag ng dose-dosenang bahagi , at paggamit ng aming mga opisyal na halimbawa .
Mga link ng CDN
Bilang sanggunian, narito ang aming pangunahing CDN link.
Paglalarawan | 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 |
Maaari mo ring gamitin ang CDN upang kunin ang alinman sa aming mga karagdagang build na nakalista sa pahina ng Mga Nilalaman .
Mga susunod na hakbang
-
Magbasa nang kaunti pa tungkol sa ilang mahahalagang pandaigdigang setting ng kapaligiran na ginagamit ng Bootstrap.
-
Basahin ang tungkol sa kung ano ang kasama sa Bootstrap sa aming seksyon ng mga nilalaman at ang listahan ng mga bahagi na nangangailangan ng JavaScript sa ibaba.
-
Kailangan ng kaunti pang kapangyarihan? Isaalang-alang ang pagbuo gamit ang Bootstrap sa pamamagitan ng pagsasama ng mga source file sa pamamagitan ng package manager .
-
Naghahanap upang gamitin ang Bootstrap bilang isang module na may
<script type="module">
? Mangyaring sumangguni sa aming paggamit ng Bootstrap bilang seksyon ng module.
Mga bahagi ng JS
Nagtataka kung aling mga bahagi ang tahasang nangangailangan ng aming JavaScript at Popper? I-click ang link na ipakita ang mga bahagi sa ibaba. Kung hindi ka sigurado tungkol sa pangkalahatang istraktura ng pahina, ipagpatuloy ang pagbabasa para sa isang halimbawang template ng pahina.
Ipakita ang mga bahagi na nangangailangan ng JavaScript
- Mga alerto para sa pag-dismiss
- Mga pindutan para sa pag-toggling ng mga estado at paggana ng checkbox/radio
- Carousel para sa lahat ng gawi, kontrol, at indicator ng slide
- I-collapse para sa pag-toggle ng visibility ng content
- Mga dropdown para sa pagpapakita at pagpoposisyon (nangangailangan din ng Popper )
- Mga modal para sa pagpapakita, pagpoposisyon, at pag-uugali ng pag-scroll
- Navbar para sa pagpapalawak ng aming Collapse at Offcanvas na mga plugin upang ipatupad ang mga tumutugon na gawi
- Mga Nav gamit ang Tab plugin para sa pag-toggle ng mga pane ng nilalaman
- Offcanvases para sa pagpapakita, pagpoposisyon, at pag-uugali ng pag-scroll
- Scrollspy para sa pag-uugali ng pag-scroll at mga update sa nabigasyon
- Mga toast para sa pagpapakita at pag-dismiss
- Mga tooltip at popover para sa pagpapakita at pagpoposisyon (nangangailangan din ng Popper )
Mga mahahalagang global
Gumagamit ang Bootstrap ng ilang mahahalagang istilo at setting sa buong mundo, na halos lahat ay nakatuon sa normalisasyon ng mga istilo ng cross browser. Sumisid tayo.
HTML5 doctype
Kinakailangan ng Bootstrap ang paggamit ng HTML5 doctype. Kung wala ito, makakakita ka ng nakakatuwang at hindi kumpletong pag-istilo.
<!doctype html>
<html lang="en">
...
</html>
Tumutugon meta tag
Ang Bootstrap ay binuo muna sa mobile , isang diskarte kung saan ino-optimize muna namin ang code para sa mga mobile device at pagkatapos ay palakihin ang mga bahagi kung kinakailangan gamit ang mga query sa media ng CSS. Upang matiyak ang wastong pag-render at pag-zoom ng pagpindot para sa lahat ng device, idagdag ang tumutugong viewport meta tag sa iyong <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Makakakita ka ng isang halimbawa nito sa pagkilos sa mabilisang pagsisimula .
Sukat ng kahon
Para sa mas direktang sukat sa CSS, inililipat namin ang pandaigdigang box-sizing
halaga mula content-box
sa border-box
. Tinitiyak padding
nitong hindi makakaapekto sa panghuling nakalkulang lapad ng isang elemento, ngunit maaari itong magdulot ng mga problema sa ilang third-party na software tulad ng Google Maps at Google Custom Search Engine.
Sa pambihirang pagkakataon na kailangan mong i-override ito, gumamit ng isang bagay tulad ng sumusunod:
.selector-for-some-widget {
box-sizing: content-box;
}
Gamit ang snippet sa itaas, ang mga nested na elemento—kabilang ang nabuong content sa pamamagitan ng ::before
at— ::after
ay mamamana ng lahat ng tinukoy box-sizing
para doon .selector-for-some-widget
.
Matuto nang higit pa tungkol sa modelo ng kahon at pagpapalaki sa CSS Tricks .
I-reboot
Para sa pinahusay na cross-browser na pag-render, ginagamit namin ang Reboot upang itama ang mga hindi pagkakapare-pareho sa mga browser at device habang nagbibigay ng bahagyang mas opinyon na mga pag-reset sa mga karaniwang elemento ng HTML.
Komunidad
Manatiling up-to-date sa pagbuo ng Bootstrap at makipag-ugnayan sa komunidad gamit ang mga kapaki-pakinabang na mapagkukunang ito.
- Magbasa at mag-subscribe sa The Official Bootstrap Blog .
- Magtanong at galugarin ang aming Mga Talakayan sa GitHub .
- Makipag-chat sa mga kapwa Bootstrapper sa IRC. Sa
irc.libera.chat
server, sa#bootstrap
channel. - Maaaring makita ang tulong sa pagpapatupad sa Stack Overflow (na-tag
bootstrap-5
). - Dapat gamitin ng mga developer ang keyword
bootstrap
sa mga package na nagbabago o nagdaragdag sa functionality ng Bootstrap kapag namamahagi sa pamamagitan ng npm o katulad na mga mekanismo ng paghahatid para sa maximum na pagtuklas.
Maaari mo ring sundan ang @getbootstrap sa Twitter para sa pinakabagong tsismis at kahanga-hangang music video.