Komponen

Berpuluh-puluh komponen boleh guna semula terbina dalam Bootstrap untuk menyediakan navigasi, makluman, popover dan banyak lagi.

Kumpulan butang

Gunakan kumpulan butang untuk menggabungkan berbilang butang bersama-sama sebagai satu komponen komposit. Bina mereka dengan satu siri <a>atau <button>elemen.

Amalan terbaik

Kami mengesyorkan garis panduan berikut untuk menggunakan kumpulan butang dan bar alat:

Sentiasa gunakan elemen yang sama dalam satu kumpulan butang, <a>atau <button>.
Jangan campurkan butang dengan warna yang berbeza dalam kumpulan butang yang sama.
Gunakan ikon sebagai tambahan kepada atau bukannya teks, tetapi pastikan sertakan teks alt dan tajuk jika sesuai.

Kumpulan Butang Berkaitan dengan menu lungsur (lihat di bawah) harus dipanggil secara berasingan dan sentiasa menyertakan karet lungsur turun untuk menunjukkan tingkah laku yang dimaksudkan.

Contoh lalai

Begini cara HTML mencari kumpulan butang standard yang dibina dengan butang teg sauh:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Contoh bar alat

Gabungkan set <div class="btn-group">menjadi a <div class="btn-toolbar">untuk komponen yang lebih kompleks.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Kotak semak dan perisa radio

Kumpulan butang juga boleh berfungsi sebagai radio, di mana hanya satu butang mungkin aktif, atau kotak semak, di mana sebarang bilangan butang mungkin aktif. Lihat dokumen Javascript untuk itu.

Dapatkan javascript »

Jatuh turun dalam kumpulan butang

Angkat kepala! Butang dengan menu lungsur mesti dibungkus secara berasingan dengan butangnya sendiri .btn-groupdalam a .btn-toolbaruntuk pemaparan yang betul.

Butang lungsur turun

Gambaran keseluruhan dan contoh

Gunakan sebarang butang untuk mencetuskan menu lungsur dengan meletakkannya di dalam .btn-groupdan memberikan penanda menu yang betul.

Contoh markup

Sama seperti kumpulan butang, penanda kami menggunakan penanda butang biasa, tetapi dengan beberapa tambahan untuk memperhalusi gaya dan menyokong pemalam jQuery lungsur Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Tindakan
    <span class = "caret" ></span> 
  </a>
  <ul class = "menu lungsur" > 
    <!-- pautan menu lungsur turun -->
  </ul>
</div>

Berfungsi dengan semua saiz butang

Butang lungsur turun berfungsi pada sebarang saiz. saiz butang anda kepada .btn-large, .btn-small, atau .btn-mini.

Memerlukan javascript

Butang lungsur turun memerlukan pemalam lungsur Bootstrap untuk berfungsi.

Dalam sesetengah kes—seperti mudah alih—menu lungsur turun akan dilanjutkan di luar port pandangan. Anda perlu menyelesaikan penjajaran secara manual atau dengan javascript tersuai.

Butang pisah turun bawah

Gambaran keseluruhan dan contoh

Membina gaya kumpulan butang dan penanda, kami boleh membuat butang pisah dengan mudah. Butang pisah menampilkan tindakan standard di sebelah kiri dan togol lungsur turun di sebelah kanan dengan pautan kontekstual.

Saiz

Gunakan kelas butang tambahan .btn-mini, .btn-small, atau .btn-largeuntuk saiz.

<div class = "btn-group" > 
  ...
  <ul class = "tarik turun-menu tarik-kanan" > 
    <!-- pautan menu lungsur turun -->
  </ul>
</div>

Contoh markup

Kami mengembangkan menu lungsur butang biasa untuk menyediakan tindakan butang kedua yang beroperasi sebagai pencetus lungsur turun yang berasingan.

<div class = "btn-group" > 
  <button class = "btn" > Tindakan </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </butang>
  <ul class = "menu lungsur" > 
    <!-- pautan menu lungsur turun -->
  </ul>
