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.

Sa pahinang ito

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.htmlfile 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-sizinghalaga mula content-boxsa border-box. Tinitiyak paddingnitong 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 ::beforeat— ::afteray mamamana ng lahat ng tinukoy box-sizingpara 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.chatserver, sa #bootstrapchannel.
Maaaring makita ang tulong sa pagpapatupad sa Stack Overflow (na-tag bootstrap-5).
Dapat gamitin ng mga developer ang keyword bootstrapsa 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.