-
3.3.1 固定式布局
首先，读者需要分辨3个概念：（1）Fix（固定式布局）对于固定式布局而言，无论浏览器是放大还是缩小，内容位置都不会因受挤压而改变，而且整个布局居中。（2）Fluid（流式布局）流式布局要设置布局的最大宽度和最
-
3.3 Bootstrap布局
Bootstrap提供两种布局方式：固定式布局和流式布局。结合3 2节讲解的栅格系统来说，Bootstrap的布局实际上是在栅格外加个容器（container）。固定式布局加的是固定宽度的容器，流式布局加的是自适应（即可变）宽
-
3.2.4 响应式Bootstrap栅格系统
在默认情况下，Bootstrap没有启用响应式布局特性。如果加入响应式布局CSS文件（bootstrap-responsive css），栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列
-
3.2.3 Bootstrap栅格系统
Blueprint（http: www blueprintcss org ）是个经典的960栅格系统，提供了完整的CSS框架，栅格系统是它的一部分功能。Bootstrap默认的栅格系统为12列，宽度为940px，比标准的960栅格系统少20像素，这是因为它少
-
3.2.2 解析960栅格系统
在网页设计中，当搭建页面结构复杂的门户型网站时，一般习惯定义页面宽度固定宽度，同时多选择宽度为950px 960px。例如，Alexa全球排名前100的站点，它们的主页宽度多为950px或960px，这些站点有个共同特点：页面
-
3.2.1 网页栅格系统的设计技法
栅格系统更多的是一种布局思想，在实际使用时，根据具体需求选用合适的技术实现即可。需要注意的是，对于栅格的技术实现来说，太灵活未必是好事，适度灵活最难得。栅格搭好了页面框架，接下来很重要的事情是往里
-
3.2 栅格系统
栅格系统（Grid System），也称网格系统，是一种平面设计的方法和设计风格。它运用固定的格子设计版面布局，其风格工整简洁，很受平面设计师的欢迎，已成为今日出版物设计的主流风格之一。在网页设计中，有人参
-
3.1.3 CSS重设
设计师们都梦想着这样一个完美世界：所有的浏览器都能够理解和适用所有CSS规则，并且呈现相同的视觉效果（没有兼容性问题）。但是，现实却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。当今
-
3.1.2 CSS规范和样式重用
合理而严谨的CSS设计，将使CSS代码更易于维护和重用，从而提升执行效率。一般应先规划样式，并严格区分公共样式和页面对象化样式；然后开始编码，在编码的同时进行调试、验证和代码片断的总结，而不是在所有模板
-
3.1.1 CSS全局样式设计思路
Bootstrap框架的核心是轻量的CSS基础代码库，没有一味地重置，而是注重各浏览器基础表现，降低开发难度。目前90%的Reset（样式重置）都是归零的思想，但在开发过程中开发人员经常发现样式归零存在着潜在的问题。
-
3.1 设计全局样式表
Bootstrap为屏幕、排版和链接设置了基本的全局样式。本节只简单说明，详细介绍可以参阅scaffolding less文件。Bootstrap使用的部分HTML元素和CSS属性需要文档类型为HTML5 doctype，因此<!doctype html>文档类型
-
本章内容
设计全局样式表栅格系统Bootstrap布局响应式设计Bootstrap框架主要是由动态CSS语言LESS编写，在很多方面类似于Blueprint框架（http: www blueprintcss org ）。经过Node js编译后，Bootstrap就是众多CSS的合集。
-
2.4.2 设计页面版式
本节借助Bootstrap布局版式设计一个完整的页面效果，页面版式模拟企业网站类型。企业网站一般都遵循基本的营销类设计格式，具有一个主消息板块和三个辅助性栏目，如图2-16所示。第1步：新建HTML5类型文档。根据2
-
2.4.1 设计交互组件
2 4 开发第一个Bootstrap示例本节不详细分析源码文件，因为读者可以随时下载它们。这里通过几个示例介绍使用已经编译好的Bootstrap文件进行入门练习。2 4 1 设计交互组件Tabs是页面中使用频率比较高的组件之一
-
2.3.3 设计Bootstrap网页模板
为了把读者的注意力完全放到使用Bootstrap上，本节先做一下准备工作。这里创建一个基本的HTML模板。1）启动Dreamweaver，新建HTML5文档。在菜单栏中选择文件新建选项，打开新建文档对话框。在对话框中选择空白页
-
2.3.2 Bootstrap架构解析
Bootstrap中的HTML、CSS和JavaScript适用于各类设备，如移动设备、平板电脑、PC等，不过它们的功能可以概括成如下几个类别。脚手架：全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布
-
2.3.1 安装Bootstrap
Bootstrap安装大致需要以下两步。第1步：安装Bootstrap的基本样式。样式的安装有多种方法，下面代码使用<link>标签调用CSS样式，这是一种常用的调用样式方法。<!doctype html><html><head><meta charset="utf-
-
2.3 Bootstrap应用解析
把Bootstrap压缩包下载到本地之后，就可以安装使用了。本节不仅介绍如何正确安装Bootstrap工具集，同时介绍Bootstrap架构组成，这个架构有什么功能，能够为网页设计和开发带来哪些用处。最后，引导读者创建一个符
-
2.2.2 编译版Bootstrap文件结构
在2 1 1节中，如果按照第二种方法，下载编译版Bootstrap，则解压bootstrap zip文件，可以看到该包中包含的所有文件，如图2-12所示。图2-12是Bootstrap的基本结构，编译后的文件可以快速应用于任何Web项目。压缩包
-
2.2.1 源码版Bootstrap文件结构
2 2 Bootstrap的文件结构下载Bootstrap压缩包之后，在本地进行解压，就可以看到包中包含的Bootstrap的文件结构，Bootstrap提供了编译和压缩两个版本的文件，下面针对不同的下载方式进行简单说明。2 2 1 源码版
- 排行
- 热门
