01-流体布局
流体布局,就是使用百分比来设置元素的宽度,元素的高度值固定,
calc()：可以通过计算的方式给元素添加尺寸,比如:width:calc(25%-4px);
box-sizing：content-box默认的盒子计算方式 2.border-box 盒子的计算方式从边框开始,盒子的尺寸,边框和内填充算在盒子内
02-响应式布局
响应式布局就是使用媒体查询的方式,通过查询浏览器的宽度,在不同的宽度下应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局,响应式布局的页面可以适配多种终端屏幕(pc,平板,手机)
操作代码:
@media(max-width:1200px){
div{
width:25%
}
}
03-bootstrap介绍
简单、直观、强悍的前端开发框架，让web开发更迅速、简单。
来自Twitter，是目前很受欢迎的前端框架之一。
Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。移动优先，响应式布局开发。
04-bootstrap容器
1.流体容器
container-fluid流体容器
<div class="container-fluid">流体容器</div>
2.响应式固定容器
container
判断区间
1170
970
750
100%
<div class="container">响应式固定容器</div>
3.bootstrap响应式查询区间:
大于等于768
大于等于992
大于等于1200
4.bootstrap栅格系统
bootstrap将页面横向分为12等分,按照12等分定义了不同宽度等分的样式类,这些样式类组成了一套响应式,移动设备优先的流式栅格系统
col-log->1200排成一行,<1200 分别占一行
col-md->992排成一行, <992分别占一行
col-sm->768排成一行,小于768分别占一行
col-xs-始终占一行
列偏移
col-lg-offset-
col-md-offset-
col-sm-offset-
col-xs-offset-
bootstrap按钮
btn声明按钮
btn-default默认按钮样式
btn-primay卓越首位
btn-success
btn-info
btn-warning
btn-danger
btn-link
btn-lg
btn-md
btn-sx
btn-block宽度是父元素宽度100%的按钮
active
disabled
btn-group定义按钮组
bootstrap表单
- form声明一个表单域
- form-inline 内联表单域
- form-horizontal 水平排列表单域
- form-group 表单组、包括表单文字和表单控件
- form-control 文本输入框、下拉列表控件样式
- checkbox checkbox-inline 多选框样式
- radio radio-inline 单选框样式
- input-group 表单控件组
- input-group-addon 表单控件组物件样式
- input-group-btn 表单控件组物件为按钮的样式
- form-group-lg 大尺寸表单
- form-group-sm 小尺寸表单
bootstrap图片
img-responsive声明响应式图片
bootstrap字体图标
通过字体代替图标,font文件夹需要和css文件夹在同一级目录
bootstrap导航条
1.navbar声明导航条
2.navbar-default 声明默认的导航条的样式
3.navbar-inverse 声明反白的导航条样式
4.navbar-static-top 去掉导航条的圆角
5.navbar-fixed-top 固定到顶部的导航条
6.navbar-fixed-bottom 固定到底部的导航条
7.navbar-header 声明logo的容器
8.navbar-brand 针对logo等固定内容的样式
9.nav navbar-nav 定义导航条中的菜单
10.navbar-form 定义导航条中的表单
11.navbar-btn 定义导航条中的按钮
12.navbar-text 定义导航条中的文本
13.navbar-left 菜单靠左
14.navbar-right 菜单靠右
路径导航
<olclass="breadcrumb">
<li><ahref="#">Home</a></li>
<li><a href="#">Library</a></li>
<liclass="active">Data</li>
</ol>
巨幕
<divclass="jumbotron">
<divclass="container">
...
</div>
</div>
bootstrap模态框
1.modal声明一个模态框
2.modal-dialog定义模态框尺寸
3.modal-lg定义大尺寸模态框
4.modal-sm定义小尺寸模态框
5.modal-header
6.modal-body
7.modal-footer
bootstrap下拉菜单
1.drapdown-toggle
2.dropdown-menu
bootstrap 隐藏类
1.hidden-xs
2.hidden-sm
3.hidden-md
4.hidden-lg
)
)
