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="max-width:90%"> <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>
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>
Segitiga kecil mengawal menu lungsur turun secara bebas
tutorial bootstrap"]
Atas ialah kandungan terperinci Apakah label butang bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!