</div>

Menu lungsur

Menu lungsur turun juga boleh ditogol dari bawah ke atas dengan menambahkan satu kelas kepada induk terdekat .dropdown-menu. Ia akan membalikkan arah .caretdan meletakkan semula menu itu sendiri untuk bergerak dari bawah ke atas dan bukannya atas ke bawah.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </butang>
  <ul class = "menu lungsur" > 
    <!-- pautan menu lungsur turun -->
  </ul>
</div>

Lalai ringan Penanda yang sama, kelas yang berbeza

Kelas asas yang berkuasa

Semua komponen nav di sini—tab, pil dan senarai— berkongsi penanda dan gaya asas yang sama melalui .navkelas.

Bila nak guna

Tab dan pil sangat bagus untuk bahagian kandungan atau menavigasi antara halaman kandungan yang berkaitan.

Penjajaran komponen

Untuk menjajarkan pautan navigasi, gunakan kelas .pull-leftatau .pull-rightutiliti. Kedua-dua kelas akan menambah apungan CSS ke arah yang ditentukan.

Tab asas

Ambil <ul>pautan biasa dan tambah .nav-tabs:

<ul class = "nav-tabs" > 
  <li class = "aktif" > 
    <a href = "#" > Laman Utama </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pil asas

Ambil HTML yang sama, tetapi gunakan .nav-pills:

<ul class = "pil nav nav" > 
  <li class = "aktif" > 
    <a href = "#" > Laman Utama </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Boleh Ditindan Jadikan tab atau pil menegak

Bagaimana untuk menyusunnya

Memandangkan tab dan pil adalah mendatar secara lalai, cuma tambahkan kelas kedua, .nav-stacked, untuk menjadikannya kelihatan disusun secara menegak.

Tab bertindan

<ul class = "nav-tabs nav-stacked" > 
  ...
</ul>

Pil bertindan

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Dropdown Untuk komponen nav lanjutan

Menu yang kaya dipermudahkan

Menu lungsur turun dalam tab Bootstrap dan pil adalah sangat mudah dan hanya memerlukan sedikit HTML tambahan dan pemalam jQuery yang ringan.

Pergi ke halaman Javascript untuk membaca dokumen tentang memulakan dropdown dalam Bootstrap.

Tab dengan lungsur turun

<ul class = "nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "turun turun-togol" 
       data-toggle = "dropdown"
       href = "#" >
        Jatuh turun
        <b class = "karet" ></b> 
      </a>
    <ul class = "menu lungsur" > 
      <!-- pautan -->
    </ul>
  </li>
</ul>

Pil dengan dropdown

<ul class = "pil nav nav" > 
  <li class = "dropdown" > 
    <a class = "turun turun-togol" 
       data-toggle = "dropdown"
       href = "#" >
        Jatuh turun
        <b class = "karet" ></b> 
      </a>
    <ul class = "menu lungsur" > 
      <!-- pautan -->
    </ul>
  </li>
</ul>

Senarai Nav Bina nav bertindan yang ringkas, bagus untuk bar sisi

Navigasi gaya aplikasi

Senarai navigasi menyediakan cara yang mudah dan mudah untuk membina kumpulan pautan navigasi dengan pengepala pilihan. Ia paling sesuai digunakan dalam bar sisi seperti Finder dalam OS X.

Dari segi struktur, ia dibina pada gaya nav teras yang sama seperti tab dan pil, jadi penggunaan dan penyesuaian adalah mudah.

Dengan ikon

Senarai navigasi juga mudah untuk dilengkapi dengan ikon. Tambahkan <i>teg yang betul dengan kelas dan anda sudah bersedia.

Pembahagi mendatar

Tambahkan pembahagi mendatar dengan mencipta item senarai kosong dengan class .divider, seperti:

<ul class = "nav nav-list" > 
  ...
  <li class = "pembahagi" ></li> 
  ...
</ul>

Contoh senarai nav

