2.2 Bootstrap使用基础
2.2.1 基本的Bootstrap使用模板
在使用Bootstrap时，需要在页面中引用Bootstrap.css样式。另外，Bootstrap的所有JavaScript插件都依赖于JQuery，因此JQuery必须在Bootstrap之前引用，即jquery.js必须在Bootstrap.js文件之前引入。
【实例2-2】 一个使用Bootstrap的基本HTML模板。
上述代码中，如果想在一个HTML文件中使用Bootstrap，首先需要引入bootstrap.min.css文件，其次引入jquery.min.js和bootstrap.min.js两个JavaScript功能文件；其中，jquery.min.js文件主要解决Bootstrap中的所有互动效果，jQuery的下载网址为https://jquery.com/download/。代码中还设置了3个<meat>标签，分别设置字符集、文档兼容模式和视口。“html5shiv.min.js”用于使低于IE 9版本的浏览器支持HTML5的元素，“respond.min.js”用于使IE8支持媒体查询功能。
2.2.2 设置文档类型
Bootstrap使用了一些HTML5元素和CSS属性，为了让这些元素和属性正常工作，需要使用HTML5文档类型（Doctype）。因此，请在使用Bootstrap项目的开头包含下面的代码段。
如果在Bootstrap创建的网页开头不使用HTML5的文档类型，可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以至于代码不能通过W3C标准的验证。
2.2.3 响应式图像
Bootstrap提供了3个可对图片应用简单样式的类，分别如下。
.img-rounded：添加border-radius:6px获得图片圆角效果。
.img-circle：添加border-radius:50%让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
【实例2-3】 响应式图像使用，3种基本的图像呈现方式。
在Bootstrap使用的基本HTML模板的基础上修改<body>标签中的HTML代码。
运行代码，结果如图2-4所示。
图2-4 响应式图像使用效果示例
通过在<img>标签中添加.img-responsive类可以让图片支持响应式设计，图片将很好地扩展到父元素。
.img-responsive类可以设置“max-width:100%;”和“height:auto;”样式，并将其应用在图片上。
【实例2-4】 响应式图像使用，尝试手机端的浏览效果。
<body>元素中的HTML代码如下：
运行代码，结果如图2-5所示，图2-5a是分辨率为320像素×400像素时的测试结果，图2-5b为分辨率为414像素×500像素时的测试结果。
图2-5 响应式图像使用测试
a) 分辨率为320像素×400像素时的测试结果 b) 分辨率为414像素×500像素时的测试结果
<img>元素的类可用于任何图片中，其相关内容与描述如表2-2所示。
表2-2 img类的相关内容与描述
