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

<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)

 

下拉菜单

滚动监听

标签页

工具提示

弹出框

手风琴组件

图片轮播组件