bootstrap 入门
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bootstrap</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="../scripts/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body style="background-color: #ccc;">
<div class="container" style="background-color: #fff;">
<div class="text-center">bootstrap移动设备优先 封装html css js</div>
<ul class="list-inline"> <!--左浮动-->
<li>html</li>
<li>css</li>
</ul>
<hr/>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<tr>
<td>名字</td><td>年龄</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td><td>学历</td>
</tr>
<tr class="danger">
<td>cat</td><td>12</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td><td>大学本科</td>
</tr>
<tr>
<td>cat2</td><td>22</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td><td>大专</td>
</tr>
</table>
</div>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
<p>栅格</p>
<div class="row">
<div class="col-md-4">.container 固定宽度且响应式
.container-fluid 100%宽度
.h1 ～ .h6
.text-left 文本左对齐
.list-unstyled 无符号
.list-inline(行内块）
.active
.success 成功颜色
.warning 警告颜色
响应式表格
meta http-equiv="X-UA-Compatible" content="IE=edge"</div>
<div class="col-md-4 col-md-offset-4">.container 固定宽度且响应式
.container-fluid 100%宽度
.h1 ～ .h6
.text-left 文本左对齐
.list-unstyled 无符号
.list-inline(行内块）
<p>表格</p>
.table .table-striped 表格隔行变色
.table-bordered 带边框的表格
.table-hover 鼠标悬停效果
</div> </div>
<hr/>
<div class="row">
<div class="col-md-4">.container 固定宽度且响应式
.container-fluid 100%宽度
.h1 ～ .h6
.text-left 文本左对齐
.list-unstyled 无符号
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6" style="height: 100px; background-color: red;"></div>
<div class="col-md-6" style="height:100px;background-color: green;"></div>
</div>
.container 固定宽度且响应式
.container-fluid 100%宽度
.h1 ～ .h6
.text-left 文本左对齐
.list-unstyled 无符号
</div>
</div>
<hr/>
<form class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">password</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="password" placeholder="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">upload</label>
<div class="col-sm-10">
<input type="file">
<p class="help-block">the pic is jpg/gif/png</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">checkbox</label>
<div class="col-sm-10">
<label class="checkbox-inline"><input type="checkbox" > 1 </label>
<label class="checkbox-inline"><input type="checkbox" > 2 </label>
<label class="checkbox-inline"><input type="checkbox" > 3 </label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">intro</label>
<div class="col-sm-10">
<textarea rows="5" placeholder="please input your mes"></textarea>
</div>
</div>
<div class="col-sm-10 col-sm-offset-2">
<button class="btn btn-danger btn-lg" type="button">submit</button>
</div>
</form>
<hr/>
<h2 class="page-header">图片</h2>
<div class="">
<img class="img-responsive img-circle center-block" src="../img/1.png" width="500"/>
<p>meta name="viewport" content="width=device-width,initial-scale=1"
IE兼容模式
meta http-equiv="X-UA-Compatible" content="IE=edge"</p>
</div>
<hr/>
<p class="lead mark">hello</p>
<abbr class="initialism" title="search engine ">seo</abbr>
<blockquote class="blockquote-reverse">
<h1>西游记</h1>
<footer>吴承恩</footer>
</blockquote>
<dl class="dl-horizontal">
<dt>标题1</dt>
<dd>1</dd>
<dt>标题2</dt>
<dd>2</dd>
</dl>
<hr/>
<!--关闭按钮-->
<p style="min-height: 150px; background-color: #36a701">
<button type="button" class="close" id="close" >×</button>
</p>
<script>
// 关闭
$("#close").click(function () {
$("#close").parent().hide();
});
</script>
<!--大屏幕显示大按钮，小屏幕显示小按钮-->
<button type="button" class="btn btn-primary visible-md-block btn-lg">button</button>
<button type="button" class="btn btn-success visible-sm-block btn-md">button</button>
超小屏幕隐藏 my title
<h1 class="hidden-xs">my title</h1>
</div>
<hr/>
.container 固定宽度且响应式
.container-fluid 100%宽度
.h1 ～ .h6
.text-left 文本左对齐
.list-unstyled 无符号
.list-inline(行内块）
<p>表格</p>
.table .table-striped 表格隔行变色
.table-bordered 带边框的表格
.table-hover 鼠标悬停效果
.table-condensed 紧凑的表格 行或单元格背景色 状态类
.active
.success 成功颜色
.warning 警告颜色
响应式表格
.table 放在 .table-responsive元素内，可创建响应式表格
当屏幕宽小于768px 表格会出现滚动条
<p>表单</p>
.form-group 表单分组
.form-control 表单样式 input
.form-inline 用于form元素，使元素一行排列
.form-horizontal 水平排列的表单 详情见 http://v3.bootcss.com/css
.sr-only 隐藏 <p>响应式布局</p>
meta name="viewport" content="width=device-width,initial-scale=1"
IE兼容模式
meta http-equiv="X-UA-Compatible" content="IE=edge" 栅格
列偏移
.col-md-offset-2 向右偏移2个列 .lead 加深
.mark 高亮 百度快照 想改变默认样式 ，直接样式表重写 .mark{} h5标准：
br readonly
html lang="zh-CN"
引入 css js 不需要 type 属性 使用根路径
属性顺序:重要的先写 <div class="" id="" name="" src="" alt="" aria-label="" role=""></div>
少用标签 避免js生成标签
不用 submit <button id="123" type="button">button</button>
样式表 body {} 右花括号占一行 每条样式都换行 heaer, footer {} opacity: .1; 表示 0.1 color:#abc; 小写，简写
class 命名方式：text-center 父级元素加样式 .h1-div-a <h1><div><a>aa</a></div></h1>
简单的写一行就行 .div {color:red;} </body>
</html>