Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

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 .


  1. 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>
    
  2. 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>
    
  3. 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 .

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

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.