Glyph yang tersedia

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.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-tolak
glyphicon glyphicon-cloud
glyphicon glyphicon-envelope
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-music
glyphicon glyphicon-search
glyphicon glyphicon-heart
glyphicon glyphicon-star
glyphicon glyphicon-bintang-kosong
glyphicon glyphicon-user
glyphicon glyphicon-filem
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-sampah
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
peti masuk glyphicon glyphicon
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
fon kepala glyphicon glyphicon
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon kod bar glyphicon
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
penanda buku glyphicon glyphicon
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
senarai glyphicon glyphicon
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-kanan
glyphicon glyphicon-facetime-video
glyphicon glyphicon-gambar
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-cepat-undur
glyphicon glyphicon-undur
glyphicon glyphicon-play
glyphicon glyphicon-jeda
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-kanan
glyphicon glyphicon-plus-sign
glyphicon glyphicon-tolak-tanda
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-tanda-soalan
glyphicon glyphicon-info-sign
tangkapan skrin glyphicon glyphicon
glyphicon glyphicon-alih-bulatan
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-anak panah-kiri
glyphicon glyphicon-anak panah-kanan
glyphicon glyphicon-anak panah-atas
glyphicon glyphicon-anak panah-bawah
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-penuh
glyphicon glyphicon-resize-small
glyphicon glyphicon-seruan-tanda
glyphicon glyphicon-hadiah
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-terbuka-mata
glyphicon glyphicon-mata-tutup
glyphicon glyphicon-amaran-tanda
glyphicon glyphicon-plane
glyphicon kalendar glyphicon
glyphicon glyphicon-rawak
glyphicon glyphicon-comment
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-buka
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
sijil glyphicon glyphicon
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-tangan-kanan
glyphicon glyphicon-tangan-kiri
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-bulatan-anak panah-kanan
glyphicon glyphicon-bulatan-anak panah-kiri
glyphicon glyphicon-bulatan-anak panah-atas
glyphicon glyphicon-bulatan-anak panah-bawah
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
beg bimbit glyphicon glyphicon
glyphicon glyphicon-skrin penuh
papan pemuka glyphicon glyphicon
glyphicon glyphicon-klip kertas
glyphicon glyphicon-hati-kosong
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-abjad
glyphicon glyphicon-sort-by-abjad-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-tidak ditanda
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon disimpan glyphicon
glyphicon glyphicon-import
glyphicon glyphicon-eksport
glyphicon glyphicon-hantar
glyphicon glyphicon-floppy-cake
glyphicon glyphicon-floppy-simpan
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kad-kredit
glyphicon glyphicon-transfer
glyphicon glyphicon-kutleri
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-fon telinga
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
amaran glyphicon glyphicon
glyphicon glyphicon-equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-knight
glyphicon glyphicon-baby-formula
glyphicon glyphicon-khemah
glyphicon glyphicon-papan hitam
glyphicon glyphicon-katil
glyphicon glyphicon-epal
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-lamp
glyphicon glyphicon-duplikat
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-gunting
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon skala glyphicon
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-merasa
glyphicon glyphicon-education
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-minyak
glyphicon glyphicon-grain
glyphicon glyphicon-cermin mata hitam
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-kanan
glyphicon glyphicon-triangle-left
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-kanan
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Bagaimana nak guna

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.

Jangan campurkan dengan komponen lain

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

Hanya untuk digunakan pada elemen kosong

Kelas ikon hanya boleh digunakan pada elemen yang tidak mengandungi kandungan teks dan tidak mempunyai elemen anak.

Menukar lokasi fon ikon

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:

Tukar @icon-font-pathdan/atau @icon-font-namepembolehubah dalam sumber Kurang fail.
Gunakan pilihan URL relatif yang disediakan oleh Pengkompil Kurang.
Tukar url()laluan dalam CSS yang disusun.

Gunakan apa sahaja pilihan yang paling sesuai dengan persediaan pembangunan khusus anda.

Ikon yang boleh diakses

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

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-labelatribut pada kawalan itu sendiri.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Contoh

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-onlyteks tambahan untuk menyampaikan pembayang ini kepada pengguna teknologi bantuan.

Masukkan alamat e-mel yang sah

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

Contoh

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

Penjajaran