Ambil senarai pautan dan tambah class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Pengepala senarai
  </li>
  <li class = "aktif" > 
    <a href = "#" > Laman Utama </a> 
  </li>
  <li>
    <a href = "#" > Perpustakaan </a> 
  </li>
  ...
</ul>

Contoh dengan ikon

Contoh yang sama, tetapi dengan <i>tag untuk ikon.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "buku-ikon" ></i> 
      Perpustakaan
    </a>
  </li>
  ...
</ul>

Nav boleh tab Hidupkan tab melalui javascript

Apa yang disertakan

Hidupkan tab anda dengan pemalam mudah untuk menogol antara kandungan melalui tab. Bootstrap menyepadukan tab boleh tab dalam empat gaya: atas (lalai), kanan, bawah dan kiri.

Menukar antara mereka adalah mudah dan hanya memerlukan perubahan markup yang sangat sedikit.

Contoh jadual

Untuk menjadikan tab boleh tab, bungkus .nav-tabsdalam div lain dengan class .tabbable.

Saya di Bahagian 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Pemalam jQuery tersuai

Semua tab boleh tab dikuasakan oleh pemalam jQuery kami yang ringan. Baca lebih lanjut tentang cara menghidupkan tab boleh tab pada halaman dokumen javascript.

Dapatkan javascript →

Penanda terus terang

Menggunakan tab boleh tab memerlukan div pembalut, satu set tab dan satu set anak tetingkap kandungan boleh tab.

<div class = "tablet" > 
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Bahagian 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Bahagian 2 </a></li>  
  </ul>
  <div class = "kandungan tab" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Saya berada di Bahagian 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Apa khabar, saya di Bahagian 2. </p>
    </div>
  </div>
</div>

Boleh tab dalam mana-mana arah

Tab di bahagian bawah

Balikkan susunan HTML dan tambahkan kelas untuk meletakkan tab di bahagian bawah.

Saya di Bahagian A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "tab boleh tab-di bawah" > 
  <div class = "kandungan tab" > 
    ...
  </div>
  <ul class = "nav-tabs" > 
    ...
  </ul>
</div>

Tab di sebelah kiri

Tukar kelas untuk meletakkan tab di sebelah kiri.

Saya di Bahagian A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "tab boleh tab-kiri" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "kandungan tab" > 
    ...
  </div>
</div>

Tab di sebelah kanan

Tukar kelas untuk meletakkan tab di sebelah kanan.

Saya di Bahagian A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<div class = "tab boleh tab-kanan" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "kandungan tab" > 
    ...
  </div>
</div>

Contoh navbar statik

Contoh bar navigasi statik (tidak ditetapkan pada bahagian atas) dengan nama projek, navigasi dan borang carian.

Perancah Navbar

Navbar hanya memerlukan beberapa div untuk menstrukturnya dengan baik untuk paparan statik atau tetap.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "bekas" > 
      ...
    </div>
  </div>
</div>

Navbar tetap

Betulkan bar navigasi ke bahagian atas atau bawah port pandangan dengan kelas tambahan pada div paling luar, .navbar.

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

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

Apabila anda menampal navbar, ingat untuk mengambil kira kawasan tersembunyi di bawahnya. Tambahkan 40px atau lebih apdding pada <body>. Pastikan anda menambah ini selepas CSS Bootstrap teras dan sebelum CSS responsif pilihan.

Jenama

Pautan mudah untuk menunjukkan jenama atau nama projek anda hanya memerlukan tag anchor.

<a class = "jenama" href = "#" >  
  Nama Projek
</a>

Borang dalam bar navigasi

Untuk menggayakan dan meletakkan borang dengan betul dalam bar navigasi, tambahkan kelas yang sesuai seperti yang ditunjukkan di bawah. Untuk borang lalai, masukkan .navbar-formdan sama ada .pull-leftatau .pull-rightuntuk menjajarkannya dengan betul.

