Bubuka

Mimitian ku Bootstrap, kerangka anu pang populerna di dunya pikeun ngawangun situs anu responsif, pangheulana mobile, kalayan jsDelivr sareng halaman awal template.

Dina kaca ieu

Mimitian gancang

Pilari pikeun gancang nambahkeun Bootstrap kana proyék anjeun? Anggo jsDelivr, CDN open source gratis. Nganggo manajer pakét atanapi kedah ngaunduh file sumber? Pindah ka halaman undeuran .

CSS

Salin-témpél stylesheet <link>ka anjeun <head>sateuacan sadaya stylesheet séjén pikeun ngamuat CSS kami.

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

JS

Loba komponén urang merlukeun pamakéan JavaScript pikeun fungsi. Husus, aranjeunna merlukeun urang sorangan JavaScript plugins na Popper . Teundeun salah sahiji <script>s handap deukeut tungtung kaca anjeun, katuhu saméméh </body>tag nutup, pikeun ngaktipkeun aranjeunna.

kebat

Kalebet unggal plugin Bootstrap JavaScript sareng kagumantungan sareng salah sahiji tina dua kebat kami. Duanana bootstrap.bundle.jssarta bootstrap.bundle.min.jskaasup Popper pikeun tooltips na popovers kami. Kanggo inpormasi anu langkung lengkep ihwal naon anu kalebet dina Bootstrap, mangga tingali bagian eusi kami .

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

Papisah

Upami anjeun mutuskeun nganggo solusi skrip anu misah, Popper kedah sumping heula (upami anjeun nganggo tooltip atanapi popovers), teras plugins JavaScript kami.

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

modul

Upami anjeun nganggo <script type="module">, mangga tingal kami nganggo Bootstrap salaku bagian modul .

Komponén

Panasaran komponén mana anu sacara eksplisit ngabutuhkeun JavaScript sareng Popper kami? Klik tautan acara komponén di handap. Upami anjeun henteu yakin ngeunaan struktur halaman umum, teraskeun maca pikeun conto template halaman.

Témbongkeun komponén merlukeun JavaScript

Siaga pikeun ngabubarkeun
Tombol pikeun togling kaayaan sareng kotak centang / fungsionalitas radio
Carousel pikeun sakabéh paripolah slide, kadali, sarta indikator
Runtuhkeun pikeun toggling pisibilitas eusi
Dropdowns pikeun mintonkeun sarta positioning (ogé merlukeun Popper )
Modél pikeun mintonkeun, posisi, jeung kabiasaan ngagulung
Navbar pikeun ngalegaan plugin Collapse kami pikeun nerapkeun paripolah responsif
Toasts pikeun mintonkeun sarta dismissing
Tooltips sareng popovers pikeun mintonkeun sareng posisi (ogé peryogi Popper )
Scrollspy pikeun kabiasaan ngagugulung sareng apdet navigasi

Citakan starter

Pastikeun kaca anjeun nyetél sareng standar desain sareng pamekaran panganyarna. Éta hartosna nganggo doctype HTML5 sareng kalebet tag meta viewport pikeun paripolah responsif anu leres. Pasang sadayana sareng halaman anjeun kedah sapertos kieu:

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

Pikeun léngkah salajengna, buka Dokumén Tata Letak atanapi conto resmi kami pikeun ngamimitian nempatkeun eusi sareng komponén situs anjeun.

Globals penting

Bootstrap nganggo sakeupeul gaya sareng setelan global anu penting anu anjeun kedah perhatikeun nalika nganggo éta, sadayana ampir sacara éksklusif diarahkeun kana normalisasi gaya browser silang. Hayu urang teuleum ka jero.

HTML5 doctype

Bootstrap merlukeun pamakéan doctype HTML5. Tanpa éta, anjeun bakal ningali sababaraha gaya anu teu lengkep, tapi kalebet éta henteu kedah nyababkeun hiccups anu ageung.

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

Meta tag responsif

Bootstrap dikembangkeun mobile munggaran , strategi nu urang ngaoptimalkeun kode pikeun alat nu bagerak munggaran lajeng skala up komponén sakumaha perlu ngagunakeun queries média CSS. Pikeun mastikeun rendering anu leres sareng zoom touch pikeun sadaya alat, tambahkeun tag meta viewport responsif kana <head>.

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

Anjeun tiasa ningali conto ieu dina aksi dina template starter .

Ukuran kotak

Pikeun ukuran anu langkung lugas dina CSS, urang ngalihkeun box-sizingnilai global tina content-boxka border-box. Ieu ensures paddingteu mangaruhan lebar diitung ahir hiji unsur, tapi bisa ngabalukarkeun masalah sareng sababaraha software pihak-katilu kawas Google Maps sarta Google Adat Search Engine.

Dina kasempetan langka anjeun kudu override eta, make hal kawas kieu:

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

Jeung snippet luhur, nested elemen-kaasup dihasilkeun eusi via ::beforena ::after-sadaya bakal inherit nu dieusian box-sizingpikeun éta .selector-for-some-widget.

Diajar langkung seueur ngeunaan modél kotak sareng ukuran dina Trik CSS .

Reboot

Pikeun ningkatkeun rendering cross-browser, kami nganggo Reboot pikeun ngabenerkeun inconsistencies dina panyungsi sareng alat bari nyayogikeun reset anu langkung saé pikeun elemen HTML umum.

Komunitas

Tetep up to date dina ngembangkeun Bootstrap sarta ngahontal ka masarakat kalawan sumberdaya mantuan ieu.

Baca jeung ngalanggan The Resmi Bootstrap Blog .
Ngobrol jeung sasama Bootstrappers di IRC. Dina irc.libera.chatserver, dina #bootstrapsaluran.
Pitulung palaksanaan tiasa dipendakan di Stack Overflow (tagged bootstrap-5).
Pamekar kedah nganggo kecap konci bootstrapdina bungkusan anu ngarobih atanapi nambihan kana pungsionalitas Bootstrap nalika nyebarkeun ngaliwatan npm atanapi mékanisme pangiriman anu sami pikeun kamampuan maksimal.

Anjeun ogé tiasa ngiringan @getbootstrap dina Twitter pikeun gosip panganyarna sareng video musik anu saé.