Bootstrap3系列：下拉選單

libingql發表於2016-09-04
boot

1.引用Bootstrap

　　示例引用的Bootstrap版本：v3.3.7

<script src="~/Scripts/jquery-2.2.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

 2.基本例項

2.1 示例程式碼

<div class="dropdown">
    <button type="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>
    </ul>
</div>

　　.dropdown：定義下拉選單框

　　.dropdown-toggle：定義下拉選單的觸發元素

　　data-toggle="dropdown"：觸發下拉選單

　　.dropdown-menu：定義下拉選單條皮膚

2.2 示例效果

3.設定選項

3.1右對齊選單

　　預設下拉選單為左對齊顯式，在.dropdown-menu元素中新增.dropdown-menu-right設定右對齊下拉選單，新增.dropdown-menu-left設定左對齊下拉選單。

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉選單<span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="#">選單項1</a></li>
        <li><a href="#">選單項2</a></li>
        <li><a href="#">選單項3</a></li>
    </ul>
</div>

3.2 禁用選單項

　　在下拉選單中的<li>標籤新增.disabled，禁用選單項。

<div class="dropdown">
    <button type="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 class="disabled"><a href="#">選單項2</a></li>
        <li><a href="#">選單項3</a></li>
    </ul>
</div>

3.3 設計選單分隔線

　　在下拉選單中新增.divider的<li>標籤，即在下拉選單中插入一條分隔線。

<div class="dropdown">
    <button type="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 class="divider"></li>
        <li><a href="#">選單項3</a></li>
    </ul>
</div>

3.4 設計向上彈出選單

　　下拉選單元件框改為.dropup，即可讓下拉選單向上彈出。

<div class="dropup">
    <button type="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 class="divider"></li>
        <li><a href="#">選單項3</a></li>
    </ul>
</div>

相關文章