ㄧ.分離式下拉式選單
<div class="component" id="demo">
<div class="btn-group">
<a href="#" class="btn btn-success">Dropdown</a>
<button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="sr-only">Dropdown</span>
</button>
<div class="dropdown-menu">
<div class="dropdown-header">Web language</div>
<a href="#" class="dropdown-item">HTML</a>
<a href="#" class="dropdown-item">CSS</a>
<a href="#" class="dropdown-item">JavaScript</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">More</a>
</div>
</div>
</div>
.demo.component{
padding: 50px;
}
重點:
1.將按鈕上的a跟button調換
2.button添加.dropdown-toggle-split
3.button在添加子元素span.sr-only,將內容的文字放入是不會顯示文字的
4.最後將.Dropdown改成.btn-group