JavaWeb CSS框架


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-屏幕大小-数字)

    

     

col-3

     

col-9

     

 

栅格基本使用方式(二)

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方式调用

Launch modal 

2.js方式调用

'#myModal').modal(options)

 

下拉菜单

滚动监听

标签页

工具提示

弹出框

手风琴组件

图片轮播组件

 

 

 

你可能感兴趣的:(JavaWeb CSS框架)