<form class = "navbar-form pull-left" > 
  < jenis input = "teks" kelas = "span2" >  
</form>

Untuk borang carian yang lebih tersuai, tambahkan .navbar-searchkelas untuk menerima gaya khusus dalam bar navigasi.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Cari" >   
</form>

Variasi responsif pilihan

Bergantung pada jumlah kandungan dalam bar atas anda, anda mungkin mahu melaksanakan pilihan responsif. Untuk berbuat demikian, bungkus kandungan nav anda dalam div yang mengandungi, .nav-collapse.collapse, dan tambahkan butang togol bar navigasi, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "bekas" > 
 
      <!-- .btn-navbar digunakan sebagai togol untuk kandungan navbar yang diruntuhkan -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Pastikan anda meninggalkan jenama di luar sana jika anda mahu ia ditunjukkan -->
      <a class = "brand" href = "#" > Nama projek </a>  
 
      <!-- Semua yang anda mahu disembunyikan pada 940px atau kurang, letakkan di sini -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, dll -->
      </div>
 
    </div>
  </div>
</div>

Angkat kepala! Navbar responsif memerlukan pemalam runtuh .

Pautan navigasi

Item Nav mudah untuk ditambah melalui senarai tidak tersusun.

<ul class = "nav" > 
  <li class = "aktif" > 
    <a href = "#" > Laman Utama </a> 
  </li>
  <li><a href = "#" > Pautan </a></li> 
  <li><a href = "#" > Pautan </a></li> 
</ul>

Anda boleh menambah pembahagi dengan mudah pada pautan navigasi anda dengan item senarai kosong dan kelas mudah. Hanya tambah ini antara pautan:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

Penjajaran komponen

Untuk menjajarkan nav, borang carian atau teks, gunakan kelas .pull-leftatau .pull-rightutiliti. Kedua-dua kelas akan menambah apungan CSS ke arah yang ditentukan.

Menambah menu lungsur turun

Menambah dropdown dan dropup pada nav adalah sangat mudah, tetapi memerlukan penggunaan pemalam javascript kami .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          kelas = "turun turun-togol"
          data-toggle = "dropdown" >
          Akaun
          <b class = "karet" ></b> 
    </a>
    <ul class = "menu lungsur" > 
      ...
    </ul>
  </li>
</ul>

Dapatkan javascript →

Teks dalam bar navigasi

Balut rentetan teks dalam <p>teg untuk petunjuk dan warna yang betul.

Mengapa menggunakannya

Navigasi serbuk roti digunakan sebagai cara untuk menunjukkan kepada pengguna tempat mereka berada dalam apl atau tapak, tetapi bukan untuk navigasi utama. Pastikan penggunaannya jarang dan ringkas untuk menjadi yang paling berkesan.

Contoh

Satu contoh ditunjukkan kerana ia mungkin dipaparkan merentas berbilang halaman.

Penanda

HTML ialah senarai standard anda tidak tersusun dengan pautan.

<ul class = "serbuk roti" > 
  <li>
    <a href = "#" > Laman Utama </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Perpustakaan </a> <span class = "divider" > / </span>   
  </li>
  <li class = "aktif" > Data </li> 
</ul>

Penomboran halaman multikon

Bila nak guna

Penomboran ultra ringkas dan gaya minimum yang diilhamkan oleh Rdio, bagus untuk apl dan hasil carian. Blok besar sukar untuk dilepaskan, mudah berskala dan menyediakan kawasan klik yang besar.

Pautan halaman stateful

Pautan boleh disesuaikan dan berfungsi dalam beberapa keadaan dengan kelas yang betul. .disableduntuk pautan yang tidak boleh diklik dan .activeuntuk halaman semasa.

Penjajaran fleksibel

Tambahkan salah satu daripada dua kelas pilihan untuk menukar penjajaran pautan penomboran: .pagination-centereddan .pagination-right.

Contoh

Komponen penomboran lalai adalah fleksibel dan berfungsi dalam beberapa variasi.

Penanda

