Source

Bubuka

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

Mimitian gancang

Pilari pikeun gancang nambahkeun Bootstrap kana proyék anjeun? Paké jsDelivr, disadiakeun haratis ku folks di jsDelivr. 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

JS

Loba komponén urang merlukeun pamakéan JavaScript pikeun fungsi. Husus, aranjeunna merlukeun jQuery , Popper.js , sarta plugins JavaScript urang sorangan. Teundeun <script>s handap deukeut tungtung kaca anjeun, katuhu saméméh </body>tag nutup, pikeun ngaktipkeun aranjeunna. jQuery kedah sumping heula, teras Popper.js, teras plugins JavaScript urang.

Urang make jQuery urang langsing ngawangun , tapi versi pinuh ogé dirojong.

<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-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

Urang bootstrap.bundle.jsjeung bootstrap.bundle.min.jskaasup Popper , tapi teu jQuery . Kanggo inpo nu langkung lengkep ihwal naon anu kalebet dina Bootstrap, mangga tingali bagian eusi kami .

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 jeung positioning (ogé merlukeun Popper.js )
  • Modél pikeun mintonkeun, posisi, jeung kabiasaan ngagulung
  • Navbar pikeun ngalegaan plugin Collapse kami pikeun nerapkeun paripolah responsif
  • Tooltips jeung popovers pikeun mintonkeun jeung positioning (ogé merlukeun Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Éta sadayana anu anjeun peryogikeun pikeun sarat halaman sadayana. Nganjang ka Dokumén Tata Letak atanapi conto resmi kami pikeun ngamimitian netepkeun 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, shrink-to-fit=no">

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.

  • Tuturkeun @getbootstrap on Twitter .
  • Baca jeung ngalanggan The Resmi Bootstrap Blog .
  • Ngobrol jeung sasama Bootstrappers di IRC. Dina irc.freenode.netserver, dina ##bootstrapsaluran.
  • Pitulung palaksanaan tiasa dipendakan di Stack Overflow (tagged bootstrap-4).
  • 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 kapendak maksimal.

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