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