Dibalut dengan <div>, penomboran hanyalah <ul>.

<div class = "penomboran" > 
  <ul>
    <li><a href = "#" > Sebelumnya </a></li> 
    <li class = "aktif" > 
      <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 = "#" > Seterusnya </a></li> 
  </ul>
</div>

Pager Untuk pautan cepat sebelum dan seterusnya

Mengenai pager

Komponen kelui ialah satu set pautan untuk pelaksanaan penomboran mudah dengan penanda ringan dan juga gaya yang lebih ringan. Ia bagus untuk tapak ringkas seperti blog atau majalah.

Keadaan orang kurang upaya pilihan

Pautan kelui juga menggunakan .disabledkelas umum daripada penomboran.

Contoh lalai

Secara lalai, alat kelui memusatkan pautan.

<ul class = "pager" > 
  <li>
    <a href = "#" > Sebelumnya </a> 
  </li>
  <li>
    <a href = "#" > Seterusnya </a> 
  </li>
</ul>

Pautan sejajar

Sebagai alternatif, anda boleh menyelaraskan setiap pautan ke sisi:

<ul class = "pager" > 
  <li class = "sebelumnya" > 
    <a href = "#" > ← Lebih lama </a> 
  </li>
  <li class = "seterusnya" > 
    <a href = "#" > Lebih baharu → </a> 
  </li>
</ul>

Label	Penanda
Lalai	`<span class="label">Default</span>`
Kejayaan	`<span class="label label-success">Success</span>`
Amaran	`<span class="label label-warning">Warning</span>`
penting	`<span class="label label-important">Important</span>`
info	`<span class="label label-info">Info</span>`
Songsang	`<span class="label label-inverse">Inverse</span>`

Tentang

Lencana ialah komponen kecil dan ringkas untuk memaparkan penunjuk atau kiraan sejenis. Ia biasanya ditemui dalam klien e-mel seperti Mail.app atau pada apl mudah alih untuk pemberitahuan tolak.

Kelas yang ada

Nama	Contoh	Penanda
Lalai	1	`<span class="badge">1</span>`
Kejayaan	2	`<span class="badge badge-success">2</span>`
Amaran	4	`<span class="badge badge-warning">4</span>`
ralat	6	`<span class="badge badge-error">6</span>`
info	8	`<span class="badge badge-info">8</span>`
Songsang	10	`<span class="badge badge-inverse">10</span>`

Unit wira

Bootstrap menyediakan komponen yang ringan dan fleksibel yang dipanggil unit wira untuk mempamerkan kandungan di tapak anda. Ia berfungsi dengan baik pada tapak pemasaran dan kandungan yang berat.

Penanda

Balut kandungan anda dalam bentuk divseperti ini:

<div class = "unit wira" > 
  <h1> Tajuk </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Ketahui lebih lanjut
    </a>
  </p>
</div>

Hai dunia!

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

Ketahui lebih lanjut

Pengepala halaman

Cangkang mudah h1untuk menjarakkan dan membahagikan bahagian kandungan pada halaman dengan sewajarnya. Ia boleh menggunakan elemen h1lalai small, serta kebanyakan komponen lain (dengan gaya tambahan).

<div class = "pengepala halaman" > 
  <h1> Contoh pengepala halaman </h1>
</div>

Lakaran kecil lalai

Secara lalai, lakaran kecil Bootstrap direka untuk mempamerkan imej terpaut dengan penanda yang diperlukan minimum.

Sangat boleh disesuaikan

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.

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

Tindakan Tindakan

Mengapa menggunakan lakaran kecil

Imej kecil (sebelum ini .media-gridsehingga v1.4) bagus untuk grid foto atau video, hasil carian imej, produk runcit, portfolio dan banyak lagi. Ia boleh menjadi pautan atau kandungan statik.

Penanda mudah dan fleksibel

