BootStrap框架总结

BootStrap框架总结:

概述:

Bootstrap是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目.

作用:

开发响应式的页面.

"响应式:就是一个网站能够兼容多个终端";

节约开发成本,提高开发效率.

入门:

下载BootStrap

www.bootcss.com官网地址

模板:

1.导入BootStrap的css.

2.导入jquery的js(1.8+)

3.导入BootStrap的js

4.设置视口(支持移动设备)

"<mata name="viewport" content="width=dievice-width,initial-scale=1">"

5.添加一个布局容器

通过div设置一个class

方式1:class="container" 固定宽度

方式2:class="container-fluid" 类似于100%

核心:

全局CSS:

"设置全局CSS样式:基本的HTML元素均可以通过class设置样式并得到增强效果;还有先进的栅格系统."

媒体查询(了解)

:默认有一些分辨率零界点的阀值""

- 分辨率 屏幕大小 - 分辨率>=1200px 超大屏幕 - 992<=分辨率<1200 中等屏幕 - 768<=分辨率<992 小屏幕 - 分辨率<768 超小屏幕

格栅系统:

"在不同分辨率的屏幕下展示不同的效果,根据不同的上网设备,栅格系统将屏幕分层一系列的行(row)和列(column),由行和列来创建页面布局,注意栅格系统必须放在布局容器内使用"

行:

"通过class = "row" 来设置一个行"

列(最多将视口分为12列)

"通过class属性来设置在不同屏幕时所占的列 n表示每格占的份数"

col-lg-n 大屏

col-md-n 中屏

col-sm-n 小屏

col-xs-n 超小屏

响应式工具:

显示:

visible-xs 超小屏可见

visible-sm 小屏可见

visible-md 中等屏幕可见

visible-lg 大屏幕可见

隐藏:

hidden-xs 嘲笑屏时隐藏

hidden-sm 小屏幕时隐藏

hidden-md 中等屏幕时隐藏

hidden-lg 大屏幕时隐藏

标题:

h1 -- h6

对其方式:(文本)

text-left 左对齐

text-center 居中

text-right 右对齐

列表:

list0unstyled : 移除默认的列表样式

list-inline : 将所有列表项放置同一行

表格:

bootstrap给表格添加了默认样式

tble 普通表格

table-striped 条纹表格(IE8不支持)

table-bordered 边框表格

tabl-hover 带有鼠标悬停的表格

table-condensed 紧缩表格

表单:

垂直表单:

内联表单:(将所有内容放在同一行)

水平表单:

按钮:

btn: 为按钮添加基本样式

btn-default : 默认/标准按钮

btn-primary : 原始按钮样式(未必操作)

btn-success : 表示成功的动作

btn-info : 该样式可用于要弹出信息的按钮

图片:

img-rounded 为图片添加圆角(IE8 不支持)

img-circle 将图片变为图形 (IE8 不支持)

img-responsive ; 图片响应式

class="small":表示最小的

list-unstyled:去掉列表中的原点或者方块

list-inline:把列表横着排列

组件:

"无数可复用的组件,包括字体图标,下拉菜单,导航,警告框,弹出框等更多功能"

下拉选:

导航条:

javaScript 插件:

"jQuery 插件为Bootstrap 的组件赋予了"生命".可以简单的一次性引入所有插件,或者逐个引入到你的页面中."

图片轮播