网页制作

Bootstrap3.0学习笔记之按钮与下拉菜单
网页制作 2024/12/22 佚名
3 2

前面的文章算是把Bootstrap CSS部分简单的学习了一遍，应该忽视了比较多的细节问题。不过大部分的内容我都过了一遍，并且用代码实现了一遍，而且看到了真实的效果。挺不错的。那么接下来的几篇文章主要来讲解Bootstrap的组件。那么本文主要来讲解以下内容

1.下拉菜单

2.按钮组

3.按钮式下拉菜单

4.总结

再来熟悉一下这个开始建立一个页面的代码，首先新建一个测试网页加入如下代码


复制代码代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
<script src="/UploadFiles/2021-03-30/<a href="> <script src="<a href="> <![endif]-->
</head>
<body> 的 <script src="/UploadFiles/2021-03-30/jquery-2.0.3.min.js"> <script src="js/bootstrap.min.js"> </body>
</html>

如果你有什么不太了解的话，我在之前的文章当中有过介绍，你可以点击链接进行查看http://www.cnblogs.com/aehyok/p/3398359.html

下拉菜单

用于显示链接列表的可切换、有上下文的菜单。

案例

将下拉菜单触发器和下拉菜单都包裹在.dropdown里，然后添加组成菜单的HTML代码。


复制代码代码如下:
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

可以通过上面的代码发现，里面可能有很多陌生的样式类或者属性。

一个Dropdown按钮和右侧有个小图标caret，当然这个小图标和按钮的文本是平级的。

首先看button按钮中有个dropdown-toggle，还有一个data-toggle属性，根据这个属性来弹出下来列表。

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用，在通过aria-labelledby绑定上面的button按钮。

下来第四个li标签中有个divider其实是一个分割线的样式类。

大概我理解的就这个样子，理解的肯定不到位。

Bootstrap3.0学习笔记之按钮与下拉菜单

对齐选项

给下拉菜单.dropdown-menu加上.text-right使文字右对齐。


复制代码代码如下:
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

只是在上面的代码中的ul标签上添加了一个text-right的样式类。

Bootstrap3.0学习笔记之按钮与下拉菜单

标题

在任何下拉菜单中均可通过添加标题来标明一组动作。


复制代码代码如下:
<h1>下拉菜单</h1>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown header</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>

主要是添加了<li role="presentation" class="dropdown-header">Dropdown header</li> 里面有个.dropdown-header的样式类。

Bootstrap3.0学习笔记之按钮与下拉菜单

禁用的菜单项

给下拉菜单中的<li>加上.disabled禁用链接。

继续修改上面的代码将Something else here行的代码进行替换


复制代码代码如下:<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

主要是在li标签中添加.disabled的样式类。

你运行之后可以查看效果，其实效果和上面的标题样式差不多，当你点击的时候会有一个禁用的图标显示。截不到图。

按钮组

按钮组中的工具提示和弹出框需要特别的设置

当为.btn-group中的元素应用工具提示或弹出框时，必须指定container: 'body'选项，这样可以避免不必要的副作用（例如工具提示或弹出框触发时，会让页面元素变宽和/或失去圆角）。

基本案例

把一系列的.btn按钮放入.btn-group。


复制代码代码如下:
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

通过.btn-group就可以将一组button按钮并且为其添加样式类btn

Bootstrap3.0学习笔记之按钮与下拉菜单

按钮工具栏

把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件。


复制代码代码如下:
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<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>
<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">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">9</button>
</div>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单

尺寸

只要给.btn-group加上.btn-group-*，而不是给组中每个按钮都应用大小类。


复制代码代码如下:
<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>
<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-sm">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">9</button>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单

嵌套

想要把下拉菜单混合到一系列按钮中，就把.btn-group放入另一个.btn-group中。


复制代码代码如下:
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button></p> <p> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单

垂直排列

让一组按钮竖直显示而不是水平显示。


复制代码代码如下:
<div class="btn-group btn-group-vertical">
<a href="#">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>

</a>
<div class="btn-group">
<a href="#">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown </button>
</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单

两端对齐的链接排列

让一组按钮拉长为相同的尺寸，适应父元素的宽度。

特定元素的用法

这只适用<a>元素因为<button>不能应用这些样式。


复制代码代码如下:
<div class="btn-group btn-group-justified">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单

按钮式下拉菜单

把任何按钮放入.btn-group然后加入正确的菜单标记，就可以做成下拉菜单触发器。

单按钮下拉菜单

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


复制代码代码如下:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单

分裂式按钮下拉菜单

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


复制代码代码如下:
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单
只能点击小图标才能出现下来菜单额。

尺寸

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


复制代码代码如下:
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> 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"> 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"> Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu"> ... </ul>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单

通过样式类.btn-lg、 .btn-sm、.btn-xs来控制按钮的大小。

向上弹出式菜单

给父元素添加.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">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>

Bootstrap3.0学习笔记之按钮与下拉菜单

总结

本文主要学习了按钮和下拉菜单，然后是对于按钮和下拉菜单的组合，变化还是蛮多的，样式也不错，但是开始使用还是没那么方便，因为这里的介绍并没有那么详细，学习起来还是有点费劲的。不过没关系，自己多多的实践就可以了，慢慢的领悟吧。

标签：
Bootstrap3.0,按钮,下拉菜单
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
千金楼资源网 Copyright www.htabc.com

评论“Bootstrap3.0学习笔记之按钮与下拉菜单”

暂无“Bootstrap3.0学习笔记之按钮与下拉菜单”评论...
www.htabc.com 千金楼资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
千金楼资源网 Copyright www.htabc.com