Penanda lakaran kecil adalah mudah— uldengan sebarang bilangan lielemen adalah semua yang diperlukan. Ia juga sangat fleksibel, membenarkan apa-apa jenis kandungan dengan hanya sedikit lagi penanda untuk membungkus kandungan anda.

Menggunakan saiz lajur grid

Akhir sekali, komponen lakaran kenit menggunakan kelas sistem grid sedia ada—seperti .span2atau— .span3untuk mengawal dimensi lakaran kecil.

Penanda itu

Seperti yang dinyatakan sebelum ini, penanda yang diperlukan untuk lakaran kecil adalah ringan dan mudah. Berikut ialah lihat pada persediaan lalai untuk imej terpaut :

<ul class = "gambar kecil" > 
  <li class = "span3" > 
    <a href = "#" class = "gambar kecil" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Untuk kandungan HTML tersuai dalam lakaran kecil, penanda berubah sedikit. Untuk membenarkan kandungan tahap blok di mana-mana sahaja, kami menukar <a>kandungan <div>seperti itu:

<ul class = "gambar kecil" > 
  <li class = "span3" > 
    <div class = "gambar kecil" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Label lakaran kecil </h5>
      <p> Kapsyen lakaran kecil di sini... </p>
    </div>
  </li>
  ...
</ul>

Lagi contoh

Terokai semua pilihan anda dengan pelbagai kelas grid yang tersedia untuk anda. Anda juga boleh mencampur dan memadankan saiz yang berbeza.

lalai ringan

Kelas asas yang ditulis semula

Dengan Bootstrap 2, kami telah memudahkan kelas asas: .alertbukannya .alert-message. Kami juga telah mengurangkan penanda minimum yang diperlukan—tidak <p>diperlukan secara lalai, hanya bahagian luar <div>.

Mesej amaran tunggal

Untuk komponen yang lebih tahan lama dengan kurang kod, kami telah mengalih keluar rupa pembezaan untuk makluman blok, mesej yang disertakan dengan lebih banyak padding dan biasanya lebih banyak teks. Kelas juga telah bertukar kepada .alert-block.

Sangat sesuai dengan javascript

Bootstrap didatangkan dengan pemalam jQuery yang hebat yang menyokong mesej amaran, menjadikannya cepat dan mudah untuk menolaknya.

Dapatkan pemalam »

Contoh makluman

Balut mesej anda dan ikon tutup pilihan dalam div dengan kelas mudah.

× Amaran! Best semak diri anda, anda tidak kelihatan terlalu bagus.

<div class = "makluman" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <strong> Amaran! </strong> Sebaiknya semak diri anda, anda tidak kelihatan terlalu bagus.
</div>

Panjangkan mesej makluman standard dengan mudah dengan dua kelas pilihan: .alert-blockuntuk lebih banyak padding dan kawalan teks dan .alert-headinguntuk tajuk yang sepadan.

Amaran!

Best semak diri anda, anda tidak kelihatan terlalu bagus. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "block alert alert" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 class = "alert-heading" > Amaran! </h4> 
  Sebaiknya semak diri anda, anda tidak...
</div>

Alternatif kontekstual Tambah kelas pilihan untuk menukar konotasi amaran

Ralat atau bahaya

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

<div class = "alert alert-error" > 
  ...
</div>

Kejayaan

× Bagus! Anda berjaya membaca mesej makluman penting ini.

<div class = "alert alert-success" > 
  ...
</div>

Maklumat

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

<div class = "maklumat amaran amaran" > 
  ...
</div>

Contoh dan markup

asas

Bar kemajuan lalai dengan kecerunan menegak.

<div class = "kemajuan" > 
  <div class = "bar" 
       style = " lebar : 60 %; " ></div> 
</div>

berjalur

Menggunakan kecerunan untuk mencipta kesan berjalur (tiada IE).

<div class = "berjalur kemajuan kemajuan" > 
  <div class = "bar" 
       style = " lebar : 20 %; " ></div> 
</div>

Beranimasi

Mengambil contoh berjalur dan menghidupkannya (tiada IE).

