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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Marami sa aming mga bahagi ay nangangailangan ng paggamit ng JavaScript upang gumana. Sa partikular, nangangailangan sila ng jQuery , Popper , at aming sariling mga plugin ng JavaScript. Ginagamit namin ang slim build ng jQuery , ngunit sinusuportahan din ang buong bersyon.

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. Dapat mauna ang jQuery, pagkatapos ay ang Popper, at pagkatapos ang aming mga plugin ng JavaScript.

Bundle

Isama ang bawat plugin 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, ngunit hindi jQuery . Isama muna ang jQuery, pagkatapos ay isang Bootstrap JavaScript bundle. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Mga bahagi

Nagtataka kung aling mga bahagi ang tahasang nangangailangan ng jQuery, aming JavaScript, at Popper? I-click ang link na ipakita ang mga bahagi sa ibaba. Kung hindi ka sigurado tungkol sa 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
Scrollspy para sa pag-uugali ng pag-scroll at mga update sa nabigasyon
Mga tooltip at popover para sa pagpapakita at pagpoposisyon (nangangailangan din ng Popper )

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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 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, shrink-to-fit=no">

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 pinal na nakalkulang lapad ng isang elemento, ngunit maaari itong magdulot ng mga problema sa ilang software ng third party 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-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 mga katulad na 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.

Mga CSP at naka-embed na SVG

Kasama sa ilang bahagi ng Bootstrap ang mga naka-embed na SVG sa aming CSS upang pantay-pantay at madali ang istilo ng mga bahagi sa mga browser at device. Para sa mga organisasyong may mas mahigpit na mga configuration ng CSP , naidokumento namin ang lahat ng pagkakataon ng aming mga naka-embed na SVG (na lahat ay inilapat sa pamamagitan ng background-image) upang mas masuri mo ang iyong mga opsyon.

Isara ang button (ginagamit sa mga alerto at modal)
Mga custom na checkbox at radio button
Mga switch ng form
Mga icon ng pagpapatunay ng form
Mga custom na piling menu
Mga kontrol ng carousel
Mga toggle button ng Navbar

Batay sa pag- uusap sa komunidad , ang ilang mga opsyon para sa pagtugon dito sa sarili mong codebase ay kinabibilangan ng pagpapalit sa mga URL ng mga asset na lokal na naka-host, pag-alis ng mga larawan at paggamit ng mga inline na larawan (hindi posible sa lahat ng bahagi), at pagbabago sa iyong CSP. Ang aming rekomendasyon ay maingat na suriin ang iyong sariling mga patakaran sa seguridad at magpasya sa isang pinakamahusay na landas pasulong, kung kinakailangan.