对Yii2框架BootStrap风格的深刻理解

Yii2框架默认采用bootstrap作为CSS样式，对于各种视图类组件都是一样的。之前一直采用默认样式，必要时会添加或修改类以达到目的。但是在修改Yii1.1的orange项目的时候，发现之前也是一套模板，但是并没有真正理解那套bootstrap规则，所以顺便大致整理一下。以基本模板为例，将其与http://v3.bootcss.com/css/.上的内容进行比较

查看布局/主要。PHP，Yii2默认情况下是在HTML5文档类型中完成的，但是默认情况下语言是en-US，所以要更改它，可以在config/web.php中添加' language'='zh-CN '到$config。

已经有一个元项目“视口”，它已经支持移动设备优先级原则

在layouts/main.php中，有一些对beginXxx()、endXxx()方法的调用(比如$this-beginPage()、$this-endBody())和$this-head()。看yii\web\View类文档，发现都是一个标记，用来标记位置。appasset : register($ this)；实际调用基类yii\web\AssetBundle的register方法，将默认情况下由项目模板生成的assets/AppAsset.php中定义的CSS、JS及其相关依赖项注册到view $this中(所谓的“registration”是一种发布和有序插入，这里前面的标记应该可以)

AppAsset类默认定义的css是css/site.css因为$depends有yii \ BootstrapAsset \ BootstrapAsset，所以头部分实际插入的CSS类似于下面(对应$this-head())

链接href='/orange _ yii 2/web/assets/6cd f 1901/CSS/bootstrap . CSS ' rel='样式表'链接href='/orange _ yii 2/web/CSS/site . CSS ' rel='样式表'/head模板显示了DOM结构的主体部分，如下图所示(。

从site.css来看，由模板定制的css样式并不多，也就是说，大多数CSS都遵循bootstrap默认的样式。因此，关键是理解自举本身。

-

基本原则：

页面内容和网格系统都需要一个容器，容器有两种：容器(固定宽度，支持响应)和。容器-流体(100%宽度，占据所有视口)

网格删除由构成行的行和列组成。行的直接子元素必须是列，一行最多12列。一系列预定义的类(例如。划，划。col-xs-4)用于快速创建网格删除布局

列间距由列的填充属性和的边距的负设置来设置。元素的填充属性值进行偏移。集装箱。

每行应视为12列。例如，如果需要3列等宽，可以使用3列。col-xs-4，即每4列合并为一列。如果超过12列，则需要将多余的列排列在另一行中。

媒体查询：

对于超小屏幕，是默认的；对于其他类型的屏幕，使用媒体查询来确定大小的截止点

响应列复位：

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

div class=' row ' div class=' col-xs-6 col-sm-3 '。第6栏。col-sm-3/div div class=' col-xs-6 col-sm-3 '。第6栏。列sm-3/div！-只为所需的视口添加额外的clear fix-div class=' clear fix visible-xs-block '/div fix class=' col-xs-6 col-sm-3 '。第6栏。col-sm-3/Div class=' col-xs-6 col-sm-3 '。第6栏。col-sm-3/div/div列偏移量：

使用像col-md-offset-4这样的类，您可以向右偏移列，就像某些列是空的一样

列嵌套：

所谓列嵌套，就是列中包含列，其实行中包含的列元素也是一行，也就是行是嵌套的

列排序：

属性来更改列的顺序。col-md-push-*和。col-MD-pull-* class-排版

标题样式相同：

实际标题使用元素h1到h6，副标题使用小。对于内联非标题元素，有必要使用类使用与标题相同的样式。h1到. h6，副标题使用. small。

页面正文：

全局font-size=14px，行高=1.428，作用于体和所有p元素。p元素的边距底部是1/2行高(即14px*1.428/2=10px)。使用。突出段落的引导类。

内嵌文本：

Mark标记用于突出显示文本，del标记用于删除文本，s标记用于未使用的文本，ins标记用于插入的文本，u标记用于下划线、小标记或。小类用于小文本，强标签用于粗体强调，em标签用于斜体强调，(b和I分别用于粗体和斜体，不加强调)。

文本对齐方式：

p class='text-left '左对齐文本。/pp class='text-center '居中对齐文本。/pp class='text-right '右对齐文本。/PP class=' text-align '对齐文本。/PP class=' text-nowrap' nowrap文本。/p缩写和悬停提示：

缩写title=' attribute ' attr/缩写title='超文本标记语言' class='初始化' html/缩写list:

有序列表ol和无序列表ul的一般用法是直接元素。无类型列表是ul与。list-未格式化的类，而inline(无序)列表是ul with。列表内联类。基本描述列表类似于以下内容：

dldt的描述列表./dtdd.水平排列的/dd/dl与。dl-水平类。如果左边的短语太长，它可以被文本溢出属性截断。

-代码。

内联代码用代码标记，代码块用pre标记，变量用var标记，用户输入用kbd标记，程序输出用samp标记

(表格)(表格)(表格)

表元素和类没有默认的引导样式。表作为基本样式(其他样式在此基础上附上)。添加。表条纹风格，形成偶数和奇数间隔的斑马风格。添加表格边框类，表格就有了边框。增加表悬停类，实现鼠标悬停响应(类似高亮显示)。添加。table-condented类可以使表格更紧凑，单元格的内部更少。不管是td还是tr，活动类、成功类、信息类、危险类和警告类都可以用来表示某个状态。要创建响应表(在小屏幕设备上水平滚动)，方法是用类似于以下内容的容器覆盖表元素：

div class=' table-responsive ' table class=' table './表格/div-表单

表单中的输入、文本区域和选择将具有默认的控件样式(宽度：100%)。传统的方法是在类别的div中包含控件及其前面的相应标签。表单组(会有更好的布局)

连接。表单内联类将使表单中的控件水平排列(它显示为内联块，内容向左对齐。可能需要手动指定宽度。虽然没有显示标签，但不应省略)

连接。form-horizontal类将窗体水平排列(标签和控件在同一行，的行为。表单组已更改，没有多余的。需要row类，但需要联合使用预定义的删格类来实现布局，控件对应的标签使用。控制标签以获得更好的外观)

占位符属性通常添加到输入框中，并且支持所有HTML5输入控件

Textarea通常添加行属性

复选框和单选按钮的项目应包装在标签中，复选框和单选按钮中的禁用项目可以附加禁用属性。同时，附加。禁用类可以在鼠标悬停时显示禁用图标。

附上。复选框-内嵌和。单选-将类内联到复选框和单选的标签，您可以水平排列选项

添加多个属性以选择同时显示多个选项

如果要使用静态文本作为控件，请使用p元素并附加。表单-控件-静态类

输入框的焦点状态是通过设置对应输入框的CSS属性来实现的：去掉轮廓(设置为0)，赋予框影属性

禁用输入框以将禁用的属性添加到输入中，并禁用由fieldset包装的所有控件以将禁用的属性添加到其中(存在一定的兼容性问题)

只读属性可以添加到只读输入框中，并且其样式也被禁用

表单控件呈现不同的检查状态，即。成功了。有警告。has-error和其他类被附加到div.form-group(如果。同时附上反馈类)

您可以通过类似的类来设置控件的高度。input-lg，通过类似。col-lg-*，并通过附加类(如)在div.form-group中快速设置标签和控件。形式组lg和。表单组sm到div。表单组。

用列(div.col-xs-3等)包装输入框或其任何父元素。)在网格系统中，用span.help-block设置表单控件辅助文本的宽度很容易(例如，给出错误提示)

