深入理解bootstrap

一、入门准备

二、整体架构

A.整体架构

1.CSS12栅格系统:以规则的网格阵列来指导和规范网页中的版面布已有以及信息分布

2.基础布局组件,如排版、代码、表格、按扭、表单等,可以随意应用在任何元素上,包括顶部 的CSS组件内部也可以任意使用这些基础组件

3.jQuery

4.响应式设计:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,包括弹性网格和布局、图片、CSS媒体查询(media query)的使用等

5.CSS组件

6.JavaScript插件

B.栅格系统

1.列偏移:使用.col-md-offset-*形式的样式就可以将列偏移到右侧

2.列嵌套:在一个列里再声明一个或者多个行(row),内部所嵌套的row的宽度为100%时就是当前外部列的宽度

3.列排序:通过.col-md-push-*和.col-md-pull-*一实现

4.响应式栅格:中型屏幕md,超小型xs、小型sm、大型lg

5.使用clearfix清除浮动

C.CSS组件架构的设计思想

1.CSS组件AO模式:A表示Append,即“附加”的意思;O表示Overwrite,即“重写”的意思

2.CSS组件包括:基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式

D.JavaScript插件架构

1.HTML布局规则:基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性等

2.JavaScrtip实现步骤:所有的插件都遵循jQuery插件开发的标准步骤,所有的事件都保持了统一标准

3.插件调用方法:所有插件的使用方式都非常类似,可以是HTML声明式,也可以是调用式(JavaScript代码),并且支持多种回调和可选参数

三、CSS布局

A.概述

1.移动:,添加user-scalable=no可以禁用其缩放(zooming)功能

2.响应式图片:.img-responsive样式

3.Normalize.css,用于将不同浏览器的默认CSS特性设置为统一效果 的CSS库

4.居中容器:.container

B.基础排版

1.样式.h1-6没有有margin,h1有,h1 .small显示稍小一点的字体,灰色

2.

有额外的margin-bottom

3.相让一个段落突出显示,可以使用.lead样式,增大字体大小、粗细、行间距和margin-bottom

4.默认强调文本:small、strong、em、cite

5.对齐方式:text-left、text-center、text-right、text-justify

6.在abbr元素上实现了缩略词功能,initialism可以让字体小点

7.address元素主要是行间距和底部margin

8.blockquote定义了样式,并且可以定义.pull-right

9.列表:去点列表.list-unstyled;内联列表.list-inline;水平定义列表.dl-horizontal

C.代码

1.code单选内联代码,kbd用户输入代码,pre多行代码块

2.pre元素上应用.pre-scrollable可以控制最大高度为340px,并滚动

D.表格

1.基础样式:.table

2.隔行加背景色样式:.table-striped

3.带边框的单元格:.table-bordered

4.鼠标悬停高亮的表格:.table-hover

5.紧凑型表格:.table-condensed

6.行级元素样式,可在tr、td上使用:

.active表示当前活动的信息

.warning表示警告

.success表示成功或者正确的行为

.danger表示危险或者可能是错误的行为

.info表示中立的信息或行为

7.响应式表格,在.table外部包装.table-responsive样式的div即可创建,在小于768px时水平滚动

E.表单

1.基础表单:只对表单内的fieldset、legend、label标签进行了设定,对margin、padding、border进行了细化设置,如果在select、input、textarea元素上应用了.form-control样式,显示的宽度会变成100%,并且placeholder的颜色变灰

2.内联表单:在form元素上应用.form-inline样式,此样式只能在大于768px以上

3.label包住radio或checkbox,外部再用.checkbox或.radio样式,label可使用.checkbox-inline或.radio-inline内联样式

4.fieldset上应用disabled属性,则内部控件都会禁用,除了第一个legend内的控件

5.验证提示状态:.has-warning、.has-error、.has-success,在form-group平缓的div元素上应用

6.对应小图标:has-feedback

7.控件大小:.input-lg、.input-sm

8.块级帮助提示:.help-block

F.按扭

1.按扭样式:.btn、.btn-default、.btn-primary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link

