pengantar

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

Di halaman ini

Mulai cepat

Ingin menambahkan Bootstrap dengan cepat ke proyek Anda? Gunakan jsDelivr, CDN open source gratis. 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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

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

Bundel

Sertakan setiap plugin dan ketergantungan JavaScript Bootstrap dengan salah satu dari dua bundel kami. Keduanya bootstrap.bundle.jsdan bootstrap.bundle.min.jssertakan Popper untuk tooltips dan popover kami. Untuk informasi lebih lanjut tentang apa yang termasuk dalam Bootstrap, silakan lihat bagian konten kami .

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

Memisahkan

Jika Anda memutuskan untuk menggunakan solusi skrip terpisah, Popper harus didahulukan (jika Anda menggunakan tooltips atau popover), lalu plugin JavaScript kami.

<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

Jika Anda menggunakan <script type="module">, silakan lihat menggunakan Bootstrap kami sebagai bagian modul.

Komponen

Penasaran komponen mana yang secara eksplisit membutuhkan JavaScript dan Popper kami? Klik tautan tampilkan komponen di bawah ini. Jika Anda sama sekali tidak yakin tentang struktur halaman umum, teruslah membaca untuk contoh halaman template.

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 )
Modal untuk menampilkan, memposisikan, dan perilaku gulir
Navbar untuk memperluas plugin Ciutkan kami untuk menerapkan perilaku responsif
Offcanvases untuk menampilkan, memposisikan, dan perilaku gulir
Bersulang untuk ditampilkan dan ditutup
Tooltips dan popovers untuk menampilkan dan memposisikan (juga membutuhkan Popper )
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">

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

Untuk langkah selanjutnya, 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">

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

Baca dan berlangganan Blog Bootstrap Resmi .
Ngobrol dengan sesama Bootstrappers di IRC. Di irc.libera.chatserver, di #bootstrapsaluran.
Bantuan implementasi dapat ditemukan di Stack Overflow (tagged bootstrap-5).
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.