Bootstrap用户手册 设计响应式网站 内容简介

Bootstrap是Mark Otto和Jacob Thornton在Twitter公司共同开发的一个网站开发框架，2011年8月发布至今已经成为Github上受关注的开源项目。从CSS驱动的项目到目前内置很多JavaScript插件和图标，并且涵盖表单和按钮元素、支持响应式Web设计，Bootstrap为Web开发提供了前瞻性的设计和开发基础，能够大幅提升开发效率，已被很多流行网站采用。《图灵程序设计丛书：Bootstrap用户手册;设计响应式网站》全面介绍了Bootstrap为前端开发提供的所有工具，包括网格布局系统、预定义CSS样式、内置界面组件和交互式JavaScript插件。

《图灵程序设计丛书：Bootstrap用户手册;设计响应式网站》内容系统、结构完整、讲解简明、方便实用，是前端开发人员使用Bootstrap的参考书，适合所有前端开发人员和希望了解Bootstrap的读者阅读参考。

Bootstrap用户手册 设计响应式网站 目录

序

前言

第1章 Bootstrap提供的网站框架

1.1 Bootstrap到底是什么

1.2 Bootstrap的文件结构

1.3 基本的HTML模板

1.4 全局样式

1.5 默认网格系统

1.5.1 基本网格的HTML

1.5.2 平移列

1.5.3 嵌套列

1.6 流式网格系统

1.7 容器布局

1.8 响应式设计

第2章 Bootstrap预定义的CSS样式

2.1 排版

2.1.1 标题

2.1.2 强调段落

2.1.3 强调内容

2.1.4 粗体

2.1.5 斜体

2.1.6 强调相关的类

2.1.7 列表

2.2 代码

2.3 表格

2.3.1 可选的表格类

2.3.2 表格行的类

2.4 表单

2.4.1 可选的表单布局

2.4.2 内置支持的表单控件

2.4.3 扩展的表单控件

2.4.4 设置控件大小

2.4.5 表单控件的状态

2.5 按钮

2.5.1 按钮大小

2.5.2 禁用按钮的样式

2.6 图片

2.7 图标

2.7.1 感谢GLYPHICONS提供图标

2.7.2 用法

第3章 Bootstrap内置的布局组件

3.1 下拉菜单

3.2 按钮组

3.3 按钮下拉菜单

3.3.1 分隔式按钮下拉菜单

3.3.2 上拉菜单

3.4 导航元素

3.4.1 标签形导航

3.4.2 胶囊形导航

3.4.3 垂直堆叠的导航

3.4.4 导航加下拉菜单

3.4.5 导航列表

3.4.6 可切换的标签导航

3.5 导航条

3.5.1 导航条链接

3.5.2 表单

3.5.3 导航条菜单

3.6 面包屑式导航

3.7 分页导航

3.8 标签

3.9 圆标签

3.10 排版相关的元素

3.10.1 重头消息

3.10.2 页面标题

3.11 缩略图

3.12 警示框

3.13 进度条

3.14 媒体对象

3.15 其他组件

3.15.1 洼地

3.15.2 辅助类

第4章 Bootstrap支持的JavaScript插件

4.1 概述

4.2 过渡

4.3 模态框

4.3.1 用法

4.3.2 选项

4.3.3 方法

4.3.4 事件

4.4 下拉菜单

4.4.1 用法

4.4.2 通过JavaScript使用下拉菜单

4.4.3 方法

4.5 滚动监控器

4.5.1 用法

4.5.2 .scrollspy（'refresh'）方法

4.5.3 选项

4.5.4 事件

4.6 可切换的标签页

4.6.1 用法

4.6.2 事件

4.7 提示条

4.7.1 用法

4.7.2 选项

4.7.3 方法

4.8 弹出层

4.8.1 用法

4.8.2 选项

4.8.3 方法

4.9 警示框

4.9.1 用法

4.9.2 关闭方法

4.9.3 事件

4.10 按钮

4.10.1 加载状态

4.10.2 单选开关

4.10.3 复选按钮

4.10.4 单选按钮

4.10.5 用法

4.10.6 方法

4.11 折叠框

4.11.1 用法

4.11.2 选项

4.11.3 方法

4.11.4 事件

4.12 传送带

4.12.1 用法

4.12.2 选项

4.12.3 方法

4.12.4 事件

4.13 预先输入

4.13.1 用法

4.13.2 选项

4.14 粘条

4.14.1 用法

4.14.2 选项

第5章 实际使用Bootstrap

5.1 GitHub项目

5.2 定制Bootstrap

5.2.1 使用LESS

5.2.2 Snippets插件

5.2.3 Photoshop模板

5.2.4 主题

5.3 获得灵感

5.4 小结

作者及封面介绍

Bootstrap用户手册 设计响应式网站 精彩文摘

什么是响应式设计

响应式设计是针对浏览设备优化页面中既有内容的一种方法。比如，在桌面浏览器中既可以看到网站的常规版本，也可以在用户接入更大的显示器时看到针对宽屏的布局。在平板电脑中看到的是针对其横屏和竖屏模式优化之后的布局。而在手机上，则是能够适应更窄宽度的布局。为了适用不同的屏幕宽度，Bootstrap 使用 CSS 的媒体查询（media query）来检测浏览器视口的宽度，然后再根据条件加载和应用调整布局的样式表。根据浏览器视口的宽度，Bootstrap 可以按照纵横比或宽度的范围来优化布局，但最主要还是使用 min-width 和 max-width 属性。