Bootstrap3系列:下拉菜单

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 示例效果

Bootstrap3系列:下拉菜单

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>

Bootstrap3系列:下拉菜单

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>

Bootstrap3系列:下拉菜单

上一篇:Eclipse properties.config.yml 配置文件中文编码问题。Eclipse 配置文件插件解决方案


下一篇:javaIO流实现读写txt文件