Source

pengantar

Mulailah dengan Bootstrap, kerangka kerja paling populer di dunia untuk membangun situs responsif seluler, dengan jsDelivr dan halaman awal template.

Mulai cepat

Ingin menambahkan Bootstrap dengan cepat ke proyek Anda? Gunakan jsDelivr, disediakan secara gratis oleh orang-orang di jsDelivr. Menggunakan manajer paket atau perlu mengunduh file sumber? Buka halaman unduhan.

CSS

Copy-paste stylesheet <link>ke <head>sebelum semua stylesheet lainnya untuk memuat 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

Banyak komponen kami memerlukan penggunaan JavaScript untuk berfungsi. Secara khusus, mereka membutuhkan jQuery , Popper.js , dan plugin JavaScript kami sendiri. Tempatkan s berikut <script>di dekat akhir halaman Anda, tepat sebelum </body>tag penutup, untuk mengaktifkannya. jQuery harus didahulukan, lalu Popper.js, dan kemudian plugin JavaScript kami.

Kami menggunakan build ramping jQuery , tetapi versi lengkapnya juga didukung.

<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 mana yang secara eksplisit membutuhkan jQuery, JS kami, dan Popper.js? Klik tautan tampilkan komponen di bawah ini. Jika Anda sama sekali tidak yakin tentang struktur halaman umum, teruslah membaca untuk contoh halaman template.

Kami bootstrap.bundle.jsdan bootstrap.bundle.min.jssertakan Popper , tetapi bukan jQuery . Untuk informasi lebih lanjut tentang apa yang termasuk dalam Bootstrap, silakan lihat bagian konten kami .

Tampilkan komponen yang membutuhkan JavaScript
  • Peringatan untuk diberhentikan
  • Tombol untuk beralih status dan fungsi kotak centang/radio
  • Korsel untuk semua perilaku, kontrol, dan indikator slide
  • Ciutkan untuk mengaktifkan visibilitas konten
  • Dropdown untuk menampilkan dan memposisikan (juga membutuhkan Popper.js )
  • Modal untuk menampilkan, memposisikan, dan perilaku gulir
  • Navbar untuk memperluas plugin Ciutkan kami untuk menerapkan perilaku responsif
  • Tooltips dan popovers untuk menampilkan dan memposisikan (juga membutuhkan Popper.js )
  • Scrollspy untuk perilaku gulir dan pembaruan navigasi

Template pemula

Pastikan halaman Anda diatur dengan standar desain dan pengembangan terbaru. Itu berarti menggunakan doctype HTML5 dan menyertakan tag meta viewport untuk perilaku responsif yang tepat. Gabungkan semuanya dan halaman Anda akan terlihat seperti ini:

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

Itu saja yang Anda butuhkan untuk persyaratan halaman secara keseluruhan. Kunjungi dokumen Tata Letak atau contoh resmi kami untuk mulai menyusun konten dan komponen situs Anda.

Global penting

Bootstrap menggunakan beberapa gaya dan pengaturan global penting yang harus Anda ketahui saat menggunakannya, yang semuanya hampir secara eksklusif diarahkan untuk normalisasi gaya lintas browser. Mari selami.

Doctype HTML5

Bootstrap membutuhkan penggunaan doctype HTML5. Tanpa itu, Anda akan melihat beberapa gaya yang tidak lengkap yang funky, tetapi memasukkannya tidak akan menyebabkan cegukan yang berarti.

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

Tag meta responsif

Bootstrap dikembangkan terlebih dahulu untuk seluler , sebuah strategi di mana kami mengoptimalkan kode untuk perangkat seluler terlebih dahulu dan kemudian meningkatkan komponen seperlunya menggunakan kueri media CSS. Untuk memastikan rendering yang tepat dan zoom sentuh untuk semua perangkat, tambahkan tag meta area pandang responsif ke file <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Anda dapat melihat contoh tindakan ini di template starter .

Ukuran kotak

Untuk ukuran yang lebih mudah dalam CSS, kami mengganti nilai global box-sizingdari content-boxke border-box. Ini memastikan paddingtidak mempengaruhi lebar akhir yang dihitung dari suatu elemen, tetapi dapat menyebabkan masalah dengan beberapa perangkat lunak pihak ketiga seperti Google Maps dan Google Custom Search Engine.

Pada kesempatan langka Anda perlu menimpanya, gunakan sesuatu seperti berikut ini:

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

Dengan cuplikan di atas, elemen bersarang—termasuk konten yang dihasilkan melalui ::beforedan ::after—semuanya akan mewarisi yang ditentukan box-sizinguntuk itu .selector-for-some-widget.

Pelajari lebih lanjut tentang model dan ukuran kotak di Trik CSS .

Menyalakan ulang

Untuk rendering lintas-browser yang lebih baik, kami menggunakan Reboot untuk memperbaiki ketidakkonsistenan di seluruh browser dan perangkat sambil memberikan pengaturan ulang yang sedikit lebih sesuai untuk elemen HTML umum.

Masyarakat

Tetap up to date pada pengembangan Bootstrap dan menjangkau komunitas dengan sumber daya yang bermanfaat ini.

  • Ikuti @getbootstrap di Twitter .
  • Baca dan berlangganan Blog Bootstrap Resmi .
  • Ngobrol dengan sesama Bootstrappers di IRC. Di irc.freenode.netserver, di ##bootstrapsaluran.
  • Bantuan implementasi dapat ditemukan di Stack Overflow (tagged bootstrap-4).
  • Pengembang harus menggunakan kata kunci bootstrappada paket yang memodifikasi atau menambah fungsionalitas Bootstrap saat mendistribusikan melalui npm atau mekanisme pengiriman serupa untuk dapat ditemukan secara maksimal.

Anda juga dapat mengikuti @getbootstrap di Twitter untuk gosip terbaru dan video musik keren.