怎么深入理解bootstrap

这篇文章给大家介绍怎么深入理解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.移动：<meta name="viewport" content="width=device-width,initial-scale=1.0"/>，添加user-scalable=no可以禁用其缩放（zooming）功能

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

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

4.居中容器：.container

B.基础排版

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

2.<p>有额外的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.面包屑导航

1. 使用样式：.breadcrumb

   
   

I.分页导航

1.使用样式：.pagination

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

J.标签

1.使用样式：.label

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

K.徽章

1. 使用样式：.badge

   
   

L.大屏幕展播

1. 使用样式：.jumbotron

   
   

M.页面标题

1. 使用样式：.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.媒体对象

1. 使用样式包括：.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()

4.支持四种事件订阅：show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.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({target:'#某单容器的选择器'});

E.选项卡

1.满足要求：

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

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

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

  
  

F.提示框

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

2.data-toggle="tooltip"

G.弹出框

1. 与提示框类似，data-toggle="popover"

   
   

H.警告框插件

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

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

I.按扭

1. 普通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）组件

关于怎么深入理解bootstrap就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。