Komponen
Lebih dari selusin komponen yang dapat digunakan kembali dibangun untuk menyediakan ikonografi, dropdown, grup input, navigasi, peringatan, dan banyak lagi.
Lebih dari selusin komponen yang dapat digunakan kembali dibangun untuk menyediakan ikonografi, dropdown, grup input, navigasi, peringatan, dan banyak lagi.
Termasuk lebih dari 250 mesin terbang dalam format font dari set Glyphicon Halflings. Glyphicons Halflings biasanya tidak tersedia secara gratis, tetapi pembuatnya telah menyediakannya untuk Bootstrap secara gratis. Sebagai ucapan terima kasih, kami hanya meminta Anda menyertakan tautan kembali ke Glyphicons bila memungkinkan.
Untuk alasan kinerja, semua ikon memerlukan kelas dasar dan kelas ikon individu. Untuk menggunakannya, letakkan kode berikut di mana saja. Pastikan untuk meninggalkan spasi antara ikon dan teks untuk padding yang tepat.
Kelas ikon tidak dapat langsung digabungkan dengan komponen lain. Mereka tidak boleh digunakan bersama dengan kelas lain pada elemen yang sama. Sebagai gantinya, tambahkan kelas bersarang <span>
dan terapkan ikon ke file <span>
.
Kelas ikon hanya boleh digunakan pada elemen yang tidak berisi konten teks dan tidak memiliki elemen turunan.
Bootstrap mengasumsikan file font ikon akan ditempatkan di ../fonts/
direktori, relatif terhadap file CSS yang dikompilasi. Memindahkan atau mengganti nama file font tersebut berarti memperbarui CSS dengan salah satu dari tiga cara berikut:
@icon-font-path
dan/atau @icon-font-name
variabel di sumber Lebih sedikit file.url()
jalur di CSS yang dikompilasi.Gunakan opsi apa pun yang paling sesuai dengan pengaturan pengembangan spesifik Anda.
Versi modern dari teknologi bantu akan mengumumkan konten yang dihasilkan CSS, serta karakter Unicode tertentu. Untuk menghindari keluaran yang tidak diinginkan dan membingungkan di pembaca layar (terutama ketika ikon digunakan murni untuk dekorasi), kami menyembunyikannya dengan aria-hidden="true"
atribut.
Jika Anda menggunakan ikon untuk menyampaikan makna (bukan hanya sebagai elemen dekoratif), pastikan bahwa makna ini juga disampaikan ke teknologi bantu – misalnya, sertakan konten tambahan, yang disembunyikan secara visual dengan .sr-only
kelas.
Jika Anda membuat kontrol tanpa teks lain (seperti <button>
yang hanya berisi ikon), Anda harus selalu menyediakan konten alternatif untuk mengidentifikasi tujuan kontrol, sehingga masuk akal bagi pengguna teknologi pendukung. Dalam hal ini, Anda dapat menambahkan aria-label
atribut pada kontrol itu sendiri.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Gunakan mereka di tombol, grup tombol untuk bilah alat, navigasi, atau input formulir yang ditambahkan sebelumnya.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Ikon yang digunakan dalam peringatan untuk menyampaikan bahwa itu adalah pesan kesalahan, dengan .sr-only
teks tambahan untuk menyampaikan petunjuk ini kepada pengguna teknologi pendukung.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Menu kontekstual yang dapat dialihkan untuk menampilkan daftar tautan. Dibuat interaktif dengan plugin JavaScript dropdown .
Bungkus pemicu tarik-turun dan menu tarik-turun di dalam .dropdown
, atau elemen lain yang menyatakan position: relative;
. Kemudian tambahkan HTML menu.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Menu dropdown dapat diubah untuk memperluas ke atas (bukan ke bawah) dengan menambahkan .dropup
ke induknya.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Secara default, menu dropdown secara otomatis diposisikan 100% dari atas dan di sepanjang sisi kiri induknya. Tambahkan .dropdown-menu-right
ke a .dropdown-menu
untuk meratakan kanan menu tarik-turun.
Dropdown secara otomatis diposisikan melalui CSS dalam aliran normal dokumen. Ini berarti dropdown dapat dipotong oleh orang tua dengan overflow
properti tertentu atau muncul di luar batas viewport. Atasi masalah ini sendiri saat muncul.
.pull-right
lagiMulai v3.1.0, kami tidak lagi .pull-right
menggunakan menu tarik-turun. Untuk meratakan kanan menu, gunakan .dropdown-menu-right
. Komponen nav rata kanan di navbar menggunakan versi mixin dari kelas ini untuk menyelaraskan menu secara otomatis. Untuk menimpanya, gunakan .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Tambahkan tajuk untuk memberi label pada bagian tindakan di menu tarik-turun mana pun.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Tambahkan pembagi untuk memisahkan rangkaian tautan di menu tarik-turun.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Tambahkan .disabled
ke a <li>
di tarik-turun untuk menonaktifkan tautan.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Kelompokkan serangkaian tombol bersama-sama pada satu baris dengan grup tombol. Tambahkan radio JavaScript opsional dan perilaku gaya kotak centang dengan plugin tombol kami .
Saat menggunakan tooltips atau popover pada elemen dalam a .btn-group
, Anda harus menentukan opsi container: 'body'
untuk menghindari efek samping yang tidak diinginkan (seperti elemen tumbuh lebih lebar dan/atau kehilangan sudut membulatnya saat tooltip atau popover dipicu).
role
dan berikan labelAgar teknologi bantu – seperti pembaca layar – untuk menyampaikan bahwa serangkaian tombol dikelompokkan, role
atribut yang sesuai perlu disediakan. Untuk grup tombol, ini akan menjadi role="group"
, sedangkan bilah alat harus memiliki ekstensi role="toolbar"
.
Satu pengecualian adalah grup yang hanya berisi satu kontrol (misalnya grup tombol yang dibenarkan dengan <button>
elemen) atau dropdown.
Selain itu, grup dan toolbar harus diberi label eksplisit, karena sebagian besar teknologi bantu tidak akan mengumumkannya, meskipun ada role
atribut yang benar. Dalam contoh yang diberikan di sini, kami menggunakan aria-label
, tetapi alternatif seperti aria-labelledby
juga dapat digunakan.
Bungkus serangkaian tombol .btn
dengan .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Menggabungkan set <div class="btn-group">
menjadi <div class="btn-toolbar">
untuk komponen yang lebih kompleks.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Alih-alih menerapkan kelas ukuran tombol ke setiap tombol dalam grup, tambahkan saja .btn-group-*
ke masing-masing .btn-group
, termasuk saat menyusun beberapa grup.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Tempatkan a .btn-group
di dalam yang lain .btn-group
ketika Anda ingin menu dropdown dicampur dengan serangkaian tombol.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Buat sekumpulan tombol tampak bertumpuk secara vertikal, bukan horizontal. Dropdown tombol split tidak didukung di sini.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Buat sekelompok tombol meregang pada ukuran yang sama untuk menjangkau seluruh lebar induknya. Juga berfungsi dengan dropdown tombol di dalam grup tombol.
Karena HTML dan CSS khusus yang digunakan untuk membenarkan tombol (yaitu display: table-cell
), batas di antara keduanya menjadi dua kali lipat. Dalam grup tombol biasa, margin-left: -1px
digunakan untuk menumpuk batas alih-alih menghapusnya. Namun, margin
tidak bekerja dengan display: table-cell
. Akibatnya, tergantung pada penyesuaian Anda pada Bootstrap, Anda mungkin ingin menghapus atau mewarnai ulang batas.
Internet Explorer 8 tidak membuat batas pada tombol dalam grup tombol yang dibenarkan, apakah itu aktif <a>
atau <button>
elemen. Untuk menyiasatinya, bungkus setiap tombol dengan .btn-group
.
Lihat #12476 untuk informasi lebih lanjut.
<a>
elemenCukup bungkus serangkaian .btn
s di .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Jika <a>
elemen digunakan untuk bertindak sebagai tombol – memicu fungsionalitas dalam halaman, daripada menavigasi ke dokumen atau bagian lain dalam halaman saat ini – elemen tersebut juga harus diberi role="button"
.
<button>
elemenUntuk menggunakan grup tombol yang dibenarkan dengan <button>
elemen, Anda harus membungkus setiap tombol dalam grup tombol . Sebagian besar browser tidak menerapkan CSS kami dengan benar untuk pembenaran <button>
elemen, tetapi karena kami mendukung dropdown tombol, kami dapat mengatasinya.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Gunakan tombol apa saja untuk memicu menu tarik-turun dengan menempatkannya di dalam a .btn-group
dan memberikan markup menu yang tepat.
Dropdown tombol memerlukan plugin dropdown untuk disertakan dalam versi Bootstrap Anda.
Ubah tombol menjadi sakelar tarik-turun dengan beberapa perubahan markup dasar.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Demikian pula, buat dropdown tombol terpisah dengan perubahan markup yang sama, hanya dengan tombol terpisah.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Dropdown tombol berfungsi dengan tombol dari semua ukuran.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Picu menu tarik-turun di atas elemen dengan menambahkan .dropup
ke induknya.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Perluas kontrol formulir dengan menambahkan teks atau tombol sebelum, sesudah, atau di kedua sisi file <input>
. Gunakan .input-group
dengan .input-group-addon
atau .input-group-btn
untuk menambahkan atau menambahkan elemen ke satu .form-control
.
<input>
s sajaHindari menggunakan <select>
elemen di sini karena tidak dapat ditata sepenuhnya di browser WebKit.
Hindari menggunakan <textarea>
elemen di sini karena rows
atributnya tidak akan dihormati dalam beberapa kasus.
Saat menggunakan tooltips atau popover pada elemen dalam .input-group
, Anda harus menentukan opsi container: 'body'
untuk menghindari efek samping yang tidak diinginkan (seperti elemen tumbuh lebih lebar dan/atau kehilangan sudut membulatnya saat tooltip atau popover dipicu).
Jangan mencampur grup formulir atau kelas kolom kisi secara langsung dengan grup input. Sebagai gantinya, susun grup input di dalam grup formulir atau elemen terkait kisi.
Pembaca layar akan mengalami masalah dengan formulir Anda jika Anda tidak menyertakan label untuk setiap masukan. Untuk grup input ini, pastikan bahwa setiap label atau fungsi tambahan disampaikan ke teknologi bantu.
Teknik yang tepat untuk digunakan (elemen yang terlihat <label>
, <label>
elemen yang disembunyikan menggunakan .sr-only
kelas, atau penggunaan aria-label
, aria-labelledby
, aria-describedby
, title
atau placeholder
atribut) dan informasi tambahan apa yang perlu disampaikan akan bervariasi tergantung pada jenis widget antarmuka yang tepat yang Anda terapkan. Contoh-contoh di bagian ini memberikan beberapa pendekatan khusus kasus yang disarankan.
Tempatkan satu add-on atau tombol di kedua sisi input. Anda juga dapat menempatkan satu di kedua sisi input.
Kami tidak mendukung beberapa add-on ( .input-group-addon
atau .input-group-btn
) di satu sisi.
Kami tidak mendukung beberapa kontrol formulir dalam satu grup input.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Tambahkan kelas ukuran formulir relatif ke .input-group
dirinya sendiri dan konten di dalamnya akan secara otomatis diubah ukurannya—tidak perlu mengulang kelas ukuran kontrol formulir pada setiap elemen.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Tempatkan kotak centang atau opsi radio apa pun di dalam addon grup input alih-alih teks.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Tombol dalam grup input sedikit berbeda dan memerlukan satu level tambahan untuk bersarang. Alih-alih .input-group-addon
, Anda harus menggunakan .input-group-btn
untuk membungkus tombol. Ini diperlukan karena gaya browser default yang tidak dapat diganti.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Meskipun Anda hanya dapat memiliki satu add-on per sisi, Anda dapat memiliki beberapa tombol di dalam satu .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Nav yang tersedia di Bootstrap memiliki markup bersama, dimulai dengan .nav
kelas dasar, serta status bersama. Tukar kelas pengubah untuk beralih di antara setiap gaya.
Perhatikan .nav-tabs
kelas membutuhkan kelas .nav
dasar.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Ambil HTML yang sama, tetapi gunakan .nav-pills
sebagai gantinya:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Pil juga dapat ditumpuk secara vertikal. Tambahkan saja .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Mudah membuat tab atau pil dengan lebar yang sama dengan induknya pada layar yang lebih lebar dari 768px dengan .nav-justified
. Pada layar yang lebih kecil, tautan navigasi ditumpuk.
Tautan navigasi navbar yang dibenarkan saat ini tidak didukung.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Untuk komponen navigasi apa pun (tab atau pil), tambahkan tautan abu .disabled
- abu dan tidak ada efek melayang .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Tambahkan menu dropdown dengan sedikit tambahan HTML dan plugin JavaScript dropdown .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navbar adalah komponen meta responsif yang berfungsi sebagai header navigasi untuk aplikasi atau situs Anda. Mereka mulai diciutkan (dan dapat dialihkan) dalam tampilan seluler dan menjadi horizontal saat lebar area pandang yang tersedia bertambah.
Tautan navigasi navbar yang dibenarkan saat ini tidak didukung.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Ganti merek navbar dengan gambar Anda sendiri dengan menukar teks dengan <img>
. Karena .navbar-brand
memiliki padding dan tingginya sendiri, Anda mungkin perlu mengganti beberapa CSS tergantung pada gambar Anda.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Tempatkan konten formulir di dalam .navbar-form
untuk penyelarasan vertikal yang tepat dan perilaku yang diciutkan di area pandang yang sempit. Gunakan opsi perataan untuk memutuskan di mana ia berada dalam konten navbar.
Sebagai pendahuluan, .navbar-form
bagikan sebagian besar kodenya dengan .form-inline
via mixin. Beberapa kontrol formulir, seperti grup input, mungkin memerlukan lebar tetap untuk ditampilkan dengan benar di dalam bilah navigasi.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Tambahkan .navbar-btn
kelas ke <button>
elemen yang tidak berada di a <form>
untuk memusatkannya secara vertikal di bilah navigasi.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Bungkus string teks dalam elemen dengan .navbar-text
, biasanya pada <p>
tag untuk awalan dan warna yang tepat.
<p class="navbar-text">Signed in as Mark Otto</p>
Untuk orang-orang yang menggunakan tautan standar yang tidak ada dalam komponen navigasi navbar biasa, gunakan .navbar-link
kelas untuk menambahkan warna yang tepat untuk opsi navbar default dan terbalik.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Sejajarkan tautan navigasi, formulir, tombol, atau teks, menggunakan kelas utilitas .navbar-left
atau . .navbar-right
Kedua kelas akan menambahkan float CSS ke arah yang ditentukan. Misalnya, untuk menyelaraskan tautan nav, letakkan di tempat terpisah <ul>
dengan kelas utilitas masing-masing yang diterapkan.
Kelas-kelas ini adalah versi campuran dari .pull-left
dan .pull-right
, tetapi mereka dicakup untuk kueri media untuk penanganan komponen navbar yang lebih mudah di seluruh ukuran perangkat.
Tambahkan .navbar-fixed-top
dan sertakan konten navbar .container
atau ke tengah dan pad..container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Tambahkan .navbar-fixed-bottom
dan sertakan konten navbar .container
atau ke tengah dan pad..container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Buat navbar lebar penuh yang menggulir halaman dengan menambahkan .navbar-static-top
dan menyertakan konten navbar .container
atau .container-fluid
ke tengah dan pad.
Berbeda dengan .navbar-fixed-*
kelas, Anda tidak perlu mengubah padding apa pun pada file body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Ubah tampilan navbar dengan menambahkan .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Tunjukkan lokasi halaman saat ini dalam hierarki navigasi.
Pemisah secara otomatis ditambahkan dalam CSS melalui :before
dan content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Berikan tautan pagination untuk situs atau aplikasi Anda dengan komponen pagination multi-halaman, atau alternatif pager yang lebih sederhana .
Pagination sederhana yang terinspirasi oleh Rdio, bagus untuk aplikasi dan hasil pencarian. Blok besar sulit untuk dilewatkan, mudah diskalakan, dan menyediakan area klik yang besar.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Komponen pagination harus dibungkus dalam <nav>
elemen untuk mengidentifikasinya sebagai bagian navigasi untuk pembaca layar dan teknologi bantu lainnya. Selain itu, karena halaman kemungkinan sudah memiliki lebih dari satu bagian navigasi (seperti navigasi utama di header, atau navigasi sidebar), disarankan untuk memberikan deskripsi aria-label
yang <nav>
mencerminkan tujuannya. Misalnya, jika komponen pagination digunakan untuk menavigasi di antara sekumpulan hasil penelusuran, label yang sesuai dapat berupa aria-label="Search results pages"
.
Tautan dapat disesuaikan untuk keadaan yang berbeda. Gunakan .disabled
untuk tautan yang tidak dapat diklik dan .active
untuk menunjukkan halaman saat ini.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Kami menyarankan Anda menukar jangkar aktif atau yang dinonaktifkan untuk <span>
, atau menghilangkan jangkar dalam kasus panah sebelumnya/berikutnya, untuk menghapus fungsionalitas klik sambil mempertahankan gaya yang diinginkan.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Ingin pagination yang lebih besar atau lebih kecil? Tambahkan .pagination-lg
atau .pagination-sm
untuk ukuran tambahan.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Tautan cepat sebelumnya dan berikutnya untuk implementasi pagination sederhana dengan markup dan gaya ringan. Ini bagus untuk situs sederhana seperti blog atau majalah.
Secara default, tautan pusat pager.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Atau, Anda dapat menyelaraskan setiap tautan ke samping:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Tautan pager juga menggunakan .disabled
kelas utilitas umum dari pagination.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Tambahkan salah satu kelas pengubah yang disebutkan di bawah ini untuk mengubah tampilan label.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Masalah rendering dapat muncul ketika Anda memiliki lusinan label sebaris dalam wadah sempit, masing-masing berisi inline-block
elemennya sendiri (seperti ikon). Cara di sekitar ini adalah pengaturan display: inline-block;
. Untuk konteks dan contoh, lihat #13219 .
Soroti item baru atau yang belum dibaca dengan mudah dengan menambahkan a <span class="badge">
ke tautan, navigasi Bootstrap, dan banyak lagi.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Ketika tidak ada item baru atau belum dibaca, lencana akan ditutup begitu saja (melalui :empty
pemilih CSS) asalkan tidak ada konten di dalamnya.
Lencana tidak akan runtuh sendiri di Internet Explorer 8 karena tidak memiliki dukungan untuk :empty
pemilih.
Gaya bawaan disertakan untuk menempatkan lencana dalam status aktif dalam navigasi pil.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Komponen ringan dan fleksibel yang secara opsional dapat memperluas seluruh area pandang untuk menampilkan konten utama di situs Anda.
Ini adalah unit pahlawan sederhana, komponen gaya jumbotron sederhana untuk meminta perhatian ekstra pada konten atau informasi unggulan.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Untuk membuat jumbotron lebar penuh, dan tanpa sudut membulat, letakkan di luar semua .container
s dan tambahkan .container
di dalam.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Sebuah shell sederhana untuk h1
ruang yang tepat dan segmen bagian konten pada halaman. Itu dapat memanfaatkan elemen h1
default ' small
, serta sebagian besar komponen lainnya (dengan gaya tambahan).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Perluas sistem grid Bootstrap dengan komponen thumbnail untuk menampilkan grid gambar, video, teks, dan lainnya dengan mudah.
Jika Anda mencari presentasi thumbnail seperti Pinterest dengan berbagai ketinggian dan/atau lebar, Anda harus menggunakan plugin pihak ketiga seperti Masonry , Isotop , atau Salvattore .
Secara default, thumbnail Bootstrap dirancang untuk menampilkan gambar tertaut dengan markup minimal yang diperlukan.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Dengan sedikit markup tambahan, Anda dapat menambahkan segala jenis konten HTML seperti heading, paragraf, atau tombol ke dalam thumbnail.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Berikan pesan umpan balik kontekstual untuk tindakan pengguna biasa dengan beberapa pesan peringatan yang tersedia dan fleksibel.
Bungkus teks apa pun dan tombol tutup opsional ke dalam .alert
dan salah satu dari empat kelas kontekstual (misalnya, .alert-success
) untuk pesan peringatan dasar.
Lansiran tidak memiliki kelas default, hanya kelas dasar dan pengubah. Peringatan abu-abu default tidak terlalu masuk akal, jadi Anda harus menentukan jenis melalui kelas kontekstual. Pilih dari kesuksesan, info, peringatan, atau bahaya.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Bangun peringatan apa pun dengan menambahkan tombol opsional .alert-dismissible
dan tutup.
Untuk berfungsi penuh, lansiran yang dapat ditutup, Anda harus menggunakan plugin JavaScript lansiran .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Pastikan untuk menggunakan <button>
elemen dengan data-dismiss="alert"
atribut data.
Gunakan .alert-link
kelas utilitas untuk menyediakan tautan berwarna yang cocok dengan cepat dalam peringatan apa pun.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Berikan umpan balik terkini tentang kemajuan alur kerja atau tindakan dengan bilah kemajuan yang sederhana namun fleksibel.
Bilah kemajuan menggunakan transisi dan animasi CSS3 untuk mencapai beberapa efeknya. Fitur-fitur ini tidak didukung di Internet Explorer 9 dan di bawah atau versi Firefox yang lebih lama. Opera 12 tidak mendukung animasi.
Jika situs web Anda memiliki Kebijakan Keamanan Konten (CSP) yang tidak mengizinkan style-src 'unsafe-inline'
, maka Anda tidak akan dapat menggunakan style
atribut sebaris untuk menyetel lebar bilah kemajuan seperti yang ditunjukkan pada contoh kami di bawah ini. Metode alternatif untuk menyetel lebar yang kompatibel dengan CSP ketat termasuk menggunakan sedikit JavaScript khusus (yang menyetel element.style.width
) atau menggunakan kelas CSS khusus.
Bilah kemajuan default.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Hapus kelas <span>
dengan .sr-only
dari dalam bilah kemajuan untuk menampilkan persentase yang terlihat.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Untuk memastikan bahwa teks label tetap terbaca bahkan untuk persentase rendah, pertimbangkan untuk menambahkan a min-width
ke bilah kemajuan.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Bilah kemajuan menggunakan beberapa tombol dan kelas peringatan yang sama untuk gaya yang konsisten.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Menggunakan gradien untuk membuat efek bergaris. Tidak tersedia di IE9 dan di bawahnya.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Add .active
to .progress-bar-striped
untuk menganimasikan garis-garis dari kanan ke kiri. Tidak tersedia di IE9 dan di bawahnya.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Tempatkan beberapa batang ke dalam yang sama .progress
untuk menumpuknya.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Gaya objek abstrak untuk membangun berbagai jenis komponen (seperti komentar blog, Tweet, dll) yang menampilkan gambar rata kiri atau kanan di samping konten tekstual.
Media default menampilkan objek media (gambar, video, audio) ke kiri atau kanan blok konten.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Kelas .pull-left
dan .pull-right
juga ada dan sebelumnya digunakan sebagai bagian dari komponen media, tetapi tidak digunakan lagi untuk penggunaan itu pada v3.3.0. Mereka kira-kira setara dengan .media-left
dan .media-right
, kecuali yang .media-right
harus ditempatkan setelah .media-body
di html.
Gambar atau media lain dapat disejajarkan atas, tengah, atau bawah. Defaultnya adalah rata atas.
Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin commodo. Cras purus odio, vestibulum di vulputate di, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis di faucibus.
Selesaikan odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin commodo. Cras purus odio, vestibulum di vulputate di, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis di faucibus.
Selesaikan odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin commodo. Cras purus odio, vestibulum di vulputate di, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis di faucibus.
Selesaikan odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
Dengan sedikit markup tambahan, Anda dapat menggunakan media di dalam daftar (berguna untuk utas komentar atau daftar artikel).
Cras sit amet nibh libero, di gravida nulla. Nulla vel metus scelerisque ante solicitudin commodo. Cras purus odio, vestibulum di vulputate di, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Grup daftar adalah komponen yang fleksibel dan kuat untuk menampilkan tidak hanya daftar elemen yang sederhana, tetapi juga yang kompleks dengan konten khusus.
Grup daftar paling dasar hanyalah daftar tidak berurutan dengan item daftar, dan kelas yang tepat. Bangun di atasnya dengan opsi yang mengikuti, atau CSS Anda sendiri sesuai kebutuhan.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Tambahkan komponen lencana ke item grup daftar apa pun dan secara otomatis akan diposisikan di sebelah kanan.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Tautkan item grup daftar dengan menggunakan tag jangkar alih-alih item daftar (itu juga berarti induk <div>
, bukan <ul>
). Tidak perlu orang tua individu di sekitar setiap elemen.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Item grup daftar mungkin berupa tombol alih-alih item daftar (itu juga berarti induk <div>
, bukan <ul>
). Tidak perlu orang tua individu di sekitar setiap elemen. Jangan gunakan .btn
kelas standar di sini.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Tambahkan .disabled
ke a .list-group-item
untuk membuatnya abu-abu agar tampak dinonaktifkan.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Gunakan kelas kontekstual untuk menata item daftar, default atau tertaut. Juga termasuk .active
negara.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Tambahkan hampir semua HTML di dalamnya, bahkan untuk grup daftar tertaut seperti di bawah ini.
Donec id elit non mi porta gravida di eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida di eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida di eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Meskipun tidak selalu diperlukan, terkadang Anda perlu memasukkan DOM ke dalam kotak. Untuk situasi tersebut, coba komponen panel.
Secara default, semua yang .panel
dilakukan adalah menerapkan beberapa batas dan bantalan dasar untuk memuat beberapa konten.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Tambahkan wadah heading dengan mudah ke panel Anda dengan .panel-heading
. Anda juga dapat menyertakan apa saja <h1>
- <h6>
dengan .panel-title
kelas untuk menambahkan heading yang telah ditata sebelumnya. Namun, ukuran font <h1>
- <h6>
ditimpa oleh .panel-heading
.
Untuk pewarnaan tautan yang tepat, pastikan untuk menempatkan tautan dalam heading di dalam .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Bungkus tombol atau teks sekunder dalam .panel-footer
. Perhatikan bahwa footer panel tidak mewarisi warna dan batas saat menggunakan variasi kontekstual karena tidak dimaksudkan untuk berada di latar depan.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Seperti komponen lainnya, buat panel lebih bermakna untuk konteks tertentu dengan mudah dengan menambahkan kelas status kontekstual mana pun.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Tambahkan apa pun yang tidak dibatasi .table
di dalam panel untuk desain yang mulus. Jika ada .panel-body
, kami menambahkan batas tambahan ke bagian atas tabel untuk pemisahan.
Beberapa konten panel default di sini. Nulla vitae elit libero, seorang pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Nama depan | Nama keluarga | Nama belakang |
---|---|---|---|
1 | Tanda | Otto | @mdo |
2 | Yakub | Thornton | @gemuk |
3 | Larry | burung | @Indonesia |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Jika tidak ada badan panel, komponen berpindah dari header panel ke tabel tanpa gangguan.
# | Nama depan | Nama keluarga | Nama belakang |
---|---|---|---|
1 | Tanda | Otto | @mdo |
2 | Yakub | Thornton | @gemuk |
3 | Larry | burung | @Indonesia |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Mudah menyertakan grup daftar lebar penuh dalam panel mana pun.
Beberapa konten panel default di sini. Nulla vitae elit libero, seorang pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Izinkan browser untuk menentukan dimensi video atau tayangan slide berdasarkan lebar blok yang memuatnya dengan membuat rasio intrinsik yang akan diskalakan dengan benar di perangkat apa pun.
Aturan langsung diterapkan ke <iframe>
, <embed>
, <video>
, dan <object>
elemen; secara opsional gunakan kelas turunan eksplisit .embed-responsive-item
saat Anda ingin mencocokkan gaya untuk atribut lain.
Tips Pro! Anda tidak perlu memasukkan s frameborder="0"
Anda <iframe>
karena kami menimpanya untuk Anda.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Gunakan sumur sebagai efek sederhana pada elemen untuk memberikan efek sisipan.
<div class="well">...</div>
Kontrol bantalan dan sudut membulat dengan dua kelas pengubah opsional.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>