建设网站需要的Bootstrap介绍与操作

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