Secara lalai, menu lungsur turun secara automatik diletakkan 100% dari atas dan di sepanjang sebelah kiri induknya. Tambahkan .dropdown-menu-rightpada .dropdown-menujajaran ke kanan menu lungsur turun.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Pengepala

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>

Pembahagi

Tambahkan pembahagi untuk memisahkan siri pautan dalam menu lungsur turun.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Item menu dilumpuhkan

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

Petua alat & popover dalam kumpulan butang memerlukan tetapan khas

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

Pastikan betul `role`dan sediakan label

Untuk membolehkan teknologi bantuan - seperti pembaca skrin - menyampaikan bahawa satu siri butang dikumpulkan, roleatribut 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 roleatribut yang betul. Dalam contoh yang disediakan di sini, kami menggunakan aria-label, tetapi alternatif seperti aria-labelledbyjuga boleh digunakan.

Contoh asas

Balut satu siri butang dengan .btndalam .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>

Saiz

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>

Bersarang

Letakkan a .btn-groupdalam satu lagi .btn-groupapabila 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>

Variasi menegak

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>

Kumpulan butang yang dibenarkan

Buat sekumpulan butang meregang pada saiz yang sama untuk merentangi keseluruhan lebar induknya. Juga berfungsi dengan dropdown butang dalam kumpulan butang.

Mengendalikan sempadan

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: -1pxdigunakan untuk menyusun sempadan dan bukannya mengalihkannya. Walau bagaimanapun, margintidak berfungsi dengan display: table-cell. Akibatnya, bergantung pada penyesuaian anda pada Bootstrap, anda mungkin ingin mengalih keluar atau mewarna semula sempadan.

IE8 dan sempadan

Internet Explorer 8 tidak memberikan sempadan pada butang dalam kumpulan butang yang dibenarkan, sama ada pada <a>atau <button>elemen. Untuk mengatasinya, balut setiap butang dengan butang lain .btn-group.

Lihat #12476 untuk maklumat lanjut.

Dengan `<a>`unsur

Hanya bungkus satu siri .btns dalam .btn-group.btn-group-justified.

Ditinggalkan Tengah Betul

Ditinggalkan Tengah

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Pautan bertindak sebagai butang

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

Dengan `<button>`unsur

Untuk 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 sebarang butang untuk mencetuskan menu lungsur dengan meletakkannya di dalam .btn-groupdan memberikan penanda menu yang betul.

Kebergantungan pemalam

Butang lungsur turun memerlukan pemalam lungsur turun untuk disertakan dalam versi Bootstrap anda.

Butang lungsur turun

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>

Butang pisah turun bawah

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>

Saiz

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>

Variasi dropup

Cetuskan menu lungsur turun di atas elemen dengan menambah .dropuppada 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-groupdengan .input-group-addonatau .input-group-btnuntuk menambah atau menambah elemen pada satu .form-control.

Tekstual `<input>`sahaja

Elakkan menggunakan <select>elemen di sini kerana ia tidak boleh digayakan sepenuhnya dalam pelayar WebKit.

Elakkan menggunakan <textarea>elemen di sini kerana rowsatributnya tidak akan dihormati dalam beberapa kes.

Petua alat & popover dalam kumpulan input memerlukan tetapan khas

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 dengan komponen lain

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.

Sentiasa tambahkan label

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-onlykelas atau penggunaan aria-label, aria-labelledby, aria-describedby, titleatau placeholderatribut) 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.

Contoh asas

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

Saiz

Tambahkan kelas saiz bentuk relatif kepada kelas .input-groupitu 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>

Kotak semak dan tambahan radio

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

Tambahan butang

Butang dalam kumpulan input agak berbeza dan memerlukan satu tahap tambahan sarang. Sebaliknya .input-group-addon, anda perlu menggunakan .input-group-btnuntuk 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 -->

Butang dengan lungsur turun

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

Butang bersegmen

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

Berbilang butang

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 .navkelas asas, serta keadaan kongsi. Tukar kelas pengubah suai untuk bertukar antara setiap gaya.

Menggunakan navs untuk panel tab memerlukan pemalam tab JavaScript

Untuk tab dengan kawasan boleh tab, anda mesti menggunakan pemalam JavaScript tab . Penanda juga memerlukan roleatribut tambahan dan ARIA – lihat penanda contoh pemalam untuk butiran lanjut.

Jadikan navs yang digunakan sebagai navigasi boleh diakses

