normalize.css
重置浏览器样式,让浏览器保持一致
bootstrap里边的css 全是响应式的 媒体查询做响应式(适应屏幕大小变化
)
一.移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
二.两个布局模式
container 固定模式布局
container-fluid 流式布局 占整屏(100%宽度)
<div class="container one"></div>
<div class="container-fluid"></div>
三.栅格系统(重点)
每个对应的屏幕尺寸和类前缀要记牢
① row是行,必须放在布局模式中,列必须放在行内
② 布局模式之间的padding(槽宽)可以用子元素的margin 负值来抵消
或者直接padding=0!important;
③ 每行可以放12列,要是放13个,第13个会折行
④ co-lg-num num是这个div占多少列
⑤ 为了让内容适应各种屏幕大小,四个col都写上
⑥ 不同屏幕之间显示隐藏类:
visible- /hidden- 后边跟啥尺寸,啥尺寸下该内容可见/隐藏
⑦ 偏移类:
col-lg-offset-num 设置marginleft值
col-lg-push-num 设置left值
col-lg-pull-num 设置right值
⑧ 行与行之间可以嵌套
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
会有padding值,让布局错乱,加padding=0;去除padding
.one{
height: 200px;
}
.s{
height: 70px;
border: solid 1px blueviolet;
margin-top: 10px;
padding: 0!important;
}
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">1</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">2</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">3</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">4</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">5</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">6</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">7</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">8</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">9</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">10</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">11</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 s">12</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-3 col-md-3 s">1</div>
<div class="col-lg-3 col-sm-3 col-xs-3 col-md-3 s">2</div>
<div class="col-lg-3 col-sm-3 col-xs-3 col-md-3 s">3</div>
<div class="col-lg-3 col-sm-3 col-xs-3 col-md-3 s">4</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 s">1</div>
<div class="col-lg-9 col-md-9 col-xs-9 col-sm-9 s">2</div>
</div>
<div class="row hidden-md">
<div class="col-lg-12 s">11111</div>
</div>
<div class="row hidden-lg">
<div class="col-md-2 s">2222222222</div>
<div class="col-md-10 s">2</div>
</div>
<div class="row">
<div class="col-lg-3 s col-lg-push-2">1</div>
<div class="col-lg-7 s">2</div>
</div>
<div class="row">
<div class="col-lg-3 s col-lg-offset-2">3</div>
<div class="col-lg-7 s">4</div>
</div>
嵌套
<div class="row">
<div class="col-lg-5 s">
<div class="col-lg-4 s">1</div>
<div class="col-lg-4 s">1</div>
<div class="col-lg-4 s">1</div>
</div>
<div class="col-lg-7 s"></div>
</div>
将两个元素换位置
<div class="row">
<div class="col-lg-5 s col-lg-push-7">1</div> <!--push left值-->
<div class="col-lg-7 s col-lg-pull-5">2</div>
</div>
</div>
执行结果如下图
四.排版(重点)
所有内容都要写在<div class=“container/container-fluid”><\div>中
① h1~h6标签用class类引入其中,class=small或<small>标签字体大小为85%,用来标记副标题
② class=mark文本有背景色,lead 文本字体会变大。本质都是突出文本
③ <del> <s>标签给文本加删除线
④<u> 给文本添加下划线
⑤<stronger> 加粗标签
⑥ <em> <u> 斜体标签
<div class="h1">1 <span class="small">副标题</span></div>
<div class="h2">1</div>
<div class="h3">1</div>
<div class="h4">1</div>
<div class="h5">1</div>
<div class="h6">1</div>
<div class="h5">1 <span class="lead">111111</span></div>
<div class="h6">1 <span class="mark">234</span></div>
<del>11111</del>
<s>111</s>
<u>222</u>
7.文本对齐
添加text-center类
对齐
<div class="text-center">lenorksakfnnnnnnnnnn</div>
<div class="text-left">lenorksakfnnnnnnnnnn</div>
<div class="text-right">lenorksakfnnnnnnnnnn</div>
<div class="text-justify">lenorksakfnnnnnnnnnn</div> <!--两端对齐,这里边为左对齐-->
<div class="text-nowrap">lenorksakfnnnnnnnnnnorksakfnnnnnnnnnnlenorksakfnnnnnnnnnnlenorksakfnnnnnnnnnnlenorksakfnnnnnnnnnnlenorksakfnnnnnnnnn</div>
8.改变字母大小写
text-lowercase,text-uppercase,text-capitalize
改变字母大小写
<div class="text-lowercase">SDJFJFHldkdaknan</div> 全部小写
<div class="text-uppercase">buildkdaknan</div> 全部大写
<div class="text-capitalize">buildkdaknan</div> 首字母大写
9.地址
用<address>标签写
地址
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
10.引用
<blockquote>标签,可以用footer标签标明出处
引用
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
11.列表的类
list-inline 内联列表(水平列表)
list-unstyled 去点 去内边距
list-group 和list-group-item一起使用,可以加边框。若里边的是a 链接,a链接鼠标悬停时还会变色
自定义列表:dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。
列表
<ul class="list-unstyled"> 去点去内边距
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="list-group"> 列表运行结果如下图一
<li class="list-group-item"><a class="list-group-item" href="#">1</a></li>
<li class="list-group-item"><a class="list-group-item" href="#">2</a></li>
<li class="list-group-item"><a class="list-group-item" href="#">3</a></li>
<li class="list-group-item"><a class="list-group-item" href="#">4</a></li>
</ul>
自定义列表
<dl class="dl-horizontal"> 水平类
<dt>...</dt>
<dd>...</dd>
</dl>
12.表格
table-striped 条纹状表格
table-bordered 给表格加边框
table-hover 鼠标悬停表格
table-condensed 紧缩表格
table-responsive 响应式表格,表格随父容器的大小而变化
表格状态类:给表格加颜色 (只能给tr标签上加)
success info warning active
表格
<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
<tr class="active">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="success">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="info">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="warning">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
13.表单
form-control :宽度100%,会一个占一行
form-group: margin-bottom:15px
form-inline:内联表单(表单内容在一行)
水平排列表单:
用栅格参数 col-lg-num
control-label 文本居右
边框颜色:
has-success,has-info,has-success
表单
<form action="">
<label for="" class="form-group">姓名:</label>
<input type="text" class="form-control"/>
</form>
<form action="" class="form-inline">
<label for="">姓名:</label>
<input type="text"/><label for="">姓名:</label>
<input type="text"/><label for="">姓名:</label>
<input type="text"/>
</form>
水平排列表单
<form action="" class="form-horizontal">
<div class="form-group">
<label for="" class="col-lg-5 control-label">姓名:</label>
<div class="col-lg-7"><input type="text" class="form-control" /></div>
</div>
<div class="form-group">
<label for="" class="col-lg-5 control-label">姓名:</label>
<div class="col-lg-7"><input type="text" class="form-control" /></div>
</div>
</form>
选项框
<div class="form-group">
<div class="checkbox">
<input type="checkbox"/>1111111
</div>
</div>
<div class="form-group">
<div class="radio"><input type="radio"/>
1111111</div>
</div>
14.按钮的类
btn btn-default btn-success btn-info btn-warning btn-primary btn-danger 给按钮加各种背景色
btn-link 将按钮转化为a链接
<button class="btn btn-default">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>
将a链接转化为按钮
<a href="" class="btn btn-warning">百度</a>
15.图片的类
img-circle 图片变成圆形,长方形变成椭圆
img-rounded 图片弧角
img-thumbnail 图片加线条和弧角
img-responsive 图片响应式
<img src="./img/1.jpg" alt="" class="img-circle"/>
<img src="./img/1.jpg" alt="" class="img-responsive"/><!--图片响应式-->
<img src="./img/1.jpg" alt="" class="img-rounded"/>
<img src="./img/1.jpg" alt="" class="img-thumbnail"/>
16.文本颜色类
text-danger text-info text-success text-warning
文本背景颜色类
bg-danger bg-info bg-warning bg-success
<p class="text-danger bg-danger">leromakhfhsjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>
<p class="text-info bg-info">leromakhfhsjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>
<p class="text-success bg-primary">leromakhfhsjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>
<p class="text-warning bg-warning">leromakhfhsjjjjjjjjjjjjjjjjjjjjjjjjjjj</p>
17.快速浮动
pull-right pull-left clearfix
元素浮动会影响它下来的元素布局,用clearfix加给浮动元素的父元素来清除浮动
<div class="clearfix">
<div class="pull-left" style="background-color: #00ffd2;height: 100px;width: 100px"></div>
<div class="pull-right" style="background-color: #e4b9c0;height: 100px;width: 100px"></div>
</div>
<div style="background-color: #00abff;height: 200px;width: 500px"></div>
18.块级元素居中
center-block 也可以让图片居中
<div class="center-block" style="background-color: #00abff;height: 200px;width: 500px"></div>
19.显示隐藏
show hidden
五.组件使用
1.按钮组
class=“btn-toolbar” role=“toolbar”
class=“btn-group”
<div class="btn-toolbar" role="toolbar"> 这个div占一整行
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
</div>
2.进度条组
改进度条进度,更改style中width值,进度条加文字,在div里边写文字
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
3.下拉菜单
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
4.按钮加下拉菜单
<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-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
5.导航栏
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
6.左右点击菜单
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
六.插件使用
插件的效果没办法更改