BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)


Posted in Javascript onJanuary 03, 2017

布局组件

下拉按钮     

<div class="dropdown">
      <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown">
        帮助<span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation">
          <a role="menuitem" tabindex="-1" href="#"> 关于我们 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 关于我们 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 关于我们 </a>
        </li>
        <li role="presentation">
          <a role="menuitem" href="#"> 关于我们 </a>
        </li>
      </ul>
    </div>

要构建一个下拉菜单,首先,需要一个div加class(dropdown)来包容所有代码(不然下拉菜单定位找不到),然后在加一个触发下拉菜单的按钮(或者a标签),再加一个下拉菜单ul

触发者样式: .dropdown-toggle ; 属性:data-toggle=”dorpdown”

菜单样式: .dropdown-menu 属性:role=”menu” aria-labelledby='id'

其他:role=”presentation”; role=”menuitem”

样式: .divider 分割线; .dropdown-header:下拉菜单头部(不可点击); .dropdown-menu-right:向右对齐的菜单; .dropup:上拉样式(给父类容器添加)

按钮组

<div class="btn-group" role="toolbar">
  <div class="btn-group btn-group-lg">
    <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>
  </div>
    <div class="btn-group btn-group-sm">
    <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 btn-group-xs">
    <button type="button" class="btn btn-default">按钮 7</button>
    <button type="button" class="btn btn-default">按钮 8</button>
    <button type="button" class="btn btn-default">按钮 9</button>
  </div>
</div>

由多个按钮组构成的一个toolbar!

每个按钮组由一个div容器加 .btn-group样式构成(同时可以搭配大小等其他样式)

每个按钮组中由几个按钮组成

利用按钮组和单独的下拉菜单构成分割下拉菜单

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li>
      <a href="#">功能</a>
    </li>
    <li>
      <a href="#">另一个功能</a>
    </li>
    <li>
      <a href="#">其他</a>
    </li>
    <li class="divider"></li>
    <li>
      <a href="#">分离的链接</a>
    </li>
  </ul>
</div>

以上所述是小编给大家介绍的BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
js实现字符全排列算法的简单方法
May 01 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
详解webpack 热更新优化
Sep 13 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 #Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 #Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 #Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 #Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 #Javascript
使用Angular缓存父页面数据的方法
Jan 03 #Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 #Javascript
You might like
多人战的战术与战略
2020/03/04 星际争霸
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
使用python实现个性化词云的方法
2017/06/16 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
财务会计毕业生自荐信
2013/11/02 职场文书
党建工作整改措施
2014/10/28 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python