Jika anda menggunakan navs untuk menyediakan bar navigasi, pastikan anda menambahkan a role="navigation"pada bekas induk yang paling logik bagi <ul>, atau balut <nav>elemen di sekeliling keseluruhan navigasi. Jangan tambah peranan pada <ul>dirinya sendiri, kerana ini akan menghalangnya daripada diumumkan sebagai senarai sebenar oleh teknologi bantuan.

Tab

Perhatikan .nav-tabskelas memerlukan kelas .navasas.

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

Pil

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>

Wajar

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.

Safari dan navigasi wajar responsif

Mulai v9.1.2, Safari mempamerkan pepijat di mana mengubah saiz penyemak imbas anda secara mendatar menyebabkan ralat pemaparan dalam navigasi wajar yang dikosongkan apabila dimuat semula. Pepijat ini juga ditunjukkan dalam contoh nav yang dibenarkan .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Pautan dilumpuhkan

Untuk mana-mana komponen nav (tab atau pil), tambah .disableduntuk pautan kelabu dan tiada kesan tuding .

Fungsi pautan tidak terjejas

Kelas ini hanya akan menukar <a>penampilan ', bukan fungsinya. Gunakan JavaScript tersuai untuk melumpuhkan pautan di sini.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Menggunakan dropdown

Tambahkan menu lungsur turun dengan sedikit HTML tambahan dan pemalam JavaScript lungsur turun .

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

Pil dengan dropdown

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

Kandungan yang melimpah

Memandangkan Bootstrap tidak mengetahui berapa banyak ruang yang diperlukan oleh kandungan dalam bar navigasi anda, anda mungkin menghadapi masalah dengan pembungkusan kandungan ke dalam baris kedua. Untuk menyelesaikannya, anda boleh:

Kurangkan jumlah atau lebar item navbar.
Sembunyikan item bar navigasi tertentu pada saiz skrin tertentu menggunakan kelas utiliti responsif .
Tukar titik di mana navbar anda bertukar antara mod runtuh dan mendatar. Sesuaikan @grid-float-breakpointpembolehubah atau tambah pertanyaan media anda sendiri.

<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-brandmempunyai 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-formuntuk 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-formberkongsi banyak kodnya dengan .form-inlinemelalui 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>

Sentiasa tambahkan label

Pembaca skrin akan menghadapi masalah dengan borang anda jika anda tidak memasukkan label untuk setiap input. Untuk borang sebaris ini, anda boleh menyembunyikan label menggunakan .sr-onlykelas. Terdapat kaedah alternatif selanjutnya untuk menyediakan label untuk teknologi bantuan, seperti aria-label, aria-labelledbyatau titleatribut. Jika tiada satu pun daripada ini hadir, pembaca skrin boleh menggunakan placeholderatribut, jika ada, tetapi ambil perhatian bahawa penggunaan placeholdersebagai pengganti kaedah pelabelan lain tidak digalakkan.

Tambahkan .navbar-btnkelas 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-linkkelas 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-leftatau .navbar-rightkelas 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-leftdan .pull-right, tetapi ia merangkumi pertanyaan media untuk pengendalian komponen navbar yang lebih mudah merentas saiz peranti.

Tambahkan .navbar-fixed-topdan sertakan kandungan .containeratau .container-fluidke tengah dan pad navbar.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Pelapik badan diperlukan

Navbar tetap akan menindih kandungan anda yang lain, melainkan anda menambah paddingpada bahagian atas <body>. Cuba nilai anda sendiri atau gunakan coretan kami di bawah. Petua: Secara lalai, bar navigasi adalah 50px tinggi.

body { padding-top: 70px; }

Pastikan anda memasukkan ini selepas CSS Bootstrap teras.

Tambahkan .navbar-fixed-bottomdan sertakan kandungan .containeratau .container-fluidke tengah dan pad navbar.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Pelapik badan diperlukan

Navbar tetap akan menindih kandungan anda yang lain, melainkan anda menambah paddingpada bahagian bawah <body>. Cuba nilai anda sendiri atau gunakan coretan kami di bawah. Petua: Secara lalai, bar navigasi adalah 50px tinggi.

body { padding-bottom: 70px; }

Pastikan anda memasukkan ini selepas CSS Bootstrap teras.

