Memulai dengan Bootstrap

Bootstrap adalah toolkit frontend yang kuat dan penuh fitur. Bangun apa pun—dari prototipe hingga produksi—dalam hitungan menit.

Di halaman ini

Mulai cepat

Mulailah dengan menyertakan CSS dan JavaScript siap-produksi Bootstrap melalui CDN tanpa perlu langkah pembuatan apa pun. Lihat praktiknya dengan demo Bootstrap CodePen ini .

Buat index.htmlfile baru di root proyek Anda. Sertakan juga <meta name="viewport">tag untuk perilaku responsif yang tepat di perangkat seluler.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Sertakan CSS dan JS Bootstrap. Tempatkan <link>tag di <head>untuk CSS kami, dan <script>tag untuk bundel JavaScript kami (termasuk Popper untuk dropdown posisi, popper, dan tooltips) sebelum penutupan </body>. Pelajari lebih lanjut tentang tautan CDN kami .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Anda juga dapat memasukkan Popper dan JS kami secara terpisah. Jika Anda tidak berencana menggunakan dropdown, popover, atau tooltips, hemat beberapa kilobyte dengan tidak menyertakan Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Halo Dunia! Buka halaman di browser pilihan Anda untuk melihat halaman Bootstrap Anda. Sekarang Anda dapat mulai membangun dengan Bootstrap dengan membuat tata letak Anda sendiri , menambahkan lusinan komponen , dan menggunakan contoh resmi kami .

tautan CDN

Sebagai referensi, berikut adalah tautan CDN utama kami.

Keterangan	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Anda juga dapat menggunakan CDN untuk mengambil salah satu build tambahan kami yang terdaftar di halaman Contents .

Langkah selanjutnya

Baca lebih lanjut tentang beberapa pengaturan lingkungan global penting yang digunakan Bootstrap.
Baca tentang apa yang termasuk dalam Bootstrap di bagian konten kami dan daftar komponen yang memerlukan JavaScript di bawah ini.
Perlu sedikit lebih banyak kekuatan? Pertimbangkan untuk membangun dengan Bootstrap dengan menyertakan file sumber melalui manajer paket .
Ingin menggunakan Bootstrap sebagai modul dengan <script type="module">? Silakan lihat kami menggunakan Bootstrap sebagai bagian modul.

komponen JS

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 Collapse dan Offcanvas kami untuk menerapkan perilaku responsif
Nav dengan plugin Tab untuk beralih panel konten
Offcanvases untuk menampilkan, memposisikan, dan perilaku gulir
Scrollspy untuk perilaku gulir dan pembaruan navigasi
Bersulang untuk ditampilkan dan ditutup
Tooltips dan popovers untuk menampilkan dan memposisikan (juga membutuhkan Popper )

Global penting

Bootstrap menggunakan beberapa gaya dan pengaturan global yang penting, 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 funky dan tidak lengkap.

<!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 quick start .

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 .
Tanyakan dan jelajahi Diskusi GitHub kami .
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.