Source

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, kasedhiya gratis dening wong-wong ing jsDelivr. Nggunakake manajer paket utawa kudu ngundhuh file sumber? Pindhah menyang kaca download.

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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Akeh komponen kita mbutuhake panggunaan JavaScript supaya bisa digunakake. Khusus, mbutuhake jQuery , Popper.js , lan plugin JavaScript kita dhewe. Selehake <script>s ing ngisor iki ing cedhak mburi kaca, sadurunge </body>tag nutup, kanggo ngaktifake. jQuery kudu luwih dhisik, banjur Popper.js, banjur plugin JavaScript.

Kita nggunakake jQuery kang slim mbangun , nanging versi lengkap uga didhukung.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Kita bootstrap.bundle.jslan bootstrap.bundle.min.jskalebu Popper , nanging ora jQuery . Kanggo informasi luwih lengkap babagan apa sing kalebu ing Bootstrap, deleng bagean konten .

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.js )
  • Modal kanggo nampilake, posisi, lan prilaku gulung
  • Navbar kanggo nggedhekake plugin Collapse kanggo ngetrapake prilaku responsif
  • Tooltips lan popovers kanggo nampilake lan posisi (uga mbutuhake Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Iku kabeh sing perlu kanggo syarat kaca sakabèhé. Dolan maring 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, 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 kesempatan langka sampeyan kudu ngilangi, gunakake 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.

  • Tindakake @getbootstrap ing Twitter .
  • Waca lan langganan Blog Bootstrap Resmi .
  • Ngobrol karo fellow Bootstrappers ing IRC. Ing irc.freenode.netserver, 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.