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.

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.

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>

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:

• Rumah
• Profil
• Mesej

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

• Rumah
• Profil
• Mesej

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

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

• Rumah
• Profil
• Mesej

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

Pil bertindan

• Rumah
• Profil
• Mesej

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

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

• Rumah
• Tolong
• Jatuh turun
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Rumah
• Tolong
• Jatuh turun
  • Action
  • Another action
  • Something else here
  • Separated link

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

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>

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.

Pudar dalam tab

Untuk membuat tab pudar, tambahkan .fadepada setiap .tab-pane.

Memerlukan pemalam jQuery

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 →

Contoh jadual

Untuk menjadikan tab boleh tab, buat .tab-paneID unik untuk setiap tab dan bungkusnya dengan .tab-content.

Untuk tab yang dijajarkan ke kanan atau kiri, bungkus .nav-tabsdan .tab-contentdalam .tabbable.

Penanda terus terang

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

<div class = "tabable" > <!-- Hanya diperlukan untuk tab kiri/kanan -->  
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Bahagian 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Bahagian 2 </a></li>  
  </ul>
  <div class = "kandungan tab" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Saya berada di Bahagian 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Apa khabar, saya di Bahagian 2. </p>
    </div>
  </div>
</div>

Tab di bahagian bawah

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

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

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

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

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 padding 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-searchpada formdan .search-querypada input untuk 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>

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 .pull-leftor.pull-right utiliti. 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 <.navbar-text>, biasanya pada <p>tag 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.

• Rumah

• Laman Utama /
• Perpustakaan

• Laman Utama /
• Perpustakaan /
• Data

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>

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>

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.

• Sebelumnya
• Seterusnya

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

• ← Lebih lama
• Lebih baharu →

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

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

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>

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

<div class = "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.

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.

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

Angkat kepala! Peranti iOS memerlukan href="#"untuk menolak makluman. Pastikan anda memasukkannya dan atribut data untuk ikon tutup sauh. Sebagai alternatif, anda boleh menggunakan <button>elemen dengan atribut data, yang telah kami pilih untuk lakukan untuk dokumen kami. Apabila menggunakan <button>, anda mesti memasukkan type="button"atau borang anda tidak boleh diserahkan.

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

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

Ralat atau bahaya

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

Kejayaan

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

Maklumat

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

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>

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.

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

Tutup ikon

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

×

<button class = "tutup" > × </butang> 

Peranti iOS memerlukan href="#" untuk acara klik jika anda lebih suka menggunakan sauh.

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