Bootstarp入门教程（2）概述

叁歲伎倆 2023-10-16 19:09 70阅读 0赞

**概述：**

深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、更快、更强壮的最佳实践。

(1)HTML5文档类型：Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型

<!DOCTYPE html>
    <html>
      <head>
        <title>Demo</title>	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
        
      </head>  
      <body>
        This is my HTML page. <br>
      </body>
    </html>

(2)移动设备优先：<head>之中**添加viewport元数据标签**。

在移动设备浏览器上，通过为viewport meta标签添加`user-scalable=no`可以禁用其缩放（zooming）功能。

(3)响应式图片：通过添加`.img-responsive` class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了`max-width: 100%;` 和`height: auto;`属性，可以让图片按比例缩放，不超过其父元素的尺寸。

(4)排版和链接:Bootstrap设置了全局样式，包括显示、排版和链接。尤其是：

为`body`标签设置了`background-color: #fff;`样式

设置了排版的基本属性`@font-family-base`、`@font-size-base`和`@line-height-base`

设置全局的链接颜色 `@link-color` 和点击链接颜色 `:hover`

(5)Normalize:为了增强跨浏览器表现的一致性，我们使用了[Normalize][]，这是由[Nicolas Gallagher][]和 [Jonathan Neal][]维护的一个reset库。

(6)Containers:.container包裹页面上的内容即可实现居中对齐。注意：由于设置了`padding` 和 固定宽度，`.container`不能嵌套。

####     ####

[Normalize]: http://necolas.github.io/normalize.css/
[Nicolas Gallagher]: http://twitter.com/necolas
[Jonathan Neal]: http://twitter.com/jon_neal