Source

Panimula

Magsimula sa Bootstrap, ang pinakasikat na framework sa mundo para sa pagbuo ng tumutugon, pang-mobile na mga site, na may jsDelivr at isang template ng panimulang pahina.

Mabilis na pagsisimula

Naghahanap upang mabilis na magdagdag ng Bootstrap sa iyong proyekto? Gumamit ng jsDelivr, na ibinigay nang libre ng mga tao sa jsDelivr. Gumagamit ng manager ng package o kailangang i-download ang mga source file? Tumungo sa pahina ng pag-download .

CSS

Kopyahin-i-paste ang stylesheet sa <link>iyong <head>bago ang lahat ng iba pang stylesheet upang i-load ang aming CSS.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

Marami sa aming mga bahagi ay nangangailangan ng paggamit ng JavaScript upang gumana. Sa partikular, nangangailangan sila ng jQuery , Popper.js , at aming sariling mga plugin ng JavaScript. Ilagay ang mga sumusunod na <script>s malapit sa dulo ng iyong mga pahina, bago ang pansarang </body>tag, upang paganahin ang mga ito. Dapat mauna ang jQuery, pagkatapos ay ang Popper.js, at pagkatapos ay ang aming mga plugin ng JavaScript.

Ginagamit namin ang slim build ng jQuery , ngunit sinusuportahan din ang buong bersyon.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Nagtataka kung aling mga bahagi ang tahasang nangangailangan ng jQuery, aming JS, at Popper.js? 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.

Ang aming bootstrap.bundle.jsat bootstrap.bundle.min.jsisama ang Popper , ngunit hindi jQuery . Para sa higit pang impormasyon tungkol sa kung ano ang kasama sa Bootstrap, pakitingnan ang aming seksyon ng mga nilalaman .

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.js )
  • Mga modal para sa pagpapakita, pagpoposisyon, at pag-uugali ng pag-scroll
  • Navbar para sa pagpapalawak ng aming Collapse plugin upang ipatupad ang tumutugon na gawi
  • Mga tooltip at popover para sa pagpapakita at pagpoposisyon (nangangailangan din ng Popper.js )
  • Scrollspy para sa pag-uugali ng pag-scroll at mga update sa nabigasyon

Panimulang template

Siguraduhing i-set up ang iyong mga page gamit ang pinakabagong mga pamantayan sa disenyo at pagbuo. Nangangahulugan iyon ng paggamit ng HTML5 doctype at pagsasama ng viewport meta tag para sa mga tamang tumutugon na gawi. Pagsama-samahin ang lahat at ang iyong mga pahina ay dapat magmukhang ganito:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Iyon lang ang kailangan mo para sa pangkalahatang mga kinakailangan sa pahina. Bisitahin ang Layout docs o ang aming mga opisyal na halimbawa upang simulan ang paglalatag ng nilalaman at mga bahagi ng iyong site.

Mga mahahalagang global

Gumagamit ang Bootstrap ng ilang mahahalagang istilo at setting sa buong mundo na kailangan mong malaman kapag ginagamit ito, 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 ilang nakakatuwang hindi kumpletong pag-istilo, ngunit ang pagsasama nito ay hindi dapat magdulot ng anumang malaking hiccups.

<!doctype html>
<html lang="en">
  ...
</html>

Tumutugon meta tag

Ang Bootstrap ay binuo muna sa mobile , isang diskarte kung saan in-optimize muna namin ang code para sa mga mobile device at pagkatapos ay pinalaki 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, shrink-to-fit=no">

Makakakita ka ng isang halimbawa nito sa pagkilos sa template ng starter .

Ang laki 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 pinal na 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 napapanahon sa pagbuo ng Bootstrap at makipag-ugnayan sa komunidad gamit ang mga kapaki-pakinabang na mapagkukunang ito.

  • Sundin ang @getbootstrap sa Twitter .
  • Magbasa at mag-subscribe sa The Official Bootstrap Blog .
  • Makipag-chat sa mga kapwa Bootstrapper sa IRC. Sa irc.freenode.netserver, sa ##bootstrapchannel.
  • Maaaring makita ang tulong sa pagpapatupad sa Stack Overflow (na-tag bootstrap-4).
  • 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.