in English

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, 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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Banyak komponen kami memerlukan penggunaan JavaScript untuk berfungsi. Secara khusus, mereka membutuhkan jQuery , Popper , dan plugin JavaScript kami sendiri. Kami menggunakan build ramping jQuery , tetapi versi lengkapnya juga didukung.

Tempatkan salah satu dari s berikut <script>di dekat akhir halaman Anda, tepat sebelum </body>tag penutup, untuk mengaktifkannya. jQuery harus didahulukan, lalu Popper, dan kemudian plugin JavaScript kami.

Bundel

Sertakan setiap plugin JavaScript Bootstrap dengan salah satu dari dua bundel kami. Keduanya bootstrap.bundle.jsdan bootstrap.bundle.min.jssertakan Popper untuk tooltips dan popover kami, tetapi bukan jQuery . Sertakan jQuery terlebih dahulu, lalu bundel JavaScript Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponen

Penasaran komponen mana yang secara eksplisit membutuhkan jQuery, JavaScript kami, dan Popper? Klik tautan tampilkan komponen di bawah ini. Jika Anda tidak yakin tentang struktur halaman, 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
Scrollspy untuk perilaku gulir dan pembaruan navigasi
Tooltips dan popovers untuk menampilkan dan memposisikan (juga membutuhkan Popper )

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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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.

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

CSP dan SVG tersemat

Beberapa komponen Bootstrap menyertakan SVG yang disematkan di CSS kami untuk menata komponen secara konsisten dan mudah di seluruh browser dan perangkat. Untuk organisasi dengan konfigurasi CSP yang lebih ketat , kami telah mendokumentasikan semua contoh SVG tersemat kami (semuanya diterapkan melalui background-image) sehingga Anda dapat meninjau opsi Anda secara lebih menyeluruh.

Tombol tutup (digunakan dalam peringatan dan modal)
Kotak centang khusus dan tombol radio
Sakelar formulir
Ikon validasi formulir
Menu pilihan khusus
Kontrol korsel
Tombol sakelar Navbar

Berdasarkan percakapan komunitas , beberapa opsi untuk mengatasi hal ini di basis kode Anda sendiri termasuk mengganti URL dengan aset yang dihosting secara lokal, menghapus gambar dan menggunakan gambar sebaris (tidak mungkin di semua komponen), dan memodifikasi CSP Anda. Rekomendasi kami adalah meninjau dengan cermat kebijakan keamanan Anda sendiri dan memutuskan jalur terbaik ke depan, jika perlu.