Buat navbar lebar penuh yang menatal keluar dengan halaman dengan menambah .navbar-static-topdan menyertakan kandungan bar navigasi tengah .containerdan .container-fluidpad.

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>

Serbuk roti

Tunjukkan lokasi halaman semasa dalam hierarki navigasi.

Pemisah ditambah secara automatik dalam CSS melalui :beforedan content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

penomboran

Sediakan pautan penomboran untuk tapak atau apl anda dengan komponen penomboran berbilang halaman atau alternatif kelui yang lebih ringkas .

Penomboran lalai

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">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Melabel komponen penomboran

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-labelyang <nav>menggambarkan tujuannya. Contohnya, jika komponen penomboran digunakan untuk menavigasi antara set hasil carian, label yang sesuai boleh aria-label="Search results pages".

Keadaan kurang upaya dan aktif

Pautan boleh disesuaikan untuk keadaan yang berbeza. Gunakan .disableduntuk pautan yang tidak boleh diklik dan .activeuntuk menunjukkan halaman semasa.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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 kefungsian klik sambil mengekalkan gaya yang dimaksudkan.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Saiz

Inginkan penomboran yang lebih besar atau lebih kecil? Tambah .pagination-lgatau .pagination-smuntuk 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>

Alat kelui

Pautan pantas sebelum dan seterusnya untuk pelaksanaan penomboran mudah dengan penanda dan gaya ringan. Ia bagus untuk tapak ringkas seperti blog atau majalah.

Contoh lalai

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>

Pautan sejajar

Sebagai alternatif, anda boleh menyelaraskan setiap pautan ke sisi:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Keadaan orang kurang upaya pilihan

Pautan kelui juga menggunakan .disabledkelas utiliti umum daripada penomboran.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Contoh

Contoh tajuk Baru

<h3>Example heading <span class="label label-default">New</span></h3>

Variasi yang tersedia

Tambah mana-mana kelas pengubah suai yang disebutkan di bawah untuk menukar rupa label.

Bahaya Amaran Maklumat Kejayaan Utama Lalai

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

Mempunyai banyak label?

Masalah pemaparan boleh timbul apabila anda mempunyai berpuluh-puluh label sebaris dalam bekas yang sempit, setiap satu mengandungi inline-blockelemennya 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.

Peti masuk42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Diri runtuh

Apabila tiada item baharu atau belum dibaca, lencana hanya akan runtuh (melalui :emptypemilih CSS) dengan syarat tiada kandungan wujud di dalamnya.

Keserasian merentas pelayar

Lencana tidak akan runtuh sendiri dalam Internet Explorer 8 kerana ia tidak mempunyai sokongan untuk :emptypemilih.

Menyesuaikan diri dengan keadaan nav aktif

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.

Hai dunia!

Ini ialah unit wira ringkas, komponen gaya jumbotron ringkas untuk menarik perhatian tambahan kepada kandungan atau maklumat yang ditampilkan.

Ketahui lebih lanjut

<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 .containers dan sebaliknya tambahkan .containerdalam.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Cangkang ringkas untuk h1menjarakkan dan membahagikan bahagian kandungan pada halaman dengan sewajarnya. Ia boleh menggunakan elemen h1lalai ' 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 .

Contoh lalai

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>

Kandungan tersuai

Dengan sedikit penanda tambahan, anda boleh menambah apa-apa jenis kandungan HTML seperti tajuk, perenggan atau butang ke dalam lakaran kecil.

Label lakaran kecil

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Butang Butang

Label lakaran kecil

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Butang Butang

Label lakaran kecil

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida and eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Butang Butang

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

Contoh

Balut sebarang teks dan butang buang pilihan .alertdan salah satu daripada empat kelas kontekstual (cth, .alert-success) untuk mesej makluman asas.

Tiada kelas lalai

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.

Bagus! Anda berjaya membaca mesej makluman penting ini.

Angkat kepala! Makluman ini memerlukan perhatian anda, tetapi ia tidak begitu penting.

Amaran! Lebih baik periksa diri anda, anda tidak kelihatan terlalu bagus.

Oh kejap! Ubah beberapa perkara dan cuba serahkan sekali lagi.

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

Makluman yang boleh ditolak

Bina pada sebarang makluman dengan menambahkan butang pilihan .alert-dismissibledan tutup.

Memerlukan pemalam amaran JavaScript

