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

2021-03-20 18:46 jianzhan

前面的文章内容算是把Bootstrap CSS一部分简易的学习培训了1遍,应当忽略了较为多的细节难题。但是绝大多数的內容我都过了1遍,而且用编码完成了1遍,并且看到了真正的实际效果。挺非常好的。那末接下来的几篇文章内容关键来说解Bootstrap的组件。那末本文关键来说解下列內容

1.往下拉菜单

2.按钮组

3.按钮式往下拉菜单

4.总结

再来熟习1下这个刚开始创建1个网页页面的编码,最先新建1个检测网页页面添加以下编码


拷贝编码
编码以下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap</title>
<meta charset="UTF⑻">
<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="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->
</head>
<body> 的 <script src="js/jquery⑵.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</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="⑴" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="⑴" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="⑴" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="⑴" href="#">Separated link</a></li>
</ul>
</div>

能够根据上面的编码发现,里边将会有许多生疏的款式类或特性。

1个Dropdown按钮和右边有个小标志caret,自然这个小标志和按钮的文字是平级的。

最先看button按钮中有个dropdown-toggle,也有1个data-toggle特性,依据这个特性来弹出下来目录。

紧接着ul标识的dropdown-menu应当是和上面button按钮的款式类dropdown-toggle协同应用,在根据aria-labelledby关联上面的button按钮。

下来第4个li标识中有个divider实际上是1个切分线的款式类。

大约我了解的就这个模样,了解的毫无疑问不到位。

对齐选项

给往下拉菜单.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="⑴" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="⑴" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="⑴" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="⑴" href="#">Separated link</a></li>
</ul>
</div>

只是在上面的编码中的ul标识上加上了1个text-right的款式类。

题目

在任何往下拉菜单中都可根据加上题目来标出1组姿势。


拷贝编码
编码以下:

<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="⑴" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="⑴" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="⑴" 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="⑴" href="#">Separated link</a></li>
</ul>
</div>

关键是加上了<li role="presentation" class="dropdown-header">Dropdown header</li> 里边有个.dropdown-header的款式类。

禁用的菜单项

给往下拉菜单中的<li>再加.disabled禁用连接。

再次改动上面的编码将Something else here行的编码开展更换


拷贝编码
编码以下:
<li class="disabled" role="presentation"><a role="menuitem" tabindex="⑴" href="#">Something else here</a></li>

关键是在li标识中加上.disabled的款式类。

你运作以后能够查询实际效果,实际上实际效果和上面的题目款式类似,当你点一下的情况下会有1个禁用的标志显示信息。截不到图。

按钮组

按钮组中的专用工具提醒和弹出框必须非常的设定

当为.btn-group中的元素运用专用工具提醒或弹出框时,务必特定container: 'body'选项,这样能够防止无须要的不良反应(比如专用工具提醒或弹出框开启时,会让网页页面元素变宽和/或丧失圆角)。

基础实例

把1系列的.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便可以将1组button按钮而且为其加上款式类btn

按钮专用工具栏

把1组<div class="btn-group">组成进1个<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>

规格

要是给.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>

嵌套循环

要想把往下拉菜单混和到1系列按钮中,就把.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>

竖直排序

让1组按钮垂直显示信息而并不是水平显示信息。


拷贝编码
编码以下:

<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>

两边对齐的连接排序

让1组按钮拉长为同样的规格,融入父元素的宽度。

特殊元素的用法

这只可用<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>

按钮式往下拉菜单

把任何按钮放入.btn-group随后添加正确的菜单标识,便可以做成往下拉菜单开启器。

单按钮往下拉菜单

要是更改1些基础的标识,就可以把按钮变为往下拉菜单电源开关。


拷贝编码
编码以下:

<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>

瓦解式按钮往下拉菜单

类似地,瓦解式按钮往下拉菜单也必须一样的更改标识,但要是多1个分开的按钮。


拷贝编码
编码以下:

<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>


只能点一下小标志才可以出現下来菜单额。

规格

往下拉菜单按钮可用全部规格的按钮。


拷贝编码
编码以下:

<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>

根据款式类.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>

总结

本文关键学习培训了按钮和往下拉菜单,随后是针对按钮和往下拉菜单的组成,转变還是蛮多的,款式也非常好,可是刚开始应用還是没那末便捷,由于这里的详细介绍并沒有那末详尽,学习培训起来還是有点费力的。但是没事儿,自身多多的实践活动便可以了,渐渐地的理解吧。