Bootstrap 基本样式
表格，表单，按钮，图片
基本样式
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
</head>
<body style="margin:20px">
<div class="container">
<div class="row"> /*框架*/
<h2>表单元素</h2>
<h3>基础表单</h3>
/*---------------------------------------------*/
class="form-group" : 调整表单排列效果
class="form-control" : 表单宽度100%，并且样式美化
placeholder="请输入邮箱"
for值=id值
/*---------------------------------------------*/
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密 码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="exampleInputFile">文件上传</label>
<input type="file" id="exampleInputFile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 请勾选
</label>
</div>
<button type="submit" class="btn btn-default">提 交</button>
</form>
/*---------------------------------------------*/
class="form-horizontal" : label 和 input 处于同一行
/*---------------------------------------------*/
<h3>水平排列表单</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮 箱：</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密 码：</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登 录</button>
</div>
</div>
</form>
/*---------------------------------------------*/
class="form-inline" : 所有元素处于同一行
/*---------------------------------------------*/
<h3>行内表单</h3>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">邮 箱：</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">密 码：</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">登 录</button>
</form>
/*---------------------------------------------*/
table-bordered: 表格边框
table-striped : 斑马线效果
table-hover : 鼠标放上效果
table-condensed : 紧凑表格
响应式表格: 将表格包含于<div class="table=responsive"></div>中
/*---------------------------------------------*/
<h2>表格</h2>
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>昵称</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李</td>
<td>四</td>
<td>拉里</td>
</tr>
<tr>
<td>2</td>
<td>王</td>
<td>五</td>
<td>博德</td>
</tr>
<tr>
<td>3</td>
<td>赵</td>
<td>四</td>
<td>詹姆斯</td>
</tr>
</tbody>
</table>
/*---------------------------------------------*/
按钮
/*---------------------------------------------*/
<h2>按钮</h2>
<p>
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-default btn-lg">大号按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary">默认尺寸</button>
<button type="button" class="btn btn-default">默认尺寸</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
<button type="button" class="btn btn-default btn-sm">小号按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">更小的按钮</button>
<button type="button" class="btn btn-default btn-xs">更小的按钮</button>
</p>
/*--------------------------------*/
btn-block : 占据整行
disabled : 50%褪色处理，并且不能点击
/*--------------------------------*/
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">块级按钮</button>
<button type="button" class="btn btn-default btn-lg btn-block">更小的按钮</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg disabled ">块级按钮</button>
<button type="button" class="btn btn-default btn-lg disabled ">更小的按钮</button>
</p>
/*--------------------------------*/
图片 ： 圆角，圆形，简洁边框
/*--------------------------------*/
<img src="xxx.png" class="img-rounded" alt=""> 圆角
<img src="xxx.png" class="img-circle" alt=""> 圆形
<img src="xxx.png" class="img-thumbnail" alt=""> 简洁
</div>
</div>
</body>
