Glyphicons

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

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

Jatuh turun

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

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.

Mungkin memerlukan kedudukan tambahan

Jatuh turun diletakkan secara automatik melalui CSS dalam aliran biasa dokumen. Ini bermakna lungsur turun mungkin dipangkas oleh ibu bapa dengan overflowsifat tertentu atau muncul di luar sempadan port pandangan. Selesaikan isu ini sendiri apabila ia timbul.

.pull-rightPenjajaran ditamatkan

Mulai v3.1.0, kami telah menamatkan .pull-rightmenu 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 .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>

Kumpulan butang

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

Bar alat butang

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

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

Butang lungsur turun

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

Kumpulan input

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.

@

@example.com

$ .00

https://example.com/users/
<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>

Navs

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.

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>

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.

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>

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>

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

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:

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

Memerlukan pemalam JavaScript

Jika JavaScript dilumpuhkan dan port pandangan cukup sempit sehingga bar navigasi runtuh, adalah mustahil untuk mengembangkan bar navigasi dan melihat kandungan dalam .navbar-collapse.

Navbar responsif memerlukan pemalam runtuh untuk disertakan dalam versi Bootstrap anda.

Menukar titik putus navbar mudah alih yang runtuh

Navbar runtuh ke dalam paparan mudah alih menegaknya apabila port pandang lebih sempit daripada @grid-float-breakpoint, dan berkembang menjadi paparan bukan mudah alih mendatar apabila port pandang sekurang-kurangnya @grid-float-breakpointlebar. Laraskan pembolehubah ini dalam sumber Kurang untuk mengawal apabila navbar runtuh/mengembang. Nilai lalai ialah 768px(skrin "kecil" atau "tablet" terkecil).

Jadikan navbar boleh diakses

Pastikan anda menggunakan <nav>elemen atau, jika menggunakan elemen yang lebih generik seperti <div>, tambahkan a role="navigation"pada setiap bar navigasi untuk mengenal pasti secara eksplisit ia sebagai kawasan mercu tanda bagi pengguna teknologi bantuan.

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

Kaveat peranti mudah alih

Terdapat beberapa kaveat mengenai penggunaan kawalan borang dalam elemen tetap pada peranti mudah alih. Lihat dokumen sokongan penyemak imbas kami untuk mendapatkan butiran.

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

Penggunaan khusus konteks

Seperti kelas butang standard , .navbar-btnboleh digunakan pada <a>dan <input>elemen. Walau bagaimanapun, .navbar-btnkelas butang standard tidak boleh digunakan pada <a>elemen dalam .navbar-nav.

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.

Menjajarkan berbilang komponen dengan betul

Navbars pada masa ini mempunyai had dengan berbilang .navbar-rightkelas. Untuk menjarakkan kandungan dengan betul, kami menggunakan margin negatif pada .navbar-rightelemen terakhir. Apabila terdapat berbilang elemen menggunakan kelas itu, margin ini tidak berfungsi seperti yang dimaksudkan.

Kami akan menyemak semula ini apabila kami boleh menulis semula komponen itu dalam v4.

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

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>

Label

Contoh

Contoh tajuk Baru

Contoh tajuk Baru

Contoh tajuk Baru

Contoh tajuk Baru

Contoh tajuk Baru
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 sempit, setiap satu mengandungi inline-blockelemennya sendiri (seperti ikon). Jalan sekitar ini adalah tetapan display: inline-block;. Untuk konteks dan contoh, lihat #13219 .

Lencana

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>

Jumbotron

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>

Pengepala halaman

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

Gambar kecil

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.

100%x200

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

100%x200

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

100%x200

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>

Makluman

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.

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

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

Gunakan .alert-linkkelas 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>

Bar kemajuan

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.

60% Selesai
<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.

40% Selesai (berjaya)
20% Selesai
60% Selesai (amaran)
80% Selesai (bahaya)
<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.

40% Selesai (berjaya)
20% Selesai
60% Selesai (amaran)
80% Selesai (bahaya)
<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.

45% Selesai
<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.

35% Selesai (berjaya)
20% Selesai (amaran)
10% Selesai (bahaya)
<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>

Objek media

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

Senaraikan kumpulan

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.

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

<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. Termasuk juga .activenegeri.

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

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

Panel

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>

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

Benam responsif

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

perigi

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 dalam perigi kecil!
<div class="well well-sm">...</div>