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.

Sa pahinang ito

Mabilis na pagsisimula

Naghahanap upang mabilis na magdagdag ng Bootstrap sa iyong proyekto? Gumamit ng jsDelivr, isang libreng open source CDN. 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

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

Bundle

Isama ang bawat plugin at dependency ng Bootstrap JavaScript sa isa sa aming dalawang bundle. Pareho bootstrap.bundle.jsat bootstrap.bundle.min.jsisama ang Popper para sa aming mga tooltip at popover. Para sa higit pang impormasyon tungkol sa kung ano ang kasama sa Bootstrap, pakitingnan ang aming seksyon ng mga nilalaman .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Hiwalay

Kung magpasya kang pumunta sa hiwalay na solusyon sa mga script, dapat mauna ang Popper (kung gumagamit ka ng mga tooltip o popover), at pagkatapos ay ang aming mga plugin ng JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Mga module

Kung gumagamit ka ng <script type="module">, mangyaring sumangguni sa aming paggamit ng Bootstrap bilang seksyon ng module.

Mga bahagi

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 plugin upang ipatupad ang tumutugon na gawi
Mga toast para sa pagpapakita at pag-dismiss
Mga tooltip at popover para sa pagpapakita at pagpoposisyon (nangangailangan din ng Popper )
Scrollspy para sa pag-uugali ng pag-scroll at mga update sa nabigasyon

Panimulang template

Tiyaking i-set up ang iyong mga page gamit ang pinakabagong mga pamantayan sa disenyo at pag-unlad. 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">

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

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Para sa mga susunod na hakbang, 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 estilo, 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 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-touch zoom para sa lahat ng device, idagdag ang tumutugong viewport meta tag sa iyong <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Maaari mong makita ang isang halimbawa nito sa pagkilos sa template ng starter .

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 napapanahon 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 .
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.