2.按扭大小:.btn-lg、.btn-sm、.btn-xs、.btn-block

3.可支持:a、button、input元素

4.活动状态:.active

5.禁用状态:disabled属性或.disabled样式,样式不禁止按扭的默认行为

G.图像

1.3种风格效果:.img-rounded、.img-circle、img-thumbnail

H.辅助样式

1.文本样式:.text-muted、.text-primary、.text-success、.text-info、.text-warning、.text-danger

2.文本背景样式:.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

3.辅助图标:.close关闭图标、.caret向下箭头

4.内容浮动:.pull-right、pull-left、center-block、clearfix

5.隐藏与显示:.show、.hidden(不占文档流)、.invisible

四、CSS组件

A.小图标

1.所有的icon样式都以glyphicon-开头,由http://glyphicons.com/提供,使用时必须同时使用两个样式,.glyphicon和.glyphicon-*

2.新版本使用了CSS3中的@font-face特性

B.下拉菜单

C.按钮组

1.只需要在多个按扭外部使用一个窗口元素(比如div),然后在容器元素上应用 .btn-group样式即可

2.按扭工具栏,在多个分组外再放一个大的容器元素,然后在容器元素上应用 .btn-toolbar样式

3.按扭组上可以应用.btn-group-lg、.btn-group-sm、.btn-group-xs样式

4.垂直分组使用.btn-group-vertical样式

5.在一个.btn-group容器上,如果使用了.btn-group-justified样式,则所有的按扭会100%充满容器元素,自适应的功能

D.按扭下拉菜单

1.利用data-toggle=""来实现下拉菜单

2.样式.dropup向上的下拉菜单

E.输入框组

1.输入框组,.input-group样式,输入框前后显示的个性元素上可以使用.input-group-addon

2.避免在select元素上使用addon功能,不要将.form-group和.input-group混用

F.导航

1.使用.nav:

.nav-tabs表示选项卡导航

.nav-pills胶囊式选项卡导航

.nav-pills .nav-stacked堆叠式导航

2.使用.nav-justified自适应导航

G.导航条

1.使用样式:.navbar

.navbar-default基础导航条

.navbar-inverse反色导航条

2.使用.navbar-brand样式给内部元素,表示该元素是导航条的名称

3.要增强可访问性,要给每个导航条加上role="navigation"

4.样式.navbar-form导航条中的表彰样式,指定浮动:.navbar-left和.navbar-right

5.其他样式:.navbar-btn(button)、.navbar-text(文本)、.navbar-link(普通链接)

6.底部和顶部固定:.navbar-fixed-top、.navbar-fixed-bottom

7.样式.navbar-static-top,表示设置一个100%充满父元素窗口的导航条,主要是去掉导航条的圆角样式

H.面包屑导航

使用样式:.breadcrumb

I.分页导航

1.使用样式:.pagination

2.支持大小:.pagination-lg和.pagination-sm

J.标签

1.使用样式:.label

2.支持多种颜色,与button类似

K.徽章

使用样式:.badge

L.大屏幕展播

使用样式:.jumbotron

M.页面标题

使用样式:.page-header

N.缩略图

1.使用样式:.thumbnail

2.样式:.caption,可配合图文展示,在此样式元素内部添加任意风格元素

O.警告框

1.使用样式:.alert

2.属性值data-dismiss="alert",警告框的关闭,需要配合js使用

3.在.alert样式上应用一个.alert-dismissable样式即可实现一个可关闭的警告框

4.警告框也有多种颜色样式

5.使用.alert-link样式高亮警告框中的链接

P.进度条

1.样式.progress用于设置进度条的容器样式

2.样式.progress-bar用于限制进度条的进度

3.样式.progress-bar-xxx,提供鑫种颜色

4.样式.progress-striped条纹样式,同时应用.active可出现动画样式

5.多个.progress-bar-xxx可以堆叠

Q.媒体对象

使用样式包括:.media、.media-object、.media-body、.media-heading和用于控制左右浮动的pull-left或pull-right样式

R.列表组

1.基本样式:.list-group、.list-group-item

