开发者社区> 学堂小助手> 正文

Bootstrap 组件_按钮式下拉菜单 | 学习笔记

简介: 快速学习 Bootstrap 组件_按钮式下拉菜单
+关注继续查看

开发者学堂课程【前端开发框架Bootstrap使用教程Bootstrap 组件_按钮式下拉菜单】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4241


Bootstrap 组件_按钮式下拉菜单


目录:

一、按钮式下拉菜单

二、单按钮下拉菜单

三、分裂式按钮下拉菜单

四、尺寸

五、向上弹出式菜单


一、按钮式下拉菜单

把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。

插件依赖

按钮式下拉菜单依赖下拉菜单插件, 因此需要将此插件包含在你所使用的 Bootstrap 版本中。


二、单按钮下拉菜单

只要改变一些基本的标记,就能把按钮变成下拉菜单的开关。

实例:

<!-- Single button-->

<div class="btn-group">

<button type= "button" class-"btn btn- default dropdowm- toggle"data-toggle="dropdoun" aria-haspopup="true" aria-expanded="false">

Action (span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="#" >Actiont</a></li>

<li><a href="#" >Another action</a></li>

<li><a href="#" >Something else here</a></li>

<li role="separator" class-"divider"></li>

<li><a href="#" >Separated link</a></li>

</ul>

</div>


三、分裂式按钮下拉菜单

相似地,分裂式按钮下拉菜单也需要同样的改变一些标记 ,但只是多一个分开的按钮。

实例:

<!-- Single button-->

<div class="btn-group">

<button type= "button" class-"btn btn- default dropdowm- toggle"data-toggle="dropdoun" aria-haspopup="true" aria-expanded="false">

<span class="caret"></span>

<span class=" sr-only">Toggle Dropdown</span>

</button>

<ul class="dropdown-menu">

<li><a href="#" >Actiont</a></li>

<li><a href="#" >Another action</a></li>

<li><a href="#" >Something else here</a></li>

<li role="separator" class-"divider"></li>

<li><a href="#" >Separated link</a></li>

</ul>

</div>


四、尺寸

按钮式下拉菜单适用所有尺寸的按钮。

实例:

<!-- Large button group -->

<div class="btn-group">

<button class="btn btn-default btn-1g dropdown-toggle" type="button" data- toggle="dropdown" aria-haspopup="true"  aria-expanded="false">

Large button <span class="caret"></span>

</button>

<ul class="dropdown- menu" >

</ul>

</div>

<!-- Small button group -->

<div class-"btn-group">

<button class="btn btn-default btn-sm dropdown-toggle" type-"button" data- toggle= "dropdown" aria-haspopup="true"  aria- expanded="false">

Small button <span class="caret"></span>

</button>

<ul class="dropdown-menu">

</ul>

</div>

<!-- Extra small button group -->

<div class-"btn-group">

<button class-"btn btn-default btn-xs dropdown-toggle" type="button" data- toggle="dropdown" aria-haspopup=" true" aria-expanded="false">

Extra 5nal1 button <span class-"caret"></spans

</button>

<ul class="dropdowt-menu">

<!-- Dropdown menu links -->

</u1>

</d1v>


五、向上弹出式菜单

给父元素添加.dropup 类就能使触发的下拉菜单朝上方打开。

实例:

<div class="btn-group dropup">

<button type="button" class="btn btn-default" >Dropup</button>

<button type= "button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

<span class="caret"></span>

<span class=" sr-only">Toggle Dropdown</span>

</button>

<ul classa=" dropdown-menu">

<!-- Dropdown menu links -->

</ul>

</div>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Bootstrap3.0入门学习系列规划[持续更新]
详情请看http://aehyok.com/Blog/Detail/5.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:http://www.cnblogs.com/aehyok/p/3981965.html 感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。
482 0
Bootstrap学习笔记(实习第2天)
1、学习网站: http://www.bootcss.com/ 2、页面中加入下面代码即可调用bootstrap。 &lt;!-- 新 Bootstrap 核心 CSS 文件 加到head中 --&gt; &lt;link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min
1551 0
angular定制组件-bootstrap(css框架)
需要的文件 bootstrap.css ui-bootstrap-tpls.js 模态框 angular定制的bootstrap的模态框,可以方便地将视图与控制器绑定。 模块的定义与模块的控制器: //定义模块时引入依赖 angular .module('myApp', [ 'ui.bootstrap' ]); //定义控制器时传入依赖 angu
1714 0
Android之EditText组件学习
一、基础学习 1.Button是TextView的一个子类,所以按钮本身是一个特殊的文本,属性和TextView相似 2.EditText类似html里的input type="text",是TextView的一个子类 二、实例 1: package org.
633 0
29_Bootstrap 组件_路径导航,标签,徽章 | 学习笔记
快速学习 29_Bootstrap 组件_路径导航,标签,徽章
37 0
30_Bootstrap组件_巨幕,页头,缩略图|学习笔记
快速学习30_Bootstrap组件_巨幕,页头,缩略图
32 0
bootstrap-daterangepicker:最好用的日期范围选择组件
bootstrap-daterangepicker:最好用的日期范围选择组件
65 0
【鸿蒙 HarmonyOS】UI 组件 ( 多选按钮 | Checkbox 组件 )
【鸿蒙 HarmonyOS】UI 组件 ( 多选按钮 | Checkbox 组件 )
26 0
使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
使用ElementUi的table组件自定义添加升序、降序按钮和点击事件及排序
8403 0
1783
文章
0
问答
来源圈子
更多
技术图谱:由专家组参与技术图谱的绘制与编写,知识与实践的结合让开发者们掌握学习路线与逻辑,快速提升技能 电子书:电子书由阿里内外专家打造,供开发者们下载学习,更与课程相结合,使用户更易理解掌握课程内容 训练营:学习训练营 深入浅出,专家授课,带领开发者们快速上云 精品课程:汇集知识碎片,解决技术难题,体系化学习场景,深入浅出,易于理解 技能自测:提供免费测试,摸底自查 体验实验室:学完即练,云资源免费使用
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载