Yii2框架BootStrap样式的深入理解

Yii2框架默认采用了bootstrap作为CSS风格，各种视图类组件都如此。之前一直采用默认风格，并在必要的时候添加或者修改一下class来达到目的。但在改版Yii1.1的orange项目时，发现之前也是套的模板，其实没有好好去理解一下bootstrap的那套规则，所以顺便大致梳理一下吧。以basic模板为例，对照http://v3.bootcss.com/css/ 上的内容进行。

看layouts/main.PHP，Yii2默认以HTML5文档类型进行的了，但语言默认是en-US，所以要改，在config/web.php中添加'language' => 'zh-CN', 到$config中

已经有viewport这个meta项，已经支持移动设备优先原则

layouts/main.php中有一些beginXxx()，endXxx()方法（如$this->beginPage()，$this->endBody()）以及$this->head()的调用，查看yii/web/View类文档，发现它们都是一个mark，用来标记位置而已。AppAsset::register($this); 实际调用基类 yii/web/AssetBundle的register方法，将项目模板默认生成的assets/AppAsset.php中定义的CSS、JS及其相关依赖注册到视图$this （所谓“注册”，就是一种发布，一种有序的插入，这里之前的那一个个mark应该起作用了）

AppAsset类默认定义的CSS是 css/site.css，因为$depends有 yii/bootstrap/BootstrapAsset，所以，实际在head部分插入的CSS类似如下（对应$this->head()）

<link href="/orange_yii2/web/assets/6cdf1901/css/bootstrap.css" rel="stylesheet"><link href="/orange_yii2/web/css/site.css" rel="stylesheet"></head>

模板给出的DOM结构body部分如下图所示（其中div.xxx对应的是各控制器所渲染的部分）：

从site.css看，模板自定义的CSS样式并不多，即绝大部分CSS都是沿用了bootstrap默认的那些。所以，关键是去理解bootstrap本身。

-----------------------------------------------------删格原理-----------------------------------------------------------

基本原则：

页面内容和栅格系统需要套一个容器，有2种容器：.Container（固定宽度，支持响应式）和.container-fluid（100%宽度，占据viewport全部）

删格由行、列形成，列组成行，行的直接子元素必须时列，一行最多12列，一系列预定义的类（如.row，.col-xs-4）用于快速创建删格布局

列间距由列的padding属性设置，.row元素的margin设置负值可以抵消.container的padding属性的值

每行都要按12列思考，例如，需要等宽的3列，可以用3个.col-xs-4，即每4列合并成1列的。超过12列的，需要把多余的列另起一行安排。

媒体查询：

对超小屏幕，是默认的；对于其他各种屏幕，使用媒体查询确定大小的分界点

响应式列重置：

对于某些内容，希望在小屏幕上占据比大屏幕上更多列，可以类似如下