2.用a标签配合.active样式可以达到高亮选中的效果

3.样式.list-group-item-xxx支持多种颜色

4.自定义列表组:.list-group-item-heading、.list-group-item-text

S.面板

1.基础面板:.panel、.panel-default(.panel-xxx多彩)、panel-body

2.头尾样式:.panel-heading、.panel-footer

3.panel-body有内边距,要放置无边距的表格只需要将table和panel-body并列放置就行,不要放在body里面

T.洼地

1.样式.well与.jumbotron类似,多了边框

2.也提供大小设置:.well-lg、.well-sm

U.主题

五、JavaScript插件

A.动画过度效果

1.默认情况下,以下组件使用了动画过渡效果:

模态弹窗(Modal)的滑动和渐变效果

选项卡(Tab)的渐变效果

警告框(Alert)的渐变效果

旋转轮播(Carousel)的滑动效果

B.模态弹窗

1.弹窗组件使用了3层div容器元素,分别应用了modal、modal-dialog、modal-content样式,在modal-content内包括了弹窗的头(header)、内容(body)、尾(footer),分别对应3个样式:modal-header、modal-body、modal-footer

2.声明式用法:data-toogle=和data-target=

3.js用法:$('#id').modal()

C.下拉菜单

1.一般在导航条(navbar)和选项卡(tab)上实现

2.首先navbar的父容器上要应用.navbar样式,其次顶级ul块上要应用.nav和.navbar-nav样式

3.使用规则:

菜单样式和菜单项保持一致

被单击的链接或者按扭上需要应用data-toggle="dropdown"

4.js用法:$('#id').dropdown();,也包含事件订阅等功能,与modal类似

D.滚动侦测

1.滚动侦测(ScrollSpy)插件是根据滚动的位置自动更新导航条中相应的导航项

2.用法:

设置滚动容器,即在所要侦测的元素上设置data-target="@selector" data-spy="scroll"属性

设置菜单链接容器,设置id或样式怀data-target一致

在菜单容器内,必须有.nav样式的元素,并且在其内部有li元素,li内鈊的a元素才是可以侦测高亮的菜单链接,即符合.nav li > a这种选择符条件

3.js用法:$('滚动侦测容器选择符').scrollspy();

E.选项卡

1.满足要求:

选项卡导航和选项卡面板要同时有

导航链接里要设置data-toggle="tab",并且还要设置data-target="选择符"或href="选择符"

tab-pane要放在tab-content里面,要有id或样式并与data-target或href一致

F.提示框

1.默认没有声明式的用法

2.data-toggle="tooltip"

G.弹出框

与提示框类似,data-toggle="popover"

H.警告框插件

1.关闭按扭需要dismiss="alert",配合data-target="xxx",可以在外部关闭

2.JS用法:$(xxx).alert()或$(xxx).alert('close');

I.按扭

普通button使用data-toggle="button",input需要使用data-toggle="buttons"

J.折叠

1.data-toggle="collapse"配合data-target=""使用,折叠区域使用collapse和in样式

2.默认隐藏折叠区域,触发元素上添加一个.collapsed样式,去掉折叠区域的in样式

3.JS用法:$(xxx).collapse();

K.旋转轮播

L.自动定位浮标

1.Affix的效果就是浮动的左右菜单

2.使用data-spy="affix",包括affix-top、affix-bottom,配合data-offset使用

六、实战:扩展现有组件

七、实战:Win8磁贴组件开发

九、第三方扩展

1.Font Awesome,.icon-xxx相关样式

2.BSIE扩展,支持IE8以下浏览器

3.Buttons扩展,基于Sass和Compass构建的CSS按扭样式库

4.DateTime Picker插件

5.Cikonss,纯CSS实现的响应式Icon插件,兼容IE8+

6.Flat UI,基于Bootstrap进行了扁平化风格改造

7.Bootstrap Switch,用于模拟iPhone开关效果

8.Messager,弹框(alert)组件

https://github.com/zhangyue0503/html5js/tree/master/shenrulijiebootstrap

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180212G0KVOU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券