Lebih sedozen komponen boleh guna semula dibina untuk menyediakan ikonografi, dropdown, kumpulan input, navigasi, makluman dan banyak lagi.
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 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.
Contoh
Gunakannya dalam butang, kumpulan butang untuk bar alat, navigasi atau input borang yang diprapendi.
Ikon yang digunakan dalam makluman untuk menyampaikan bahawa ia adalah mesej ralat, dengan .sr-onlyteks tambahan untuk menyampaikan pembayang ini kepada pengguna teknologi bantuan.
Balut pencetus lungsur turun dan menu lungsur turun dalam .dropdown, atau elemen lain yang mengisytiharkan position: relative;. Kemudian tambahkan HTML menu.
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.
Pengepala
Tambahkan pengepala untuk melabel bahagian tindakan dalam mana-mana menu lungsur turun.
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.
Bar alat butang
Gabungkan set <div class="btn-group">menjadi a <div class="btn-toolbar">untuk komponen yang lebih kompleks.
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.
Bersarang
Letakkan a .btn-groupdalam satu lagi .btn-groupapabila anda mahu menu lungsur bercampur dengan satu siri butang.
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 .
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.
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.
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.
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.
Kotak semak dan tambahan radio
Letakkan sebarang kotak semak atau pilihan radio dalam addon kumpulan input dan bukannya teks.
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.
Butang dengan lungsur turun
Butang bersegmen
Berbilang butang
Walaupun anda hanya boleh mempunyai satu alat tambah pada setiap sisi, anda boleh mempunyai berbilang butang dalam satu .input-group-btn.
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.
Tab
Perhatikan .nav-tabskelas memerlukan kelas .navasas.
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 .
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.
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.
Imej jenama
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.
Borang
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.
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.
Butang
Tambahkan .navbar-btnkelas kepada <button>elemen yang tidak berada dalam a <form>untuk memusatkannya secara menegak dalam bar navigasi.
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.
Teks
Balut rentetan teks dalam elemen dengan .navbar-text, biasanya pada <p>teg untuk petunjuk dan warna yang betul.
Pautan bukan nav
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.
Penjajaran komponen
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.
Tetap ke atas
Tambahkan .navbar-fixed-topdan sertakan kandungan .containeratau .container-fluidke tengah dan pad navbar.
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.
Pastikan anda memasukkan ini selepas CSS Bootstrap teras.
Tetap ke bawah
Tambahkan .navbar-fixed-bottomdan sertakan kandungan .containeratau .container-fluidke tengah dan pad navbar.
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.
Pastikan anda memasukkan ini selepas CSS Bootstrap teras.
Bahagian atas statik
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.
Navbar terbalik
Ubah suai rupa navbar dengan menambah .navbar-inverse.
Serbuk roti
Tunjukkan lokasi halaman semasa dalam hierarki navigasi.
Pemisah ditambah secara automatik dalam CSS melalui :beforedan content.
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.
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.
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.
Saiz
Inginkan penomboran yang lebih besar atau lebih kecil? Tambah .pagination-lgatau .pagination-smuntuk saiz tambahan.
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.
Pautan sejajar
Sebagai alternatif, anda boleh menyelaraskan setiap pautan ke sisi:
Keadaan orang kurang upaya pilihan
Pautan kelui juga menggunakan .disabledkelas utiliti umum daripada penomboran.
Label
Contoh
Contoh tajuk Baru
Contoh tajuk Baru
Contoh tajuk Baru
Contoh tajuk Baru
Contoh tajuk Baru
Contoh tajuk Baru
Variasi yang tersedia
Tambah mana-mana kelas pengubah suai yang disebutkan di bawah untuk menukar rupa label.
Bahaya Amaran Maklumat Kejayaan Utama Lalai
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.
Untuk menjadikan jumbotron lebar penuh, dan tanpa bucu bulat, letakkannya di luar semua .containers dan sebaliknya tambahkan .containerdalam.
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).
Contoh pengepala halaman Subteks untuk pengepala
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.
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.
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.
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.
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.
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.
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.
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
Dengan label
Alih keluar kelas <span>dengan .sr-onlydari dalam bar kemajuan untuk menunjukkan peratusan yang boleh dilihat.
60%
Untuk memastikan teks label kekal boleh dibaca walaupun untuk peratusan yang rendah, pertimbangkan untuk menambah a min-widthpada bar kemajuan.
0%
2%
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)
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)
Beranimasi
Tambahkan .activeke .progress-bar-stripeduntuk menghidupkan jalur dari kanan ke kiri. Tidak tersedia dalam IE9 dan ke bawah.
45% Selesai
Bertindan
Letakkan berbilang bar ke dalam yang sama .progressuntuk menyusunnya.
35% Selesai (berjaya)
20% Selesai (amaran)
10% Selesai (bahaya)
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.
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.
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.
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
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
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.
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.
Item yang dilumpuhkan
Tambahkan .disabledpada a .list-group-itemuntuk kelabukannya supaya kelihatan dilumpuhkan.
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
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
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
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
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
Jika tiada badan panel, komponen bergerak dari pengepala panel ke meja tanpa gangguan.
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
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.
perigi
Lalai dengan baik
Gunakan perigi sebagai kesan mudah pada elemen untuk memberikan kesan sisipan.
Lihat, saya dalam perigi!
Kelas pilihan
Kawal pelapik dan sudut bulat dengan dua kelas pengubah suai pilihan.