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 相关文章推荐
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
react-router实现跳转传值的方法示例
May 27 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
微信小程序多音频播放进度条问题
Aug 28 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
中专毕业生自荐信
2013/11/16 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
商业活动邀请函
2014/02/04 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
新手入门Mysql--概念
2021/06/18 MySQL
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL