in English

Pasiuna

Pagsugod sa Bootstrap, ang pinakasikat nga framework sa kalibutan para sa paghimo og responsive, mobile-first nga mga site, nga adunay jsDelivr ug template starter page.

Niini nga panid

Dali nga pagsugod

Nangita aron dali nga idugang ang Bootstrap sa imong proyekto? Gamita ang jsDelivr, usa ka libre nga open source CDN. Gigamit ang usa ka manager sa package o kinahanglan nga i-download ang gigikanan nga mga file? Lakaw ngadto sa pahina sa pag-download .

CSS

Kopyaha-paste ang stylesheet <link>sa imong <head>atubangan sa tanan nga uban pang stylesheet aron makarga ang among CSS.

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

JS

Daghan sa among mga sangkap nanginahanglan sa paggamit sa JavaScript aron molihok. Sa piho, nanginahanglan sila sa among kaugalingon nga mga plugin sa JavaScript ug Popper . Ibutang ang usa sa mosunod nga <script>s duol sa katapusan sa imong mga panid, sa wala pa ang panapos nga </body>tag, aron mahimo kini.

Bundle

Ilakip ang matag Bootstrap JavaScript plugin ug dependency sa usa sa among duha ka bundle. Ang duha bootstrap.bundle.jsug bootstrap.bundle.min.jsnaglakip sa Popper alang sa among mga tooltip ug popovers. Alang sa dugang nga kasayuran bahin sa kung unsa ang gilakip sa Bootstrap, palihug tan-awa ang among seksyon sa sulud .

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

Magbulag

Kung magdesisyon ka nga mag-uban sa bulag nga solusyon sa script, kinahanglan nga mag-una ang Popper (kung naggamit ka mga tooltip o popovers), ug dayon ang among mga plugin sa 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 modulo

Kung mogamit ka <script type="module">, palihug tan-awa ang among paggamit sa Bootstrap ingon usa ka seksyon sa module .

Mga sangkap

Natingala kung unsang mga sangkap ang klaro nga nanginahanglan sa among JavaScript ug Popper? I-klik ang link sa pagpakita sa mga sangkap sa ubos. Kung dili ka sigurado bahin sa kinatibuk-ang istruktura sa panid, ipadayon ang pagbasa alang sa usa ka panig-ingnan nga template sa panid.

Ipakita ang mga sangkap nga nanginahanglan og JavaScript

Mga alerto sa pag-dismiss
Mga buton para sa pag-toggling sa mga estado ug checkbox/radio functionality
Carousel para sa tanang gawi sa slide, kontrol, ug indikasyon
Pag-collapse para sa pag-toggle sa visibility sa sulod
Mga dropdown para sa pagpakita ug pagposisyon (gikinahanglan usab ang Popper )
Mga modala alang sa pagpakita, pagposisyon, ug pamatasan sa pag-scroll
Navbar alang sa pagpalapad sa among Collapse plugin aron mapatuman ang responsive nga pamatasan
Mga toast para sa pagpakita ug pagtangtang
Mga tooltip ug popover para sa pagpakita ug pagpoposisyon (kinahanglan usab ang Popper )
Scrollspy alang sa scroll behavior ug navigation updates

Panimulang template

Siguruha nga i-set up ang imong mga panid sa pinakabag-o nga mga sumbanan sa disenyo ug pag-uswag. Kana nagpasabut sa paggamit sa usa ka HTML5 doctype ug naglakip sa usa ka viewport meta tag alang sa husto nga responsive nga mga kinaiya. Ibutang kini tanan ug ang imong mga panid kinahanglan nga ingon niini:

<!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>

Alang sa sunod nga mga lakang, bisitaha ang Layout docs o ang among opisyal nga mga pananglitan aron masugdan ang pagbutang sa sulud ug mga sangkap sa imong site.

Importante nga mga global

Ang Bootstrap naggamit og pipila ka importante nga global nga mga estilo ug mga setting nga kinahanglan nimong masayran kung gamiton kini, nga ang tanan halos gitumong sa pag- normalize sa cross browser styles. Magsalom ta.

HTML5 nga doctype

Ang Bootstrap nagkinahanglan sa paggamit sa HTML5 doctype. Kung wala kini, makakita ka og pipila ka funky nga dili kompleto nga estilo, apan ang paglakip niini dili kinahanglan nga hinungdan sa bisan unsang daghang mga hiccups.

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

Responsive nga meta tag

Ang Bootstrap gihimong mobile una , usa ka estratehiya diin atong gi-optimize una ang code para sa mga mobile device ug dayon i-scale ang mga component kung gikinahanglan gamit ang CSS media query. Aron masiguro ang husto nga paghubad ug pag-zoom sa paghikap alang sa tanan nga mga aparato, idugang ang responsive viewport meta tag sa imong <head>.

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

Makita nimo ang usa ka pananglitan niini sa aksyon sa template sa pagsugod .

Ang gidak-on sa kahon

Para sa mas prangka nga pagsukod sa CSS, gibalhin namo ang global box-sizingvalue gikan content-boxsa border-box. Gipaneguro niini paddingnga dili makaapekto sa katapusang nakalkula nga gilapdon sa usa ka elemento, apan mahimo kini nga hinungdan sa mga problema sa pipila nga software sa ikatulo nga partido sama sa Google Maps ug Google Custom Search Engine.

Sa talagsaon nga okasyon kinahanglan nimo nga i-override kini, gamita ang usa ka butang sama sa mosunod:

.selector-for-some-widget {
  box-sizing: content-box;
}

Uban sa snippet sa ibabaw, ang mga nested nga elemento—lakip ang namugna nga content pinaagi sa ::beforeug— ::afterang tanan makapanunod sa gipiho box-sizingalang niana .selector-for-some-widget.

Pagkat-on og dugang mahitungod sa modelo sa kahon ug pagsukod sa CSS Tricks .

Pag-reboot

Para sa gipaayo nga cross-browser rendering, among gigamit ang Reboot para matul-id ang mga inconsistency sa mga browser ug device samtang naghatag ug gamay nga mas opinyon nga mga pag-reset sa komon nga HTML nga mga elemento.

Komunidad

Magpabilin nga updated sa pag-uswag sa Bootstrap ug pag-abot sa komunidad uban niining makatabang nga mga kapanguhaan.

Pagbasa ug pag-subscribe sa The Official Bootstrap Blog .
Pakig-chat sa mga kaubang Bootstrappers sa IRC. Sa irc.libera.chatserver, sa #bootstrapchannel.
Ang tabang sa pagpatuman mahimong makit-an sa Stack Overflow (tag bootstrap-5).
Kinahanglang gamiton sa mga developers ang keyword bootstrapsa mga pakete nga nagbag-o o nagdugang sa pagpaandar sa Bootstrap kung nag-apod-apod pinaagi sa npm o parehas nga mga mekanismo sa paghatud alang sa labing kataas nga pagkadiskobre.

Mahimo usab nimo sundan ang @getbootstrap sa Twitter alang sa labing bag-o nga tsismis ug katingad-an nga mga music video.