Untuk makluman yang boleh diketepikan berfungsi sepenuhnya, anda mesti menggunakan pemalam JavaScript makluman .

Amaran! Lebih baik periksa diri anda, anda tidak kelihatan terlalu bagus.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Pastikan tingkah laku yang betul merentas semua peranti

Pastikan anda menggunakan <button>elemen dengan data-dismiss="alert"atribut data.

Pautan dalam makluman

Gunakan .alert-linkkelas utiliti untuk menyediakan pautan berwarna padan dengan cepat dalam sebarang makluman.

Bagus! Anda berjaya membaca mesej makluman penting ini .

Angkat kepala! Makluman ini memerlukan perhatian anda , tetapi ia tidak begitu penting.

Amaran! Lebih baik periksa diri anda, anda tidak kelihatan terlalu bagus .

Oh kejap! Ubah beberapa perkara dan cuba serahkan sekali lagi.

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

Keserasian merentas pelayar

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.

Keserasian Dasar Keselamatan Kandungan (CSP).

Jika tapak web anda mempunyai Dasar Keselamatan Kandungan (CSP) yang tidak membenarkan style-src 'unsafe-inline', maka anda tidak akan dapat menggunakan styleatribut 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.

Contoh asas

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>

Dengan label

Alih keluar kelas <span>dengan .sr-onlydari dalam bar kemajuan untuk menunjukkan peratusan yang boleh dilihat.

60%

<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-widthpada bar kemajuan.

0%

2%

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

Alternatif kontekstual

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>

berjalur

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>

Beranimasi

Tambahkan .activeke .progress-bar-stripeduntuk 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>

Bertindan

Letakkan berbilang bar ke dalam yang sama .progressuntuk 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

Media lalai memaparkan objek media (imej, video, audio) di sebelah kiri atau kanan blok kandungan.

Tajuk media

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.

Tajuk media

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.

Tajuk media bersarang

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.

Tajuk media

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.

Tajuk media

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.

<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-leftdan .pull-rightjuga 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-leftdan .media-right, kecuali yang .media-rightperlu diletakkan selepas .media-bodydalam html.

Penjajaran media

Imej atau media lain boleh dijajarkan atas, tengah atau bawah. Lalai adalah dijajar atas.

Media sejajar teratas

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.

Media sejajar tengah

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.

Media jajaran bawah

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>

Senarai media

Dengan sedikit penanda tambahan, anda boleh menggunakan senarai dalam media (berguna untuk urutan ulasan atau senarai artikel).

Tajuk media

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.

Tajuk media bersarang
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.

Tajuk media bersarang
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.

Tajuk media bersarang
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.

Contoh asas

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.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum dan eros

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

Lencana

Tambahkan komponen lencana pada mana-mana item kumpulan senarai dan ia akan diletakkan secara automatik di sebelah kanan.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Item yang dipautkan

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.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum dan eros

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

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

Item yang dilumpuhkan

Tambahkan .disabledpada a .list-group-itemuntuk kelabukannya supaya kelihatan dilumpuhkan.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum dan eros

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

Kelas kontekstual

Gunakan kelas kontekstual untuk menggayakan item senarai, lalai atau dipautkan. Juga termasuk .activenegeri.

Dapibus ac facilisis in
Cras duduk amet nibh libero
Porta ac consectetur ac
Vestibulum dan eros

Dapibus ac facilisis in Cras duduk amet nibh libero Porta ac consectetur ac Vestibulum dan eros

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

Kandungan tersuai

Tambahkan hampir mana-mana HTML dalam, walaupun untuk kumpulan senarai terpaut seperti yang di bawah.

Senaraikan tajuk item kumpulan

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Senaraikan tajuk item kumpulan

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Senaraikan tajuk item kumpulan

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.

Contoh asas

Secara lalai, semua yang .paneldilakukan ialah menggunakan beberapa sempadan asas dan padding untuk mengandungi beberapa kandungan.

Contoh panel asas

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel dengan tajuk

Tambahkan bekas tajuk pada panel anda dengan mudah .panel-heading. Anda juga boleh memasukkan mana-mana <h1>- <h6>dengan .panel-titlekelas 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.

Tajuk panel tanpa tajuk

Kandungan panel

Tajuk panel

Kandungan panel

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

Panel dengan pengaki

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.

Kandungan panel

Pengaki panel

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Alternatif kontekstual

