Bootstrap学习（一）
目录：
1、测试代码示例：
2、测试网格系统：
3、测试表格：
4、测试表单：
5、测试按钮：
1、测试代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap学习</title>
<!-- 配置适应移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="bootstrap/js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
</style>
<script type="application/javascript">
$(document).ready(function(){
alert($("#mytable").attributes["class"].nodeValue);
});
</script>
</head>
<body>
<div class="container">
<!--
作者：Remoa
时间：2017-02-19
描述：网格系统测试
-->
<div class="row">
<div class="col-md-3 col-lg-3" style="background-color:blue; height:100px;"></div>
<!-- 距离上一个div的右端有一个列的偏移量-->
<div class="col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1" style="background-color:yellow; height:100px;"></div>
<!-- 因为3 + 3 + 1 + 2 + 4 = 13超过了12，所以这个div会显示在下一行-->
<div class="col-md-2 col-lg-2 col-md-offset-4 col-lg-offset-4" style="background-color:green; height:100px;"></div>
</div>
</div>
<br />
<div class="container">
<div class="row">
<div class="col-md-6">
<!--
作者：Remoa
时间：2017-02-19
描述：表格测试
-->
<table class="table table-striped table-hover table-bordered table-condensed" id="mytable">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>学号</td>
</tr>
</thead>
<tbody>
<tr>
<td>小邓</td>
<td>20</td>
<td>5847</td>
</tr>
<tr>
<td>小王</td>
<td>22</td>
<td>5848</td>
</tr>
<tr>
<td>小陈</td>
<td>21</td>
<td>5858</td>
</tr>
<tr>
<td>小刘</td>
<td>24</td>
<td>5888</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<!--
作者：Remoa
时间：2017-02-19
描述：表单测试
-->
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="account" class="control-label col-md-3">
账户：
</label>
<div class="col-md-9">
<input type="text" name="account" class="form-control" placeholder="请输入账户名"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">
密码：
</label>
<div class="col-md-9">
<input type="password" name="password" class="form-control" placeholder="请输入密码" />
</div>
</div>
<div class="form-group">
<label for="tel" class="col-md-3 control-label">
联系方式：
</label>
<div class="col-md-9">
<input type="text" name="tel" placeholder="请输入联系方式" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="sex" class="col-md-3 control-label">
性别：
</label>
<div class="col-md-9">
<label class="radio-inline">
<input type="radio" name="sex" value="male" checked />男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="female" />女
</label>
</div>
</div>
<div class="form-group">
<label for="hobby" class="col-md-3 control-label">
兴趣爱好
</label>
<div class="col-md-9">
<label class="checkbox-inline">
<input type="checkbox" name="hobby" value="op1" />羽毛球
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" value="op2" />篮球
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" value="op3" />足球
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby" value="op4" />其他
</label>
</div>
</div>
<input type="submit" class="btn btn-primary col-md-offset-3" value="提交" />
<input type="reset" class="btn btn-success col-lg-offset-1" value="重置" />
</form>
</div>
</div>
<div class="row">
<div class="col-md-6">
<!--
作者：Remoa
时间：2017-02-19
描述：按钮测试
-->
<p>按钮组</p>
<div class="btn-group">
<input type="button" class="btn btn-default" value="黄药师" />
<input type="button" class="btn btn-danger" value="王重阳" />
<input type="button" class="btn btn-info" value="欧阳锋" />
<input type="button" class="btn btn-success" value="段智兴" />
<input type="button" class="btn btn-primary" value="洪七公" />
<input type="button" class="btn btn-link" value="周伯通" />
</div>
<p>按钮工具栏</p>
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">«</button>
<button class="btn btn-default">1</button>
<button class="btn btn-default">2</button>
<button class="btn btn-default">3</button>
<button class="btn btn-default">»</button>
</div>
</div>
<p>在按钮组中使用下拉菜单</p>
<div class="btn-group">
<input type="button" class="btn btn-default" value="黄药师" />
<input type="button" class="btn btn-default" value="王重阳" />
<div class="btn-group">
<button class="btn btn-success" data-toggle="dropdown">
其他五绝
</button>
<ul class="dropdown-menu pull-left" role="menu">
<li>
<a href="#">欧阳锋</a>
</li>
<li>
<a href="#">段智兴</a>
</li>
<li>
<a href="#">洪七公</a>
</li>
</ul>
</div>
</div>
<p>垂直排列的按钮组</p>
<div class="btn-group-vertical" style="width:120px;">
<input type="button" class="btn btn-success" value="黄药师" />
<input type="button" class="btn btn-danger" value="洪七公" />
<input type="button" class="btn btn-info" value="欧阳锋" />
<div class="btn-group">
<button class="btn btn-primary" 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>
</ul>
</div>
</div>
<p>分割的按钮下拉菜单</p>
<div class="btn-group">
<button class="btn btn-default">菜单</button>
<button class="btn btn-primary" 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 class="divider"></li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
<p>按钮下拉菜单的大小</p>
<div class="btn-group">
<button class="btn btn-success 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 class="divider"></li>
<li>
<a href="#">更多探险</a>
</li>
</ul>
</div>
<p>搜索栏</p>
<div class="form-group col-md-6">
<div class="input-group">
<input class="form-control" name="search" placeholder="请输入关键字" />
<span class="input-group-btn">
<button class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2、测试网格系统：
答：（1）网格系统（Grid System）：基于响应式的、移动设备优先的、不固定的网格系统。网格系统通过一系列的行和列来创建页面布局。
（2）行（row）必须放置在container内，以便获得适当的对齐（alignment）和内边距（padding）；
（3）内容应该放置在列内，且唯有列可以是行的直接子元素。
（4）col-xs：<768px; col-sm：≥768px; col-md：≥992px; col-lg：≥1200px;
（5）示例代码程序运行结果：
图2.1 测试网格系统
3、测试表格：
答：（1）table用于设置表格样式
①table-striped：设置表格隔行变色
②table-bordered：给表格添加边框
③table-condensed：设置比较紧凑的表格
④table-hover：设置光标移动到表格行上时该行颜色发生变化
（2）thead标签：表格标题行的容器元素；
（3）tbody标签：表格主体中的表格行的容器元素
（4）示例代码运行结果：
图3.1 测试表格
4、测试表单：
答：（1）把标签和控件放在一个带有form-group的class的div中，是获取最佳间距所必需的。然后向所有的文本元素<input>、<textarea>、<select>添加form-control；
（2）将radio和checkbox放在同一行，将input元素放在加上radio-inline、checkbox-inline的label元素中
（3）示例代码运行结果：
图4.1 测试表单
5、测试按钮：
答：（1）btn类：圆角灰色按钮的默认外观
btn-primary：深蓝色
btn-danger：红色
btn-success：绿色
btn-warning：橙色
btn-info：浅蓝色
btn-default：默认按钮，白色
btn-link：看起来像个链接，但同时保持按钮的行为。
（2）按钮组：btn-group，把几个按钮结合起来
btn-toolbar：把几组按钮组结合起来
btn-group-lg、btn-group-sm、btn-group-md、btn-group-xs：对整个按钮组的所有按钮的大小进行调整
btn-group-vertical：让一组按钮垂直堆叠显示，而不是水平堆叠显示
（3）示例代码运行结果：
图5.1 测试按钮
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