<div class = "berjalur kemajuan kemajuan 
     aktif" >
  <div class = "bar" 
       style = " lebar : 40 %; " ></div> 
</div>

Pilihan dan sokongan penyemak imbas

Warna tambahan

Bar kemajuan menggunakan beberapa butang yang sama dan kelas amaran untuk gaya yang konsisten.

Bar berjalur

Sama seperti warna pepejal, kami mempunyai bar kemajuan berjalur yang pelbagai.

Tingkah laku

Bar kemajuan menggunakan peralihan CSS3, jadi jika anda melaraskan lebar secara dinamik melalui javascript, ia akan mengubah saiz dengan lancar.

Jika anda menggunakan .activekelas, .progress-stripedbar kemajuan anda akan menghidupkan jalur dari kiri ke kanan.

Sokongan penyemak imbas

Bar kemajuan menggunakan kecerunan CSS3, peralihan dan animasi untuk mencapai semua kesannya. Ciri ini tidak disokong dalam IE7-9 atau versi Firefox yang lebih lama.

Opera dan IE tidak menyokong animasi pada masa ini.

perigi

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

Lihat, saya dalam perigi!

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

Tutup ikon

Gunakan ikon tutup generik untuk mengetepikan kandungan seperti modal dan makluman.

<a class = "close" > × </a>

Kumpulan butang Sertai butang untuk lebih banyak fungsi seperti bar alat

Kumpulan butang

Amalan terbaik

Contoh lalai

Contoh bar alat

Kotak semak dan perisa radio

Jatuh turun dalam kumpulan butang

Menu lungsur butang Dibina pada kumpulan butang untuk menyediakan menu kontekstual

Butang lungsur turun

Gambaran keseluruhan dan contoh

Contoh markup

Berfungsi dengan semua saiz butang

Memerlukan javascript

Butang pisah turun bawah

Gambaran keseluruhan dan contoh

Saiz

Contoh markup

Menu lungsur

Nav, tab dan pil Navigasi gaya senarai yang sangat disesuaikan

Lalai ringan Penanda yang sama, kelas yang berbeza

Kelas asas yang berkuasa

Bila nak guna

Penjajaran komponen

Tab asas

Pil asas

Boleh Ditindan Jadikan tab atau pil menegak

Bagaimana untuk menyusunnya

Tab bertindan

Pil bertindan

Dropdown Untuk komponen nav lanjutan

Menu yang kaya dipermudahkan

Tab dengan lungsur turun

Pil dengan dropdown

Senarai Nav Bina nav bertindan yang ringkas, bagus untuk bar sisi

Navigasi gaya aplikasi

Dengan ikon

Pembahagi mendatar

Contoh senarai nav

Contoh dengan ikon

Nav boleh tab Hidupkan tab melalui javascript

Apa yang disertakan

Contoh jadual

Pemalam jQuery tersuai

Penanda terus terang

Boleh tab dalam mana-mana arah

Tab di bahagian bawah

Tab di sebelah kiri

Tab di sebelah kanan

Navbar

Contoh navbar statik

Perancah Navbar

Navbar tetap

Jenama

Borang dalam bar navigasi

Variasi responsif pilihan

Pautan navigasi

Penjajaran komponen

Menambah menu lungsur turun

Teks dalam bar navigasi

Serbuk roti

Mengapa menggunakannya

Contoh

Penanda

Penomboran Dua pilihan untuk halaman melalui kandungan

Penomboran halaman multikon

Bila nak guna

Pautan halaman stateful

Penjajaran fleksibel

Contoh

Penanda

Pager Untuk pautan cepat sebelum dan seterusnya

Mengenai pager

Keadaan orang kurang upaya pilihan

Contoh lalai

Pautan sejajar

Label sebaris Label dan anotasi teks

Penunjuk Lencana dan kiraan belum dibaca

Tentang

Kelas yang ada

Komponen tipografi Pengepala halaman dan unit wira untuk membahagikan kandungan