Lumpat menyang isi utama Lumpat menyang pandhu arah docs
in English

Pambuka

Miwiti Bootstrap, kerangka paling populer ing donya kanggo mbangun situs sing responsif, mobile-first, kanthi jsDelivr lan kaca wiwitan cithakan.

Ing kaca iki

Miwiti cepet

Nggolek nambah Bootstrap kanthi cepet menyang proyek sampeyan? Gunakake jsDelivr, CDN open source gratis. Nggunakake manajer paket utawa kudu ngundhuh file sumber? Pindhah menyang kaca undhuhan .

CSS

Salin-tempel stylesheet <link>menyang <head>sadurunge kabeh stylesheet liyane kanggo mbukak CSS kita.

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

JS

Akeh komponen kita mbutuhake panggunaan JavaScript supaya bisa digunakake. Khusus, dheweke mbutuhake plugin JavaScript lan Popper kita dhewe . Selehake salah siji saka ing ngisor <script>iki ing cedhak mburi kaca, sadurunge </body>tag nutup, kanggo ngaktifake.

Buntelan

Kalebu saben plugin Bootstrap JavaScript lan ketergantungan karo salah siji saka rong paket kita. Loro -lorone bootstrap.bundle.jslan bootstrap.bundle.min.jskalebu Popper kanggo tooltips lan popovers kita. Kanggo informasi luwih lengkap babagan apa sing kalebu ing Bootstrap, deleng bagean konten .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

kapisah

Yen sampeyan mutusake nggunakake solusi skrip sing kapisah, Popper kudu luwih dhisik (yen sampeyan nggunakake tooltip utawa popovers), banjur plugin JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Modul

Yen sampeyan nggunakake <script type="module">, waca kita nggunakake Bootstrap minangka bagean modul .

Komponen

Penasaran komponen endi sing mbutuhake JavaScript lan Popper kita? Klik link nuduhake komponen ing ngisor iki. Yen sampeyan ora yakin babagan struktur kaca umum, terus maca kanggo conto template kaca.

Tampilake komponen sing mbutuhake JavaScript
  • Tandha kanggo ngilangi
  • Tombol kanggo ngowahi status lan kothak centhang / fungsi radio
  • Carousel kanggo kabeh prilaku slide, kontrol, lan indikator
  • Ambruk kanggo ngowahi visibilitas konten
  • Dropdowns kanggo nampilake lan posisi (uga mbutuhake Popper )
  • Modal kanggo nampilake, posisi, lan prilaku gulung
  • Navbar kanggo ndawakake plugin Collapse kanggo ngetrapake prilaku responsif
  • Offcanvases kanggo nampilake, posisi, lan prilaku gulung
  • Toasts kanggo nampilake lan ngilangi
  • Tooltips lan popovers kanggo nampilake lan posisi (uga mbutuhake Popper )
  • Scrollspy kanggo prilaku gulung lan nganyari navigasi

Cithakan wiwitan

Priksa manawa kaca sampeyan wis nyiyapake kanthi standar desain lan pangembangan paling anyar. Tegese nggunakake doctype HTML5 lan kalebu tag meta viewport kanggo prilaku responsif sing tepat. Sijine kabeh lan kaca sampeyan kudu katon kaya iki:

<!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-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Kanggo langkah sabanjure, bukak dokumen Tata Letak utawa conto resmi kita kanggo miwiti nyetel isi lan komponen situs sampeyan.

Globals penting

Bootstrap nggunakake sawetara gaya lan setelan global sing penting sing sampeyan kudu ngerti nalika nggunakake, kabeh sing meh khusus diarahake menyang normalisasi gaya browser silang. Ayo nyilem.

HTML5 doctype

Bootstrap mbutuhake nggunakake doctype HTML5. Tanpa iku, sampeyan bakal bisa ndeleng sawetara funky noto lengkap, nanging kalebu iku ora bakal nimbulaké hiccups owahan.

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

Meta tag responsif

Bootstrap dikembangake luwih dhisik kanggo seluler , strategi ing ngendi kita ngoptimalake kode kanggo piranti seluler luwih dhisik lan banjur nggedhekake komponen yen perlu nggunakake pitakon media CSS. Kanggo mesthekake rendering sing tepat lan zooming tutul kanggo kabeh piranti, tambahake tag meta viewport responsif menyang <head>.

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

Sampeyan bisa ndeleng conto iki ing tumindak ing template wiwitan .

Ukuran kothak

Kanggo ukuran sing luwih gampang ing CSS, kita ngalih box-sizingnilai global saka content-boxmenyang border-box. Iki mesthekake paddingora mengaruhi jembar pungkasan saka unsur, nanging bisa nimbulaké masalah karo sawetara piranti lunak pihak katelu kaya Google Maps lan Google Custom Search Engine.

Ing wusana langka sampeyan kudu override iku, nggunakake kaya ing ngisor iki:

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

Kanthi cuplikan ing ndhuwur, unsur-unsur bersarang-kalebu konten sing digawe liwat ::beforelan- ::afterkabeh bakal oleh warisan box-sizingsing ditemtokake kanggo .selector-for-some-widget.

Sinau luwih lengkap babagan model kothak lan ukuran ing Trik CSS .

Urip maneh

Kanggo rendering lintas-browser sing luwih apik, kita nggunakake Urip maneh kanggo mbenerake inconsistencies antarane browser lan piranti nalika nyediakake reset sing rada luwih apik kanggo unsur HTML umum.

Masyarakat

Tetep gaul babagan pangembangan Bootstrap lan tekan komunitas kanthi sumber daya sing migunani iki.

  • Waca lan langganan Blog Bootstrap Resmi .
  • Ngobrol karo fellow Bootstrappers ing IRC. Ing irc.libera.chatserver, ing #bootstrapsaluran.
  • Bantuan implementasine bisa ditemokake ing Stack Overflow (tagged bootstrap-5).
  • Pangembang kudu nggunakake tembung kunci bootstraping paket sing ngowahi utawa nambah fungsi Bootstrap nalika nyebarake liwat npm utawa mekanisme pangiriman sing padha supaya bisa ditemokake kanthi maksimal.

Sampeyan uga bisa tindakake @getbootstrap ing Twitter kanggo gosip paling anyar lan video musik apik tenan.