Penjelasan terperinci tentang kemahiran menu lungsur butang Bootstrap component

Penjelasan terperinci tentang kemahiran menu lungsur butang Bootstrap component_javascript

WBOY

Lepaskan： 2016-05-16 09:00:23

asal

2222 orang telah melayarinya

Kumpulan butang juga merupakan komponen bebas Seperti komponen menu lungsur, kumpulan butang perlu bergantung pada pemalam button.js untuk berfungsi dengan baik.

Gabungkan kumpulan

menjadi

<div class="btn-toolbar" role="toolbar">
 <div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>
  <button type="button" class="btn btn-default">3</button>
  <button type="button" class="btn btn-default">4</button>
  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">7</button>
  <button type="button" class="btn btn-default">8</button>
 </div>
 <div class="btn-group">
  <button type="button" class="btn btn-default">9</button>
 </div>
 </div>

Salin selepas log masuk

Menu lungsur butang pada asasnya sama dengan rupa menu lungsur. Satu-satunya perbezaan antara mereka ialah bekas luar div.dropdown digantikan dengan div.btn-group

<div class="btn-group">
 <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  按钮下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
  <li><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="#">菜单列表5</a></li>
 </ul>
 </div>

Salin selepas log masuk

fail bootstrap.css

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
 outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
 padding-right: 8px;
 padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
 padding-right: 12px;
 padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
 -webkit-box-shadow: none;
  box-shadow: none;
}

Salin selepas log masuk

Butang segi tiga ke atas ke bawah

Segitiga ke bawah butang dibuat dengan menambahkan elemen teg span pada teg butang dan nama kelas ialah .caret

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 按钮下拉菜单
 <span class="caret"></span>
</button>

Salin selepas log masuk

Borang segi tiga ini dilaksanakan melalui css Berikut ialah kod sumber bootstrap.css:

.caret {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px solid;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;
}

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Label berkaitan：

bootstrap jatuh ke bawah 按钮菜单

sumber：php.cn

Artikel sebelumnya：Penjelasan terperinci tentang kumpulan butang Bootstrap komponen JS dan kemahiran button_javascript drop-down Artikel seterusnya：Kemahiran pelaksanaan kod_javascript panggilan merentas domain panggilan web Ajax

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang