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 相关文章推荐
iframe窗口高度自适应的实现方法
Jan 08 Javascript
js实现进度条的方法
Feb 13 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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
php &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
validator验证控件使用代码
2010/11/23 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
python self,cls,decorator的理解
2009/07/13 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
Python如何实现单例模式
2016/06/03 面试题
采购经理岗位职责
2014/02/16 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
复活读书笔记
2015/06/29 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技