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读取RSS数据
Jan 20 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
js实现旋转木马效果
Mar 17 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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最新CPU的性能排名
2020/04/02 数码科技
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
PHP线程的内存回收问题
2016/07/08 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
js实现简单的秒表
2020/01/16 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Python中functools模块函数解析
2017/03/12 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
国税会议欢迎词
2014/01/16 职场文书
中学运动会广播稿
2014/01/19 职场文书
不假外出检讨书
2014/01/27 职场文书
询价采购方案
2014/06/09 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python