<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<!--媒体查询-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--禁止缩放-->
<!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
<<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--如果ie的版本小于9,让ie8识别html5,同时识别媒体查询语句-->
<!--[if lt IE 9]
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
-->
</head>
<body>
<!--
' 下拉菜单：内部用ul li btn实现
使用方法：首先要有一个容器，且class为 dropdown
然后添加下拉btn， 然后用ul li组成列表
-->
<div class="dropdown">
<!--btn btn-default dropdown-toggle 固定写法(可以修改按钮的样式) ; data-toggle="dropdown"：指定为dropdown按钮-->
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<!--指定向下的三角形-->
<span class="caret"></span>
</button>
<!--dropdownMenu1 要与btn的ID保持一样-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<!--li为固定写法，必须要在li上面指定角色为：presentation-->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation" class="dropdown-header"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider" ><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<!--
可以在下拉菜单中添加标题和分割线：
添加标题：只需要在对应的li上面添加 class="dropdown-header"，就能成为标题
分割线：的对应的li上面添加 class="divider" ，就能显示分割线
禁用菜单选项：在对应的li上面添加 class="disabled"，该li将不可点击
-->
<!--
按钮组：针对多个按钮（两端圆角，中间的为直角）
用法：首页要一个容器，并指定: class="btn-group"
然后将按钮放到容器即可
如何控制按钮组的大小：
在容器上面指定class:.btn-group-*
-->
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button type="button" class="btn btn-default">向左</button>
<button type="button" class="btn btn-danger">中间</button>
<button type="button" class="btn btn-info">向右</button>
<button type="button" class="btn btn-default">向左</button>
<button type="button" class="btn btn-primary">中间</button>
<button type="button" class="btn btn-info">向右</button>
</div><br/><br/>
<!--
按钮工具栏:实际上是按钮组的组，里面的按钮分组，外面再分组 （每一组有个默认的距离）
用法：首先准备一个容器，并指定容器的 class="btn-toolbar"
然后就可以容器里面放按钮组了
-->
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">向左</button>
<button type="button" class="btn btn-danger">中间</button>
<button type="button" class="btn btn-info">向右</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">中间</button>
<button type="button" class="btn btn-info">向右</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">中间</button>
<button type="button" class="btn btn-info">向右</button>
</div>
</div>
<!--
按钮组的嵌套：
只须把 .btn-group 放入另一个 .btn-group 中。
-->
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<!--其实就是一个下拉列表-->
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<!--
按钮组的垂直排列：只需要在容器上面指定class为class="btn-group-vertical"即可
-->
<!--
两端对齐(容器有多大，按钮组就有多大):
指定最外面的容器为：btn-group btn-group-justified
然后向容器添加btn-group
-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- 加载Bootstrap核心库 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
02-28
3756
3756
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
