1. 什么是css框架
概念:
CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作,提高工作效率
产生原因:
提高CSS代码重用效率,基础的代码不需要重复编写
提供统一而规范的css编码规则,有利于团队协作
浏览器兼容性好
2. BootStrap
简介:
BootStrap是当前比较流行的CSS框架之一,他是Twitter推出的一个用于前端开发的开源工具包。
为什么要学习BootStrap:
企业开发多使用某种CSS框架,其中以BootStrap为目前使用居多
BootStrap基本样式-栅格
12列的布局介绍
屏幕尺寸介绍
栅格基本使用方式
1.使用.container( 1170 px)或container-fluid包裹
2.列应当包含在行”row”中
3.列的基本格式: (col-屏幕大小-数字)
<div class="container">
<div class="row">
<div class="col-md-3" style="background-color:#ddd">col-3</div>
<div class="col-md-9" style="background-color:red">col-9</div>
</div> </div>
栅格基本使用方式(二)
1.一行多余12列时将自动换行
2.列偏移
.col-md-offset-n:向右偏移N列
3.嵌套列
在一个col下再使用row产生一个或多个行
排版
1.基本html标签样式
h1-h6、p、mark、del、strong
2.文本对齐
Text-left text-right text-center text-nowrap
3.列表
list-unstyled:去掉标记List-inline:将li显示在一行
表格样式
Table:基本样式
table-striped:条纹表格
table-bordered:带边框表格
table-hover:鼠标悬停
table-condensed:紧缩表格
状态类,可以给单元格设置颜色:
<1>.active
<2>.success
<3>.info
<4>.warning
<5>.danger
响应式表格:table-responsive
表单样式(一)
表单基本样式
Form-control:表单元素的宽度属性为100%
input-group:表单分组(使用表单分组时无需添加row)
checkbox-inline:在一行显示checkbox
Radio-inline:在一行显示radio
Disabled:禁用
Readonly:只读
.has-warning、.has-error 或 .has-success:表单校验
添加图标: has-feedback
控件尺寸:input-lg ,input-sm
表单其他样式:
Form-inline:内联表单
form-horizontal: 水平标签
表单样式(二)
1.按钮
Btn:显示为一个按钮,用于button元素或其它元素
颜色: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger,btn-link
尺寸: btn-lg,btn-sm,btn-xs,btn-block
Disabled:禁用
2.图片
响应式图片: img-responsive
图片形状: img-rounded, img-circle, img-thumbnail
辅助工具(颜色)
1.文字颜色
text-muted
text-primary
text-success
text-info
text-warning
text-danger
2.背景颜色
bg-muted
bg-primary
bg-success
bg-info
bg-warning
bg-danger
辅助工具(位置)
1.浮动
Pull-xx: right:xxx%
Push-xx:left:xxx%
clearfix
2.内容居中
center-block
3.显示或隐藏
Show
hidden
4.响应式工具
visible-xs-* 可见
hidden-xs 隐藏
bootStrap组件
1.下拉菜单
Dropdown
Dropdown-menu
dropdown-header:不可点击的菜单
2.按钮组
Button-group
btn-group-vertical:垂直排列
3.导航
nav
Nav-tabs:标签式导航
Nav-pills:胶囊式导航
4.导航条
Navbar
navbar-brand:品牌图标
navbar-btn:导航按钮
Navbar-text:导航文本
Navbar-left/navbar-right:元素居左/居右
navbar-fixed-top:固定在顶部
navbar-fixed-bottom:固定在底部
navbar-default:反色
5.路径导航
Breadcrumb:
6.分页
Pagination:
7.路径导航
Breadcrumb:
8.标签
Label
label-default
label-primary
label-success
label-info
label-warning
label-danger
9.徽章
badge
10.巨幕
jumbotron :
11.缩略图
thumbnail :
12.列表
list-group:
List-group-item:列表项
list-group-item-heading
list-group-item-text
13.面板
Panel
panel-heading
panel-title
panel-body:
panel-footer
panel-primary
panel-success
panel-info
panel-warning
panel-danger
Panel和其它元素的组合
JavaScript插件
模态框
1.data方式调用
<buttontype="button" data-toggle="modal"data-target="#myModal">Launch modal</button>
2.js方式调用
'#myModal').modal(options)
下拉菜单
滚动监听
标签页
工具提示
弹出框
手风琴组件
图片轮播组件