Komponen
Lebih sedozen komponen boleh guna semula dibina untuk menyediakan ikonografi, dropdown, kumpulan input, navigasi, makluman dan banyak lagi.
Lebih sedozen komponen boleh guna semula dibina untuk menyediakan ikonografi, dropdown, kumpulan input, navigasi, makluman dan banyak lagi.
Termasuk lebih 250 glyph dalam format fon daripada set Glyphicon Halflings. Glyphicons Halflings biasanya tidak tersedia secara percuma, tetapi pencipta mereka telah menyediakannya untuk Bootstrap secara percuma. Sebagai ucapan terima kasih, kami hanya meminta anda memasukkan pautan kembali ke Glyphicons apabila boleh.
Atas sebab prestasi, semua ikon memerlukan kelas asas dan kelas ikon individu. Untuk menggunakan, letakkan kod berikut di mana-mana sahaja. Pastikan anda meninggalkan ruang antara ikon dan teks untuk padding yang betul.
Kelas ikon tidak boleh digabungkan secara langsung dengan komponen lain. Mereka tidak boleh digunakan bersama dengan kelas lain pada elemen yang sama. Sebaliknya, tambahkan bersarang <span>
dan gunakan kelas ikon pada <span>
.
Kelas ikon hanya boleh digunakan pada elemen yang tidak mengandungi kandungan teks dan tidak mempunyai elemen anak.
Bootstrap menganggap fail fon ikon akan ditempatkan dalam ../fonts/
direktori, berbanding dengan fail CSS yang disusun. Mengalih atau menamakan semula fail fon tersebut bermakna mengemas kini CSS dalam salah satu daripada tiga cara:
@icon-font-path
dan/atau @icon-font-name
pembolehubah dalam sumber Kurang fail.url()
laluan dalam CSS yang disusun.Gunakan apa sahaja pilihan yang paling sesuai dengan persediaan pembangunan khusus anda.
Versi moden teknologi bantuan akan mengumumkan kandungan yang dijana CSS, serta aksara Unicode tertentu. Untuk mengelakkan output yang tidak diingini dan mengelirukan dalam pembaca skrin (terutamanya apabila ikon digunakan semata-mata untuk hiasan), kami menyembunyikannya dengan aria-hidden="true"
atribut.
Jika anda menggunakan ikon untuk menyampaikan maksud (bukan hanya sebagai elemen hiasan), pastikan makna ini juga disampaikan kepada teknologi bantuan – contohnya, sertakan kandungan tambahan, tersembunyi secara visual dengan .sr-only
kelas.
Jika anda mencipta kawalan tanpa teks lain (seperti <button>
yang hanya mengandungi ikon), anda harus sentiasa menyediakan kandungan alternatif untuk mengenal pasti tujuan kawalan, supaya ia akan masuk akal kepada pengguna teknologi bantuan. Dalam kes ini, anda boleh menambah aria-label
atribut pada kawalan itu sendiri.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Gunakannya dalam butang, kumpulan butang untuk bar alat, navigasi atau input borang yang diprapendi.
<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 makluman untuk menyampaikan bahawa ia adalah mesej ralat, dengan .sr-only
teks tambahan untuk menyampaikan pembayang ini kepada pengguna teknologi bantuan.
<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 boleh togol untuk memaparkan senarai pautan. Dibuat interaktif dengan pemalam JavaScript lungsur turun .
Balut pencetus lungsur turun dan menu lungsur turun dalam .dropdown
, atau elemen lain yang mengisytiharkan 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 lungsur turun boleh ditukar untuk mengembangkan ke atas (bukan ke bawah) dengan menambah .dropup
pada induk.
<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 lalai, menu lungsur turun secara automatik diletakkan 100% dari atas dan di sepanjang sebelah kiri induknya. Tambahkan .dropdown-menu-right
pada .dropdown-menu
jajaran ke kanan menu lungsur turun.
Jatuh turun diletakkan secara automatik melalui CSS dalam aliran biasa dokumen. Ini bermakna lungsur turun mungkin dipangkas oleh ibu bapa dengan overflow
sifat tertentu atau muncul di luar sempadan port pandangan. Selesaikan isu ini sendiri apabila ia timbul.
.pull-right
Penjajaran ditamatkanMulai v3.1.0, kami telah menamatkan .pull-right
menu lungsur turun. Untuk menyelaraskan menu, gunakan .dropdown-menu-right
. Komponen nav sejajar kanan dalam bar navigasi menggunakan versi campuran kelas ini untuk menjajarkan menu secara automatik. Untuk mengatasinya, gunakan .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Tambahkan pengepala untuk melabel bahagian tindakan dalam mana-mana menu lungsur turun.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Tambahkan pembahagi untuk memisahkan siri pautan dalam menu lungsur turun.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Tambahkan .disabled
pada a <li>
dalam menu lungsur untuk melumpuhkan pautan.
<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>
Himpunkan satu siri butang bersama-sama pada satu baris dengan kumpulan butang. Tambahkan pada radio JavaScript pilihan dan gelagat gaya kotak pilihan dengan pemalam butang kami .
Apabila menggunakan petua alat atau popover pada elemen dalam .btn-group
, anda perlu menentukan pilihan container: 'body'
untuk mengelakkan kesan sampingan yang tidak diingini (seperti elemen semakin meluas dan/atau kehilangan sudut bulatnya apabila petua alat atau popover dicetuskan).
role
dan sediakan labelUntuk membolehkan teknologi bantuan - seperti pembaca skrin - menyampaikan bahawa satu siri butang dikumpulkan, role
atribut yang sesuai perlu disediakan. Untuk kumpulan butang, ini ialah role="group"
, manakala bar alat harus mempunyai role="toolbar"
.
Satu pengecualian ialah kumpulan yang hanya mengandungi satu kawalan (contohnya kumpulan butang yang dibenarkan dengan <button>
elemen) atau lungsur turun.
Di samping itu, kumpulan dan bar alat harus diberi label yang jelas, kerana kebanyakan teknologi bantuan sebaliknya tidak akan mengumumkannya, walaupun terdapat role
atribut yang betul. Dalam contoh yang disediakan di sini, kami menggunakan aria-label
, tetapi alternatif seperti aria-labelledby
juga boleh digunakan.
Balut satu siri butang dengan .btn
dalam .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>
Gabungkan set <div class="btn-group">
menjadi a <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>
Daripada menggunakan kelas saiz butang pada setiap butang dalam kumpulan, cuma tambahkan .btn-group-*
pada setiap .btn-group
, termasuk apabila membuat sarang berbilang kumpulan.
<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>
Letakkan a .btn-group
dalam satu lagi .btn-group
apabila anda mahu menu lungsur bercampur dengan satu siri butang.
<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>
Jadikan satu set butang kelihatan disusun secara menegak dan bukannya mendatar. Butang lungsur pisah tidak disokong di sini.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Buat sekumpulan butang meregang pada saiz yang sama untuk merentangi keseluruhan lebar induknya. Juga berfungsi dengan dropdown butang dalam kumpulan butang.
Disebabkan oleh HTML dan CSS khusus yang digunakan untuk mewajarkan butang (iaitu display: table-cell
), sempadan antara mereka digandakan. Dalam kumpulan butang biasa, margin-left: -1px
digunakan untuk menyusun sempadan dan bukannya mengalihkannya. Walau bagaimanapun, margin
tidak berfungsi dengan display: table-cell
. Akibatnya, bergantung pada penyesuaian anda pada Bootstrap, anda mungkin ingin mengalih keluar atau mewarna semula sempadan.
Internet Explorer 8 tidak memberikan sempadan pada butang dalam kumpulan butang yang dibenarkan, sama ada pada <a>
atau <button>
elemen. Untuk mengatasinya, bungkus setiap butang dengan butang lain.btn-group
.
Lihat #12476 untuk maklumat lanjut.
<a>
unsurHanya bungkus satu siri .btn
s dalam .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Jika <a>
elemen digunakan untuk bertindak sebagai butang – mencetuskan kefungsian dalam halaman, dan bukannya menavigasi ke dokumen atau bahagian lain dalam halaman semasa – ia juga harus diberikan role="button"
.
<button>
unsurUntuk menggunakan kumpulan butang yang dibenarkan dengan <button>
elemen, anda mesti membalut setiap butang dalam kumpulan butang . Kebanyakan penyemak imbas tidak menggunakan CSS kami dengan betul untuk justifikasi kepada <button>
elemen, tetapi memandangkan kami menyokong butang lungsur turun, kami boleh 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 mana-mana butang untuk mencetuskan menu lungsur dengan meletakkannya di dalam .btn-group
dan memberikan penanda menu yang betul.
Butang lungsur turun memerlukan pemalam lungsur turun untuk disertakan dalam versi Bootstrap anda.
Tukar butang menjadi togol lungsur turun dengan beberapa perubahan markup asas.
<!-- 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>
Begitu juga, buat dropdown butang split dengan perubahan markup yang sama, hanya dengan butang berasingan.
<!-- 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>
Butang lungsur turun berfungsi dengan butang semua saiz.
<!-- 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>
Cetuskan menu lungsur turun di atas elemen dengan menambah .dropup
pada induk.
<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>
Panjangkan kawalan borang dengan menambahkan teks atau butang sebelum, selepas, atau pada kedua-dua belah mana-mana berasaskan teks <input>
. Gunakan .input-group
dengan .input-group-addon
atau .input-group-btn
untuk menambah atau menambah elemen pada satu .form-control
.
<input>
sahajaElakkan menggunakan <select>
elemen di sini kerana ia tidak boleh digayakan sepenuhnya dalam pelayar WebKit.
Elakkan menggunakan <textarea>
elemen di sini kerana rows
atributnya tidak akan dihormati dalam beberapa kes.
Apabila menggunakan petua alat atau popover pada elemen dalam .input-group
, anda perlu menentukan pilihan container: 'body'
untuk mengelakkan kesan sampingan yang tidak diingini (seperti elemen semakin meluas dan/atau kehilangan sudut bulatnya apabila petua alat atau popover dicetuskan).
Jangan campurkan kumpulan bentuk atau kelas lajur grid secara langsung dengan kumpulan input. Sebaliknya, sarangkan kumpulan input di dalam kumpulan borang atau elemen berkaitan grid.
Pembaca skrin akan menghadapi masalah dengan borang anda jika anda tidak memasukkan label untuk setiap input. Untuk kumpulan input ini, pastikan bahawa sebarang label atau fungsi tambahan disampaikan kepada teknologi bantuan.
Teknik yang tepat untuk digunakan (elemen yang kelihatan <label>
, <label>
elemen yang disembunyikan menggunakan .sr-only
kelas atau penggunaan aria-label
, aria-labelledby
, aria-describedby
, title
atau placeholder
atribut) dan maklumat tambahan yang perlu disampaikan akan berbeza-beza bergantung pada jenis widget antara muka tepat yang anda laksanakan. Contoh dalam bahagian ini menyediakan beberapa cadangan, pendekatan khusus kes.
Letakkan satu alat tambah atau butang pada kedua-dua sisi input. Anda juga boleh meletakkan satu pada kedua-dua belah input.
Kami tidak menyokong berbilang alat tambah ( .input-group-addon
atau .input-group-btn
) pada satu bahagian.
Kami tidak menyokong berbilang kawalan bentuk dalam satu kumpulan 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 saiz bentuk relatif kepada kelas .input-group
itu sendiri dan kandungan di dalamnya akan diubah saiz secara automatik—tidak perlu mengulang kelas saiz kawalan borang 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>
Letakkan sebarang kotak semak atau pilihan radio dalam addon kumpulan input dan bukannya 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 -->
Butang dalam kumpulan input agak berbeza dan memerlukan satu tahap tambahan sarang. Sebaliknya .input-group-addon
, anda perlu menggunakan .input-group-btn
untuk membungkus butang. Ini diperlukan kerana gaya penyemak imbas lalai yang tidak boleh ditindih.
<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>
Walaupun anda hanya boleh mempunyai satu alat tambah pada setiap sisi, anda boleh mempunyai berbilang butang 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 dalam Bootstrap telah berkongsi markup, bermula dengan .nav
kelas asas, serta keadaan kongsi. Tukar kelas pengubah suai untuk bertukar antara setiap gaya.
Perhatikan .nav-tabs
kelas memerlukan kelas .nav
asas.
<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
:
<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 boleh disusun secara menegak. Hanya tambah .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Buat tab atau pil dengan mudah sama lebar dengan induknya pada skrin yang lebih lebar daripada 768px dengan .nav-justified
. Pada skrin yang lebih kecil, pautan nav disusun.
Pautan navigasi bar nav yang dibenarkan pada masa ini tidak disokong.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Untuk mana-mana komponen nav (tab atau pil), tambah .disabled
untuk pautan kelabu dan tiada kesan tuding .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Tambahkan menu lungsur turun dengan sedikit HTML tambahan dan pemalam JavaScript lungsur turun .
<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 ialah komponen meta responsif yang berfungsi sebagai pengepala navigasi untuk aplikasi atau tapak anda. Ia mula runtuh (dan boleh togol) dalam paparan mudah alih dan menjadi mendatar apabila lebar port pandangan yang tersedia meningkat.
Pautan navigasi bar nav yang dibenarkan pada masa ini tidak disokong.
<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>
Gantikan jenama navbar dengan imej anda sendiri dengan menukar teks dengan <img>
. Oleh kerana .navbar-brand
mempunyai pelapik dan ketinggiannya sendiri, anda mungkin perlu mengatasi beberapa CSS bergantung pada imej 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>
Letakkan kandungan borang dalam .navbar-form
untuk penjajaran menegak yang betul dan gelagat runtuh dalam port pandangan sempit. Gunakan pilihan penjajaran untuk memutuskan di mana ia berada dalam kandungan bar navigasi.
Sebagai makluman, .navbar-form
berkongsi banyak kodnya dengan .form-inline
melalui mixin. Sesetengah kawalan borang, seperti kumpulan input, mungkin memerlukan lebar tetap untuk ditunjukkan dengan betul dalam bar 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 kepada <button>
elemen yang tidak berada dalam a <form>
untuk memusatkannya secara menegak dalam bar navigasi.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Balut rentetan teks dalam elemen dengan .navbar-text
, biasanya pada <p>
teg untuk petunjuk dan warna yang betul.
<p class="navbar-text">Signed in as Mark Otto</p>
Bagi orang yang menggunakan pautan standard yang tidak berada dalam komponen navigasi bar navigasi biasa, gunakan .navbar-link
kelas untuk menambah warna yang sesuai untuk pilihan bar navigasi lalai dan songsang.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Jajarkan pautan navigasi, borang, butang atau teks, menggunakan .navbar-left
atau .navbar-right
kelas utiliti. Kedua-dua kelas akan menambah apungan CSS ke arah yang ditentukan. Contohnya, untuk menjajarkan pautan navigasi, letakkannya secara berasingan <ul>
dengan kelas utiliti masing-masing digunakan.
Kelas-kelas ini ialah versi campuran .pull-left
dan .pull-right
, tetapi ia merangkumi pertanyaan media untuk pengendalian komponen navbar yang lebih mudah merentas saiz peranti.
Tambahkan .navbar-fixed-top
dan sertakan kandungan .container
atau .container-fluid
ke tengah dan pad navbar.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Tambahkan .navbar-fixed-bottom
dan sertakan kandungan .container
atau .container-fluid
ke tengah dan pad navbar.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Buat navbar lebar penuh yang menatal keluar dengan halaman dengan menambah .navbar-static-top
dan menyertakan kandungan bar navigasi tengah .container
dan .container-fluid
pad.
Tidak seperti .navbar-fixed-*
kelas, anda tidak perlu menukar sebarang padding pada body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Ubah suai rupa navbar dengan menambah .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Tunjukkan lokasi halaman semasa dalam hierarki navigasi.
Pemisah ditambah secara automatik 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>
Sediakan pautan penomboran untuk tapak atau apl anda dengan komponen penomboran berbilang halaman atau alternatif kelui yang lebih ringkas .
Penomboran mudah yang diilhamkan oleh Rdio, bagus untuk apl dan hasil carian. Blok besar sukar untuk dilepaskan, mudah berskala dan menyediakan kawasan 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 penomboran harus dibalut dengan <nav>
elemen untuk mengenal pasti ia sebagai bahagian navigasi kepada pembaca skrin dan teknologi bantuan lain. Di samping itu, memandangkan halaman mungkin sudah mempunyai lebih daripada satu bahagian navigasi sedemikian (seperti navigasi utama dalam pengepala atau navigasi bar sisi), adalah dinasihatkan untuk menyediakan deskriptif aria-label
yang <nav>
menggambarkan tujuannya. Contohnya, jika komponen penomboran digunakan untuk menavigasi antara set hasil carian, label yang sesuai boleh aria-label="Search results pages"
.
Pautan boleh disesuaikan untuk keadaan yang berbeza. Gunakan .disabled
untuk pautan yang tidak boleh diklik dan .active
untuk menunjukkan halaman semasa.
<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 mengesyorkan agar anda menukar sauh yang aktif atau dilumpuhkan untuk <span>
, atau meninggalkan sauh dalam kes anak panah sebelumnya/seterusnya, untuk mengalih keluar fungsi klik sambil mengekalkan gaya yang dimaksudkan.
<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>
Inginkan penomboran yang lebih besar atau lebih kecil? Tambah .pagination-lg
atau .pagination-sm
untuk saiz 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>
Pautan pantas sebelum dan seterusnya untuk pelaksanaan penomboran mudah dengan penanda dan gaya ringan. Ia bagus untuk tapak ringkas seperti blog atau majalah.
Secara lalai, alat kelui memusatkan pautan.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Sebagai alternatif, anda boleh menyelaraskan setiap pautan ke sisi:
<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>
Pautan kelui juga menggunakan .disabled
kelas utiliti umum daripada penomboran.
<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>
Tambah mana-mana kelas pengubah suai yang disebutkan di bawah untuk menukar rupa 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 pemaparan boleh timbul apabila anda mempunyai berpuluh-puluh label sebaris dalam bekas sempit, setiap satu mengandungi inline-block
elemennya sendiri (seperti ikon). Jalan sekitar ini adalah tetapan display: inline-block;
. Untuk konteks dan contoh, lihat #13219 .
Serlahkan item baharu atau belum dibaca dengan mudah dengan menambahkan <span class="badge">
pada pautan, 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>
Apabila tiada item baharu atau belum dibaca, lencana hanya akan runtuh (melalui :empty
pemilih CSS) dengan syarat tiada kandungan wujud di dalamnya.
Lencana tidak akan runtuh sendiri dalam Internet Explorer 8 kerana ia tidak mempunyai sokongan untuk :empty
pemilih.
Gaya terbina dalam disertakan untuk meletakkan lencana dalam keadaan 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 boleh memanjangkan keseluruhan port pandangan secara pilihan untuk mempamerkan kandungan utama di tapak anda.
Ini ialah unit wira ringkas, komponen gaya jumbotron ringkas untuk menarik perhatian tambahan kepada kandungan atau maklumat yang ditampilkan.
<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 menjadikan jumbotron lebar penuh, dan tanpa bucu bulat, letakkannya di luar semua .container
s dan sebaliknya tambahkan .container
dalam.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Cangkang mudah untuk h1
menjarakkan dan membahagikan bahagian kandungan pada halaman dengan sewajarnya. Ia boleh menggunakan elemen h1
lalai ' small
, serta kebanyakan komponen lain (dengan gaya tambahan).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Panjangkan sistem grid Bootstrap dengan komponen lakaran kenit untuk memaparkan grid imej, video, teks dan banyak lagi dengan mudah.
Jika anda sedang mencari persembahan lakaran kecil seperti Pinterest dengan ketinggian dan/atau lebar yang berbeza-beza, anda perlu menggunakan pemalam pihak ketiga seperti Masonry , Isotope , atau Salvattore .
Secara lalai, lakaran kecil Bootstrap direka untuk mempamerkan imej terpaut dengan penanda yang diperlukan minimum.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Dengan sedikit penanda tambahan, anda boleh menambah apa-apa jenis kandungan HTML seperti tajuk, perenggan atau butang ke dalam lakaran kecil.
<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>
Sediakan mesej maklum balas kontekstual untuk tindakan pengguna biasa dengan segelintir mesej makluman yang tersedia dan fleksibel.
Balut sebarang teks dan butang buang pilihan .alert
dan salah satu daripada empat kelas kontekstual (cth, .alert-success
) untuk mesej makluman asas.
Makluman tidak mempunyai kelas lalai, hanya kelas asas dan pengubah suai. Makluman kelabu lalai tidak terlalu masuk akal, jadi anda dikehendaki menentukan jenis melalui kelas kontekstual. Pilih daripada kejayaan, maklumat, amaran 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>
Bina pada sebarang makluman dengan menambahkan butang pilihan .alert-dismissible
dan tutup.
Untuk makluman yang boleh diketepikan berfungsi sepenuhnya, anda mesti menggunakan pemalam JavaScript makluman .
<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 anda menggunakan <button>
elemen dengan data-dismiss="alert"
atribut data.
Gunakan .alert-link
kelas utiliti untuk menyediakan pautan berwarna padan dengan cepat dalam sebarang makluman.
<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 maklum balas terkini tentang kemajuan aliran kerja atau tindakan dengan bar kemajuan yang mudah tetapi fleksibel.
Bar kemajuan menggunakan peralihan CSS3 dan animasi untuk mencapai beberapa kesannya. Ciri ini tidak disokong dalam Internet Explorer 9 dan ke bawah atau versi Firefox yang lebih lama. Opera 12 tidak menyokong animasi.
Jika tapak web anda mempunyai Dasar Keselamatan Kandungan (CSP) yang tidak membenarkan style-src 'unsafe-inline'
, maka anda tidak akan dapat menggunakan style
atribut sebaris untuk menetapkan lebar bar kemajuan seperti yang ditunjukkan dalam contoh kami di bawah. Kaedah alternatif untuk menetapkan lebar yang serasi dengan CSP yang ketat termasuk menggunakan sedikit JavaScript tersuai (yang ditetapkan element.style.width
) atau menggunakan kelas CSS tersuai.
Bar kemajuan lalai.
<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>
Alih keluar kelas <span>
dengan .sr-only
dari dalam bar kemajuan untuk menunjukkan peratusan yang boleh dilihat.
<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 teks label kekal boleh dibaca walaupun untuk peratusan yang rendah, pertimbangkan untuk menambah a min-width
pada bar 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>
Bar kemajuan menggunakan beberapa butang yang sama dan kelas amaran 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 kecerunan untuk mencipta kesan berjalur. Tidak tersedia dalam IE9 dan ke bawah.
<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>
Tambahkan .active
ke .progress-bar-striped
untuk menghidupkan jalur dari kanan ke kiri. Tidak tersedia dalam IE9 dan ke bawah.
<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>
Letakkan berbilang bar ke dalam yang sama .progress
untuk menyusunnya.
<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 membina pelbagai jenis komponen (seperti ulasan blog, Tweet, dll) yang menampilkan imej dijajar ke kiri atau kanan bersama kandungan teks.
Media lalai memaparkan objek media (imej, video, audio) di sebelah kiri atau kanan blok kandungan.
<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 wujud dan sebelum ini digunakan sebagai sebahagian daripada komponen media, tetapi tidak digunakan lagi untuk penggunaan itu pada v3.3.0. Ia lebih kurang bersamaan dengan .media-left
dan .media-right
, kecuali yang .media-right
perlu diletakkan selepas .media-body
dalam html.
Imej atau media lain boleh dijajarkan ke atas, tengah atau bawah. Lalai adalah dijajar atas.
Cras duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis dalam faucibus.
Donec sed 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 duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis dalam faucibus.
Donec sed 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 duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis dalam faucibus.
Donec sed 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 penanda tambahan, anda boleh menggunakan senarai dalam media (berguna untuk urutan ulasan atau senarai artikel).
Cras duduk amet nibh libero, dalam gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 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>
Kumpulan senarai ialah komponen yang fleksibel dan berkuasa untuk memaparkan bukan sahaja senarai elemen ringkas, tetapi senarai kompleks dengan kandungan tersuai.
Kumpulan senarai paling asas hanyalah senarai tidak tertib dengan item senarai, dan kelas yang betul. Bina di atasnya dengan pilihan yang mengikuti, atau CSS anda sendiri mengikut keperluan.
<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 pada mana-mana item kumpulan senarai dan ia akan diletakkan secara automatik di sebelah kanan.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Pautkan item kumpulan senarai dengan menggunakan teg sauh dan bukannya item senarai (itu juga bermaksud ibu bapa <div>
dan bukannya <ul>
). Tidak perlu ibu bapa individu di sekeliling 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 kumpulan senarai mungkin butang bukannya item senarai (itu juga bermaksud ibu bapa <div>
dan bukannya <ul>
). Tidak perlu ibu bapa individu di sekeliling setiap elemen. Jangan gunakan .btn
kelas standard 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
pada a .list-group-item
untuk kelabukannya supaya kelihatan dilumpuhkan.
<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 menggayakan item senarai, lalai atau dipautkan. Termasuk juga .active
negeri.
<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 mana-mana HTML dalam, walaupun untuk kumpulan senarai terpaut seperti yang di bawah.
Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida and 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>
Walaupun tidak selalu diperlukan, kadangkala anda perlu meletakkan DOM anda dalam kotak. Untuk situasi tersebut, cuba komponen panel.
Secara lalai, semua yang .panel
dilakukan ialah menggunakan beberapa sempadan asas dan padding untuk mengandungi beberapa kandungan.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Tambahkan bekas tajuk pada panel anda dengan mudah .panel-heading
. Anda juga boleh memasukkan mana-mana <h1>
- <h6>
dengan .panel-title
kelas untuk menambah tajuk pra-gaya. Walau bagaimanapun, saiz fon <h1>
- <h6>
digantikan oleh .panel-heading
.
Untuk pewarnaan pautan yang betul, pastikan anda meletakkan pautan dalam tajuk 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>
Balut butang atau teks kedua dalam .panel-footer
. Ambil perhatian bahawa pengaki panel tidak mewarisi warna dan sempadan apabila menggunakan variasi kontekstual kerana ia 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 lain, mudah menjadikan panel lebih bermakna kepada konteks tertentu dengan menambahkan mana-mana kelas keadaan kontekstual.
<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 mana-mana tanpa sempadan .table
dalam panel untuk reka bentuk yang lancar. Jika terdapat .panel-body
, kami menambah jidar tambahan pada bahagian atas jadual untuk pengasingan.
Beberapa kandungan panel lalai di sini. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Hiasan pellentesque sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Nama pertama | Nama terakhir | Nama pengguna |
---|---|---|---|
1 | Tandakan | Otto | @mdo |
2 | Yakub | Thornton | @gemuk |
3 | Larry | burung |
<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 tiada badan panel, komponen bergerak dari pengepala panel ke meja tanpa gangguan.
# | Nama pertama | Nama terakhir | Nama pengguna |
---|---|---|---|
1 | Tandakan | Otto | @mdo |
2 | Yakub | Thornton | @gemuk |
3 | Larry | burung |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Sertakan kumpulan senarai lebar penuh dengan mudah dalam mana-mana panel.
Beberapa kandungan panel lalai di sini. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Hiasan pellentesque 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>
Benarkan penyemak imbas menentukan dimensi video atau tayangan slaid berdasarkan lebar blok kandungannya dengan mencipta nisbah intrinsik yang akan berskala dengan betul pada mana-mana peranti.
Peraturan digunakan secara langsung pada <iframe>
, <embed>
, <video>
dan <object>
elemen; secara pilihan menggunakan kelas keturunan eksplisit .embed-responsive-item
apabila anda ingin memadankan penggayaan untuk atribut lain.
Petua Pro! Anda tidak perlu memasukkan s frameborder="0"
anda <iframe>
kerana kami mengatasinya 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 perigi sebagai kesan mudah pada elemen untuk memberikan kesan sisipan.
<div class="well">...</div>
Kawal pelapik dan sudut bulat dengan dua kelas pengubah suai pilihan.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>