Pambuka

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

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

JS

Akeh komponen kita mbutuhake panggunaan JavaScript supaya bisa digunakake. Khusus, mbutuhake jQuery , Popper , lan plugin JavaScript kita dhewe. Kita nggunakake jQuery kang slim mbangun , nanging versi lengkap uga didhukung.

Selehake salah siji saka ing ngisor <script>iki ing cedhak mburi kaca, sadurunge </body>tag nutup, kanggo ngaktifake. jQuery kudu luwih dhisik, banjur Popper, banjur plugin JavaScript kita.

Buntelan

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

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

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

Komponen

Penasaran komponen endi sing mbutuhake jQuery, JavaScript, lan Popper? Klik link nuduhake komponen ing ngisor iki. Yen sampeyan ora yakin babagan struktur kaca, 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
Scrollspy kanggo prilaku gulung lan nganyari navigasi
Tooltips lan popovers kanggo nampilake lan posisi (uga mbutuhake Popper )

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

Iku kabeh sing perlu kanggo syarat kaca sakabèhé. Dolan maring docs Tata Letak utawa conto resmi kita kanggo miwiti laying metu isi situs lan komponen.

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

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é komputasi pungkasan saka sawijining 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-4).
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.

CSPs lan SVGs ditempelake

Sawetara komponen Bootstrap kalebu SVG sing dipasang ing CSS kanggo nggawe komponen kanthi konsisten lan gampang ing browser lan piranti. Kanggo organisasi kanthi konfigurasi CSP sing luwih ketat , kita wis nyathet kabeh kedadeyan SVG sing disematake (kabeh diterapake liwat background-image) supaya sampeyan bisa mriksa pilihan sampeyan kanthi luwih jero.

Tombol tutup (digunakake ing tandha lan modal)
Kothak lan tombol radio khusus
Ngalih wangun
Ikon validasi formulir
Custom milih menu
Kontrol carousel
Tombol ngalih Navbar

Adhedhasar obrolan komunitas , sawetara opsi kanggo ngatasi iki ing basis kode sampeyan kalebu ngganti URL karo aset sing di-host sacara lokal, mbusak gambar lan nggunakake gambar inline (ora bisa ing kabeh komponen), lan ngowahi CSP sampeyan. Rekomendasi kita yaiku mriksa kabijakan keamanan sampeyan kanthi ati-ati lan mutusake dalan sing paling apik, yen perlu.