Bootstrap系列 -- 25. 下拉菜单分割线

 

  在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。

  

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 

 

时间: 2024-10-25 10:19:58

Bootstrap系列 -- 25. 下拉菜单分割线的相关文章

Bootstrap系列 -- 24. 下拉菜单基本用法

  在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为"dropdown.js"的文件.而Bootstrap.js 是依赖jQuery库的.所以在引入Bootstrap.js之前要引入jQuery.js. 这里请注意版本问题   基本使用方式如下: (1) 使用一个名为"dropdown"的容器包裹了整个下拉菜单元素 <div class=&

Bootstrap系列 -- 26. 下拉菜单标题

  Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <

Bootstrap系列 -- 27. 下拉菜单对齐方式

  Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在"dropdown-menu"上添加一个"pull-right"或者"dropdown-menu-right"类名. <h4>使用pull-right类使下拉菜单与父容器右边对齐</h4> <div class="dropdown"> <button class="btn btn-

bootstrap做一个下拉菜单,在第一个菜单选择了省以后,第二个下拉菜单会出来该省的市

问题描述 bootstrap做一个下拉菜单,在第一个菜单选择了省以后,第二个下拉菜单会出来该省的市 bootstrap做一个下拉菜单,在第一个菜单选择了省以后,第二个下拉菜单会出来该省的市 解决方案 http://blog.csdn.net/zoutongyuan/article/details/39431299

基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法_javascript技巧

基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用,在手机浏览器中能弹出下拉列表,却不能选择列表中的菜单项,通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决,替换后并不能解决.(红米手机UC浏览器不支持,小米手机UC浏览器正常,其他暂时未测试) jquery:v1.11.2 bootstrap:v3.3.4 以下为前台页面代码: <div class="input-group">

BootStrap点击下拉菜单项后显示一个新的输入框实现代码_javascript技巧

我的页面上有一个下拉菜单,页面上有一个文本输入框,一个图像上传框,文本输入框默认是显示的,而图片上传框是隐藏的. 假设下拉菜单有两项A和B,我想实现这样的效果:点击A时显示文本输入框,隐藏图像输入框:点击B时显示图像上传框,隐藏文本输入框,请问怎么实现? 用firebug调试的时候发现只有在加载html页面的时候几个click函数才会执行,页面加载好后点击下拉菜单项,这些断点都不会被执行,求解是怎么回事. 我的js代码如下(定义在<head>部分中): <script type=&quo

bootstrap做的下拉菜单如何取得参数

问题描述 bootstrap做的下拉菜单如何取得参数 我用bootstrap做了一个下拉菜单,如何将下拉菜单的参数取得,比如在选择省份的时候,下拉菜单选了山西省,就能将地址信息取得 解决方案 $('#demolist li').on('click', function(){ $('#datebox').val($(this).text()); }); 解决方案二: http://blog.csdn.net/zoutongyuan/article/details/39431299

Bootstrap系列 -- 15. 下拉选择框select

  Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格   <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2&

Bootstrap &lt;基础十二&gt;下拉菜单(Dropdowns)

原文:Bootstrap <基础十二>下拉菜单(Dropdowns) Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap