CSS布局概述

2022-02-04 17:48:25

1.HTML5文档类型

　　由于Bootstrap使用了HTML5特定的HTML元素和CSS属性，所以使用Bootstrap的时候，所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性，如下所示：

<!DOCTYPE html>

<html lang="en">

  ...

</html>

　　Bootstrap3.x版本是一个移动先行的框架集，移动先行的影子在整个框架集都可以发现，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　在移动设备浏览器上，通过viewprot meta标签添加的user-scalable=no也禁用其缩放(zooming)功能。禁用缩放功能后，用户只能滚动屏幕，这样能让你的网站看上去更像原生应用。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

　　面的样式，可以让图片按比例缩放，并且不超过其父元素的尺寸，所以说该样式对响应式布局的支持更加友好。使用的时候，只需要在相应图片原生上加一个.img-responsive样式即可。

.img-responsive {

  display: block;

  max-width: 100%;

  height: auto;

}

　　Bootstrap为网页设置了一些基本的全局样式、排版和链接风格，尤其是具有如下特征：

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;

line-height: 1.428571429; // 20除14

　　为了改进跨浏览器呈现，Bootstrap使用了第三方CSS库Normailze。Normail.css是一个专门用于将不同浏览器的默认CSS特性设置为统一效果的CSS库，以便开发人员使用更标准的方式去访问或设置页面元素。该项目只专注于样式，比如button按钮在不同浏览器上效果都是一致的。参考

　　一个页面(或元素)要居中显示，可以在外部容器上简单应用.container样式即可。示例代码和样式源码：

<div class="container">

  ...

</div>

// 源码734行

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;                   /*左右居中的设置*/

  margin-left: auto;

}