Apakah label butang bootstrap?

Butang Bootstrap boleh menjadi: 1. teg, sintaks ""; 2. teg butang, sintaks "> ;"; 3. Teg input jenis butang, sintaks "".

Persekitaran pengendalian tutorial ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Butang bootstrap boleh jadi: teg , teg butang, teg input jenis butang

1. kelas btn

Kelas butang asas, tambah teg, teg butang , teg input jenis butang ditukar kepada gaya butang asas di bawah tali but.

<div style="margin-bottom:15px">
  <a href="#">查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button type="submit">结账</button>
  </div>
  <div style="margin-bottom:15px">
  <input type="button" value="设置">
  </div>

Gaya asal untuk teg, teg butang, teg input jenis butang

Digunakan untuk teg, teg butang, teg input jenis butang Label .

Tambahkan gaya butang lalai bootstrap pada teg di atas.

<div style="margin-bottom:15px">
  <a class="btn" href="#">查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn" type="submit">结账</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn" type="button" value="设置">
  </div>

teg, teg butang, gaya teg input jenis butang selepas menetapkan kelas btn

2. btn-kelas utama , btn -kelas info, kelas btn-kejayaan, kelas amaran btn, kelas bahaya-btn, kelas songsang btn

<div style="margin-bottom:15px">
  <a class="btn btn-primary" href="#">.btn .btn-primary</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info" type="submit">.btn .btn-info</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-success" type="button" value=".btn .btn-success">
  </div>
  <div style="margin-bottom:15px">
  <a class="btn btn-warning" href="#">.btn .btn-warning</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-danger" type="submit">.btn .btn-danger</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-inverse" type="button" value=".btn .btn-inverse">
  </div>

.btn .btn -* Gaya butang

3. btn-kelas besar, btn-kelas kecil, btn-mini kelas

digunakan untuk menetapkan saiz label, Nampak tak berkesan.

 <div style="margin-bottom:15px">
  <a class="btn btn-primary btn-large" href="#">.btn .btn-primary</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info btn-small" type="submit">.btn .btn-info</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-success btn-mini" type="button" value=".btn .btn-success">
  </div>

Gaya selepas menggunakan btn-kelas besar, btn-kelas kecil, btn-mini kelas

4 >

digunakan di dalam label butang untuk menambah ikon pada butang. Tidak berjaya.

<div style="margin-bottom:15px">
  <a class="btn btn-primary btn-large" href="#"><i class="icon-comment icon-white"></i> 查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info btn-small" type="submit"><i class="icon-shopping-cart"></i> 结账</button>
  </div>

Gaya selepas menambah i tag

5. Kumpulan butang

-btn -kelas kumpulan: digunakan untuk mengandungi kumpulan kumpulan butang.

-btn-toolbar class: digunakan untuk memaparkan berbilang kumpulan butang bersebelahan dengan ruang di antaranya.

<div class="btn-toolbar">
  <div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
  </div>
  
  <div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
  </div>
 </div>

6 Butang dengan menu lungsur turun

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">字体<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">黑体</a></li>
  <li><a href="#">宋体</a></li>
  <li><a href="#">仿宋</a></li>  
  </ul>
  </div>

tag div: gunakan Mengandungi butang dengan menu lungsur turun dan menu lungsur.

kelas-btn-group
teg: butang dengan menu lungsur, yang boleh mengandungi teg rentang dan nama butang.
-kelas lungsur-togol: Tambahkan gaya pada butang menu lungsur.
-data-toggle attribute:
Selepas menetapkan data-toggle="dropdown", anda boleh mengawal pop timbul dan runtuh menu lungsur dengan mengklik butang.
tag rentang
-kelas karet: tambahkan logo lungsur segi tiga
teg ul: mengandungi kandungan menu lungsur
-kelas menu lungsur
teg li: mengandungi setiap item senarai

Butang dengan menu lungsur turun

<div class="btn-group">
   <a class="btn" href="#">字体</a>
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">黑体</a></li>
  <li><a href="#">宋体</a></li>
  <li><a href="#">仿宋</a></li>  
  </ul>
  </div>

Ekstrak nama butang dan masukkan ke dalam teg yang berasingan.

Segitiga kecil mengawal menu lungsur turun secara bebas

[Cadangan berkaitan: "

tutorial bootstrap"]

Atas ialah kandungan terperinci Apakah label butang bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!