css样式
模板:
注意jquery要放在bootstrap前面,因为bootstrap是基于jquery的,必须先引用才能生效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
</body>
</html>
栅格布局
页面被分均为12格
xs<768px手机 768px
<!-- xs<768px手机 768px<sm平板 990px<md电脑 1200px<lg宽屏电脑 -->
<div class="col-xs-1 col-sm-4 col-md-3 col-lg-4" style="border: 1px solid red">1</div>
<div class="col-xs-2 col-sm-4 col-md-4 col-lg-4" style="border: 1px solid red">2</div>
<div class="col-xs-9 col-sm-4 col-md-5 col-lg-4" style="border: 1px solid red">3</div>
</div>
<div>
<div class="col-xs-4 col-md-1" style="border: 1px solid red">1</div>
<div class="col-xs-4 col-md-2" style="border: 1px solid red">2</div>
<div class="col-xs-4 col-md-9" style="border: 1px solid red">3</div>
</div>
颜色:
muted primary success info warning danger
列偏移:col-xs-offset-4
<div class="row">
<div class="col-xs-4" style="border: 1px solid red">1</div>
<div class="col-xs-4 col-md-offset-4" style="border: 1px solid red">2</div>
<div class="col-xs-4 " style="border: 1px solid blue">3</div>
<div class="col-xs-4 " style="border: 1px solid blue">4</div>
<div class="col-xs-4 col-xs-offset-4" style="border: 1px solid gold">5</div>
<div class="col-xs-4 " style="border: 1px solid gold">6</div>
</div>
列排序:col-xs-push-4 向右推4格
col-xs-pull-4 向左拉4格
<div class="row">
<div class="col-xs-4" style="border: 1px solid gold">4</div>
<div class="col-xs-8" style="border: 1px solid gold">8</div>
<div class="col-xs-4 col-xs-push-8" style="border: 1px solid gold">4</div>
<div class="col-xs-8 col-xs-pull-4" style="border: 1px solid gold">8</div>
<div class="col-xs-4 " style="border: 1px solid gold">4</div>
<div class="col-xs-8 col-xs-pull-4" style="border: 1px solid gold">8</div>
</div>
居中:container居中布局,页面大小为适中;container-fluied页面宽度为100%;
<!--居中布局-->
<div class="container">
<div class="col-xs-4" style="background-color:pink">
<div class="col-xs-4" style="background-color:gold" >1</div>
<div class="col-xs-4" style="background-color:gold">1</div>
<div class="col-xs-4" style="background-color:gold">1</div>
</div>
<div class="col-xs-4" style="background-color:pink">
<div class="col-xs-4" style="background-color:gold">2</div>
<div class="col-xs-4" style="background-color:gold">2</div>
<div class="col-xs-4" style="background-color:gold">2</div>
</div>
<div class="col-xs-4" style="background-color:pink">
<div class="col-xs-4" style="background-color:gold">3</div>
<div class="col-xs-4" style="background-color:gold">3</div>
<div class="col-xs-4" style="background-color:gold">3</div>
</div>
</div>
<!--流式布局 100%屏占比-->
<div class="container-fluid">
<div class="col-xs-4" style="background-color:pink">
<div class="col-xs-4" style="background-color:gold" >1</div>
<div class="col-xs-4" style="background-color:gold">1</div>
<div class="col-xs-4" style="background-color:gold">1</div>
</div>
<div class="col-xs-4" style="background-color:pink">
<div class="col-xs-4" style="background-color:gold">2</div>
<div class="col-xs-4" style="background-color:gold">2</div>
<div class="col-xs-4" style="background-color:gold">2</div>
</div>
<div class="col-xs-4" style="background-color:pink">
<div class="col-xs-4" style="background-color:gold">3</div>
<div class="col-xs-4" style="background-color:gold">3</div>
<div class="col-xs-4" style="background-color:gold">3</div>
</div>
</div>
排版
标题:<h1>-<h6>
副标题:<h1><small>副标题</small></h1>
h1>一级标题<small>副标题</small></h1>
<h2>二级标题<small>副标题</small></h2>
<h3>三级标题<small>副标题</small></h3>
<h4>四级标题<small>副标题</small></h4>
<h5>五级标题<small>副标题</small></h5>
<h6>六级标题<small>副标题</small></h6>
页面主题:page-header
<h1 class="page-header">页面主题</h1>
小号字体:<small>强调字体:<strong>斜体:<em>
<p>普通字体Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid architecto aut beatae dignissimos, ducimus
eaque exercitationem expedita explicabo fuga in, iure molestiae possimus quam quibusdam recusandae sapiente ut
vel!</p>
<p><small>小字体Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid architecto aut beatae dignissimos, ducimus
eaque exercitationem expedita explicabo fuga in, iure molestiae possimus quam quibusdam recusandae sapiente ut
vel!</small></p>
<p><strong>粗体Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid architecto aut beatae dignissimos, ducimus
eaque exercitationem expedita explicabo fuga in, iure molestiae possimus quam quibusdam recusandae sapiente ut
vel!</strong></p>
<p><em>斜体Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid architecto aut beatae dignissimos, ducimus
eaque exercitationem expedita explicabo fuga in, iure molestiae possimus quam quibusdam recusandae sapiente ut
vel!</strong></em>
缩略语:<addr title=“解释语”>被解释语</addr>
<abbr title="文本生成">Lorem</abbr>
引用:<blockquote>引用语句</blockquote>
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus deleniti doloribus, error
excepturi exercitationem facere fuga, hic labore maiores nam nisi non nostrum perspiciatis praesentium
tempora temporibus totam ullam!
</p>
</blockquote>
<blockquote class="pull-right">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus deleniti doloribus, error
excepturi exercitationem facere fuga, hic labore maiores nam nisi non nostrum perspiciatis praesentium
tempora temporibus totam ullam!
</p>
</blockquote>
<blockquote class="pull-left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid delectus deleniti doloribus, error
excepturi exercitationem facere fuga, hic labore maiores nam nisi non nostrum perspiciatis praesentium
tempora temporibus totam ullam!
</p>
</blockquote>
描述:
<dl>
<dt>sjsji</dt>
<dt>shjhg</dt>
</dl>
<dl class="dl-horizontal">
<dt>A</dt>
<dd>a</dd>
<dt>B</dt>
<dd>b</dd>
</dl>
代码块:<pre>代码</pre>
<p> seeion的带标签代码应写成<seeion></p>
<pre>
这里是代码域
<html>
<head>
<body>
</pre>
控件
列表:
<div class="container">
<!-- 无序列表-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!-- 有序列表-->
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ol>
<!-- 无样式列表-->
<ul class="list-unstyled">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<!-- 内联列表:用于导航栏-->
<ul class="list-inline">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
表格:
<!-- 普通表格-->
<table class="table">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>飒飒</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>瑟瑟</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
</table>
<hr/>
<!-- 条纹表格-->
<table class="table table-striped">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>飒飒</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>瑟瑟</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
</table>
<hr/>
<!-- 带边框表格-->
<table class="table table-bordered">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>飒飒</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>瑟瑟</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
</table>
<hr/>
<!-- 带边框条纹表格-->
<table class="table table-bordered table-striped">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>飒飒</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>瑟瑟</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
</table>
<!-- 鼠标悬停表格-->
<table class="table table-hover">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>飒飒</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>瑟瑟</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
</table>
<!-- 紧缩表格-->
<table class="table table-bordered table-striped table-condensed">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>飒飒</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>瑟瑟</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
</table>
<!-- 状态表格-->
<table class="table table-bordered table-striped table-condensed table-condensed">
<tr class="active">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr class="success">
<td>飒飒</td>
<td>男</td>
<td>22</td>
</tr>
<tr class="info">
<td>瑟瑟</td>
<td>男</td>
<td>23</td>
</tr>
<tr class="warning">
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
<tr class="danger">
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
</table>
<!-- 响应式表格-->
<div class="table-responsive">
<table class="table table-bordered table-striped table-condensed table-condensed">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>飒飒</td>
<td>男</td>
<td>22</td>
</tr>
<tr>
<td>瑟瑟</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>滴滴</td>
<td>男</td>
<td>24</td>
</tr>
</table>
表单:
<!--普通表单-->
<h1>普通表单</h1>
<div class="container">
<form rel="form">
<div class="form-group">
用户名:<input type="text" class="form-control">
</div>
<div class="form-group">
密码:<input type="password" class="form-control">
</div>
<div class="form-group">
邮箱:<input type="email" class="form-control">
</div>
<div class="form-group">
上传文件:<input type="file">
</div>
<div class="form-group">
爱好:<input type="checkbox" name="habit">读书
<input type="checkbox" name="habit">看电影
<input type="checkbox" name="habit">玩游戏
</div>
<div>
性别:<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
<div class="form-group">
<input type="submit" value="提交" class="btn">
</div>
<div class="form-group">
</div>
</form>
</div>
<hr>
<!--内联表单-->
<h1>内联表单</h1>
<div class="container">
<form rel="form" class="form-inline">
<div class="form-group">
用户名:<input type="text" class="form-control">
</div>
<div class="form-group">
密码:<input type="password" class="form-control">
</div>
<div class="form-group">
邮箱:<input type="email" class="form-control">
</div>
<div class="form-group">
上传文件:<input type="file">
</div>
<div class="form-group">
<input type="submit" value="提交" class="btn">
</div>
<div class="form-group">
</div>
</form>
</div>
<hr>
<!--水平排列表单-->
<h1>水平排列表单</h1>
<div class="container">
<form rel="form" class="form-horizontaly/">
<div class="form-group">
用户名:<input type="text" class="form-control">
</div>
<div class="form-group">
密码:<input type="password" class="form-control">
上传文件:<input type="file">
</div>
<div class="form-group">
<input type="submit" value="提交" class="btn">
</div>
<div class="form-group">
</div>
<div>
<h1>select</h1>
<select class="form-control" >
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select multiple class="form-control" disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<div>
<h1>文本域</h1>
<textarea class="form-control"></textarea>
</div>
</form>
</div>
<hr>
<!--表单状态-->
<h1>表单状态</h1>
<div class="container">
<form rel="form" class="form-horizontaly/">
<fieldset disabled>
<div class="form-group">
用户名:<input type="text" class="form-control">
</div>
<div class="form-group">
密码:<input type="password" class="form-control">
上传文件:<input type="file">
</div>
<div class="form-group">
<input type="submit" value="提交" class="btn">
</div>
<div class="form-group">
</div>
<div>
<h1>select</h1>
<select class="form-control">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select multiple class="form-control">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<div>
<h1>文本域</h1>
<textarea class="form-control"></textarea>
</div>
</fieldset>
</form>
</div>
<hr>
<!--校验状态-->
<h1>校验状态</h1>
<div class="container">
<form rel="form" class="form-horizontaly/">
<div class="form-group has-error">
用户名:<input type="text" class="form-control">
</div>
<div class="form-group has-feedback">
密码:<input type="password" class="form-control">
上传文件:<input type="file">
</div>
<div class="form-group ">
<input type="submit" value="提交" class="btn">
</div>
<div>
<h1>select</h1>
<select class="form-control has-success" >
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<select multiple class="form-control" disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<div>
<h1>文本域</h1>
<textarea class="form-control has-warning"></textarea>
</div>
</form>
</div>
<hr>
<!--控件尺寸-->
<h1>控件尺寸</h1>
<div class="container">
<form rel="form" class="form-horizontaly/">
<div class="form-group input-lg">
用户名:<input type="text" class="form-control">
</div>
<div class="form-group input-md">
密码:<input type="password" class="form-control">
上传文件:<input type="file">
</div>
<div class="form-group ">
<input type="submit" value="提交" class="btn">
</div>
<div>
<h1>select</h1>
<select class="form-control " >
<option class="form-control input-lg">A</option>
<option class="form-control input-md">B</option>
<option class="form-control input-xs">C</option>
</select>
<select multiple class="form-control" disabled>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
<div>
<h1>文本域</h1>
<textarea class="form-control has-warning"></textarea>
</div>
</form>
</div>
<hr>
图片:
<div class="img">
<img src="img/timg.jpg" class="img-circle">
</div>
<div class="img">
<img src="img/timg.jpg" class="img-responsive">
</div>
<div class="img">
<img src="img/timg.jpg" class="img-rounded">
</div>
<div class="img">
<img src="img/timg.jpg" class="img-thumbnail">
</div>
响应式工具:
div class="row">
<div class="col-xs-12 col-sm-0">
<span class="visible-xs">手机可见</span>
</div>
<div class="col-xs-0 col-sm-12">
<span class="visible-sm">平板可见</span>
</div>
<div class="col-sm-0 col-md-12">
<span class="visible-md">电脑可见</span>
</div>
<div class="col-md-0 col-sm-12">
<span class="visible-lg">大屏可见</span>
</div>