Yii2框架中如何引入BootStrap样式-创新互联

这期内容当中小编将会给大家带来有关Yii2框架中如何引入BootStrap样式，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

成都网站制作、成都做网站的关注点不是能为您做些什么网站，而是怎么做网站，有没有做好网站，给创新互联一个展示的机会来证明自己，这并不会花费您太多时间，或许会给您带来新的灵感和惊喜。面向用户友好，注重用户体验，一切以用户为中心。

看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()）

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

Yii2框架中如何引入BootStrap样式

从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列的，需要把多余的列另起一行安排。

媒体查询：

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

响应式列重置：

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


.col-xs-6 .col-sm-3

.col-xs-6 .col-sm-3

网站建设知识

Yii2框架中如何引入BootStrap样式-创新互联

其他资讯