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  的组件赋予了"生命".可以简单的一次性引入所有插件,或者逐个引入到你的页面中."

图片轮播