Seperti komponen lain, mudah menjadikan panel lebih bermakna kepada konteks tertentu dengan menambahkan mana-mana kelas keadaan kontekstual.

Tajuk panel

Kandungan panel

Tajuk panel

Kandungan panel

Tajuk panel

Kandungan panel

Tajuk panel

Kandungan panel

Tajuk panel

Kandungan panel

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

Dengan meja

Tambahkan mana-mana tanpa sempadan .tabledalam panel untuk reka bentuk yang lancar. Jika terdapat .panel-body, kami menambah jidar tambahan pada bahagian atas jadual untuk pengasingan.

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

#	Nama pertama	Nama terakhir	Nama pengguna
1	Tandakan	Otto	@mdo
2	Yakub	Thornton	@gemuk
3	Larry	burung	@twitter

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

Tajuk panel

#	Nama pertama	Nama terakhir	Nama pengguna
1	Tandakan	Otto	@mdo
2	Yakub	Thornton	@gemuk
3	Larry	burung	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Dengan kumpulan senarai

Sertakan kumpulan senarai lebar penuh dengan mudah dalam mana-mana panel.

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

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum dan eros

<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-itemapabila anda ingin memadankan penggayaan untuk atribut lain.

Petua Pro! Anda tidak perlu memasukkan frameborder="0"dalam <iframe>s anda 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>

Lalai dengan baik

Gunakan perigi sebagai kesan mudah pada elemen untuk memberikan kesan sisipan.

Lihat, saya dalam perigi!

<div class="well">...</div>

Kelas pilihan

Kawal pelapik dan sudut bulat dengan dua kelas pengubah suai pilihan.

Lihat, saya berada dalam perigi besar!

<div class="well well-lg">...</div>

Lihat, saya berada dalam perigi kecil!

<div class="well well-sm">...</div>

Komponen

Glyphicons

Glyph yang tersedia

Bagaimana nak guna

Jangan campurkan dengan komponen lain

Hanya untuk digunakan pada elemen kosong

Menukar lokasi fon ikon

Ikon yang boleh diakses

Contoh

Jatuh turun

Contoh

Penjajaran

Mungkin memerlukan kedudukan tambahan

.pull-rightPenjajaran ditamatkan

Pengepala

Pembahagi

Item menu dilumpuhkan

Kumpulan butang

Petua alat & popover dalam kumpulan butang memerlukan tetapan khas

Pastikan betul roledan sediakan label

Contoh asas

Bar alat butang

Saiz

Bersarang

Variasi menegak

Kumpulan butang yang dibenarkan

Mengendalikan sempadan

IE8 dan sempadan

Dengan <a>unsur

Pautan bertindak sebagai butang

Dengan <button>unsur

Butang lungsur turun

Kebergantungan pemalam

Butang lungsur turun

Butang pisah turun bawah

Saiz

Variasi dropup

Kumpulan input

Tekstual <input>sahaja

Petua alat & popover dalam kumpulan input memerlukan tetapan khas

Jangan campurkan dengan komponen lain

Sentiasa tambahkan label

Contoh asas

Saiz

Kotak semak dan tambahan radio

Tambahan butang

Butang dengan lungsur turun

Butang bersegmen

Berbilang butang

Navs

Menggunakan navs untuk panel tab memerlukan pemalam tab JavaScript

Jadikan navs yang digunakan sebagai navigasi boleh diakses

Tab

Pil

Wajar

Safari dan navigasi wajar responsif

Pautan dilumpuhkan

Fungsi pautan tidak terjejas

Menggunakan dropdown

Tab dengan lungsur turun

Pil dengan dropdown

Navbar

Navbar lalai

Kandungan yang melimpah

Memerlukan pemalam JavaScript

Menukar titik putus navbar mudah alih yang runtuh

Jadikan navbar boleh diakses

Imej jenama

Borang

Kaveat peranti mudah alih

Sentiasa tambahkan label

Butang

Penggunaan khusus konteks

Teks

Pautan bukan nav

Penjajaran komponen

Menjajarkan berbilang komponen dengan betul

Ditetapkan ke atas

Pelapik badan diperlukan

Tetap ke bawah

`.pull-right`Penjajaran ditamatkan

Pastikan betul `role`dan sediakan label

Dengan `<a>`unsur

Dengan `<button>`unsur

Tekstual `<input>`sahaja