按钮。

基本用法，将默认btn类附加到button元素，然后根据要呈现的场景附加btn-default、btn-primary、btn-success和其他类

按钮的大小可以通过添加来控制。btn-lg，btn-sm和。btn-xs类

将. btn块类附加到按钮可以将其拉伸到父元素宽度的100%，并将其表示为块元素

按钮元素表示的按钮激活状态由伪类：active实现(无需额外添加)，元素A表示的按钮激活状态由添加实现。活动类，但如果外观需要一致，也可以添加。按钮元素的按钮的活动类。

通过添加disabled属性可以禁用按钮元素(按钮背景设置不透明度属性可以实现不可点击的显示效果)，通过附加。禁用的类

虽然button、a和input元素都可以应用btn和btn-XXX之类的按钮类，但是应该尽可能多地使用button元素进行跨浏览器呈现

-照片。

正在添加。img-响应类到img可以使图片支持响应布局(本质上最大宽度：100%；height:auto以便图片在父元素中具有更好的可伸缩性)

正在连接。img-四舍五入。img-circle，img-缩略图和其他类到img可以使图片显示不同的形状

-辅助类。

不同场景的文本类似于以下内容：

p class=' text-静音'./PP class=' text-primary './PP class=' text-success './PP class=' text-info './PP class=' text-warning './PP='文本-舞者'

p类=' BG-primary './PP类=' BG-成功'./PP类=' BG-info './PP类=' BG-警告'./PP=' BG-舞者'./p关闭按钮：

按钮类型=' button ' class=' close ' span aria-hidden=' true '/span span class=' Sr-only ' close/span/button表示下拉三角形符号：

Span class='caret'/span快速左右浮动：(不适用于导航栏，导航栏应使用。nav bar-右和。nav bar-左类)

Div class='向左拉'./div div class='向右拉'./div中心块：

Div class='中心块'./div本质上是一个元素，display:block和左右边距设为auto以清除float: (add。clearfix类到父元素，实际上是clear:both)

Div class='clearfix './div显示和隐藏内容：

Div class=' show './div div class='隐藏'./div此外，还有一个。不可见类，影响元素的可见性，但不影响显示属性(可以显示但不可见)，因此仍然影响文档流(仍然是流中的元素)。那个。隐藏类包含。看不见的类，因为当隐藏时，它当然是

屏幕阅读器和键盘导航内容(对其他设备隐藏):

a类=“仅Sr-仅Sr-可聚焦”href=“# content”跳到主要内容/a用背景图片替换元素文本内容：

H1 class=' text-hide '自定义标题/h1-响应工具。

隐藏或显示不同屏幕的内容：您可以使用类。可见-XX-YY或。独立或联合隐藏-XX(其中XX可以是xs、sm、md、lg，YY可以是block、inline、inline-block)

打印机隐藏或显示的内容：可见印刷YY和。隐藏打印(其中YY的可选值与上面相同)

以上是bootstrap框架全局CSS知识的总结。另外两个引导是组件和插件。简单理解，组件是CSS表达的显示功能块，而插件是JS CSS表达的功能块，往往具有动态效果或交互效果。

当组件需要时检查http://v3.bootcss.com/components/，当插件需要时检查http://v3.bootcss.com/JavaScript/

以上是边肖介绍的Yii2框架的BootStrap风格理解。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！