Yii2框架默认采用了bootstrap作为CSS风格，各种视图类组件都如此。之前一直采用默认风格，并在必要的时候添加或者修改一下class来达到目的。但在改版Yii1.1的orange项目时，发现之前也是套的模板，其实没有好好去理解一下bootstrap的那套规则，所以顺便大致梳理一下吧。以basic模板为例，对照 上的内容进行。
看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="https://www.jb51.net/orange_yii2/web/assets/6cdf1901/css/bootstrap.css"> <link href="https://www.jb51.net/orange_yii2/web/css/site.css"></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列的，需要把多余的列另起一行安排。
媒体查询：
对超小屏幕，是默认的；对于其他各种屏幕，使用媒体查询确定大小的分界点
响应式列重置：
对于某些内容，希望在小屏幕上占据比大屏幕上更多列，可以类似如下
<div> <div>.col-xs-6 .col-sm-3</div> <div>.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div></div> <div>.col-xs-6 .col-sm-3</div> <div>.col-xs-6 .col-sm-3</div> </div>
列偏移：
使用类似col-md-offset-4 那样的类，可以将列向右偏移，效果上就好像某些列空出来了
列嵌套：
所谓列嵌套，即列中包含列，其实是行中包含的列元素又是一行，即行嵌套行
列排序：
通过使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的顺序
------------------------------------排版---------------
标题同类样式：
实际标题用元素h1到h6，副标题用small，对于内联的非标题元素，需要使用标题一样的样式，用类.h1到.h6，副标题用.small
页面主体：
全局的font-size=14px，line-height为1.428，作用于body和所有p元素。p元素的margin-bottom为1/2行高（即 14px*1.428/2 = 10px）。突出性段落用.lead类。
内联文本：
用mark标签高亮文本，删除文本用del标签，不用的文本用s标签，插入的文本用ins标签，下划线用u标签，小号文本用small标签或.small类，粗体强调用strong标签，斜体强调用em标签，（b和i分别用于粗体和斜体时，没有强调意味）。
文本对齐：
<p>Left aligned text.</p> <p>Center aligned text.</p> <p>Right aligned text.</p> <p>Justified text.</p> <p>No wrap text.</p>
缩略语与悬停提示：
<abbr title="attribute">attr</abbr> <abbr title="HyperText Markup Language">HTML</abbr>
列表：