用户界面与交互架构

下载 Bootstrap

包含的文件

在网页中使用 Bootstrap

布局

嵌套布局与流动布局

响应式布局

把已有的固定宽度布局转换成响应式布局

响应式布局的实用类

常用标签与样式

列表

代码

Google Prettify

表格

表单

文本框的前缀与后缀

单选按钮

复选框

选择列表

表单的排版

按钮

按钮群组

带下拉菜单的按钮

导航菜单

导航菜单里的下拉菜单

导航菜单的响应式设计

选项卡 #1

选项卡 #2

导航路径与分页器

提示信息

缩略图

对话框

工具提示

折叠内容

旋转木马

课程介绍

响应式设计的真实例子

viewport - 可视窗口

手工配置 viewport

像素密度

应用媒体查询的方法

media type 媒体类型

meida feature 媒体特性

aspect-ratio 可视窗口宽与高的比例

aspect-ratio 设备的宽与高的比例

orientation 设备的使用方向

height （可视窗口高度）与 device-height（设备高度）

width（可视窗口宽度） 与 device-width（设备宽度）

resolution 像素密度

操作符 - and

逗号分隔连接多个媒体查询

操作符 - not

响应式布局 #1

响应式布局 #2

响应式布局 #3

响应式导航

导航菜单的 HTML

导航菜单的 CSS

切换按钮的样式

响应式导航菜单的样式

响应式的图像

响应式的背景图像

不同尺寸的设备使用不同的图像

不同尺寸的设备使用不同的背景图像

根据屏幕密度切换不同的背景图像

picturefill

响应式幻灯片

幻灯片的控制按钮

幻灯片的控制按钮样式

修复幻灯片被覆盖的问题

结束语