Bootstrap框架综述：移动优先响应式网页开发技术详解.pdfVIP

复习：

TwitterBootstrap是一个CSS框架，适用于移动设备优先的响应式网页开发。主要涉及：

HTML:为已有的H5标签了自定义属性data-*

CSS:Reset+class=6800行

JS:基于jQuery添加了插件

分为五部分：

(1)起步

(2)全局CSS样式：按钮图片文本表格表单栅格布局系统

(3)组件：

(4)插件：

(5)定制

提示：今日的最难点：响应式导航条

1.Bootstrap组件——Glyphicons图标字体

图标字体：可以表示的文字不是abcd或1234，而是一个又一个图形符号，比直接使用图片好处：可以

任意放大不会失真；所有能使用文字的地方都可以使用图标字体，且会随着文字颜色的改变而改变。

提示：Glyphicon图标字体提供了Web、移动开发常用的小图标，但一般的操作系统都默认没有安装该

套字体，需要项目使用服务器端字体：

@font-face{

font-family:GlyphiconsHalflings;

src:url(../fonts/glyphicons-halflings-regular.eot);

}

body{

font-family:GlyphiconsHalflings;

}

2.Bootstrap组件——按钮组——了解

在一个.btn-group中出现多个.btn

divclass=btn-group

buttonclass=btn...

buttonclass=btn...

buttonclass=btn...

/div

3.Bootstrap组件——输入框组——一般掌握

divclass=input-group

spanclass=input-group-addon/span

inputclass=form-control

spanclass=input-group-addon/span

/div

4.Bootstrap组件——下拉菜单——重点

下拉组件的必需结构：

divclass=dropdown

adata-toggle=dropdown触发元素/a

ulclass=dropdown-menu

隐藏菜单

/ul

/div

提示：data-toggle=dropdown其实是Bootstrap提供的一个jQuery插件的选择器

$([data-toggle=dropdown]).on(click,fn);

5.自学：Bootstrap组件——面包屑(路径导航)、分页、标签、徽章、巨幕、水井(Well)

6.Bootstrap组件——导航(nav)

导航的分类：

(1)标签页式导航

ulclass=navnav-tabs

(2)胶囊式导航

ulclass=navnav-pills

ulclass=navnav-pillsnav-stacked

7.Bootstrap组件——进度条

divclass=progress

divclass=progress-barstyle=width:30%30%/div

/div

提示：进度条的实际显示宽度必须手工来设置；可以使用定时器/根据实际异步加载进度来控制进度条宽

度的增长

午间练习：使用定时器让进度条的宽度增加

7.Bootstrap组件——媒体对象

divclass=media

divclass=media-left

imgclass=media-object

/div

divclass=media-body

h3class=media-heading/h3

p/p

/div

/div

8.Bootstrap组件——警告框

divclass=alertalert-dangeralert-dismissible