CSS辅助类

什么是CSS辅助类

CSS辅助类包括CSS类被定义为X /职业随时可用在您的网站上的任何元素中使用，这将通过在您的日常工作流中使用它们来加快您的开发时间。

体类

主体类在我们的主题中使用，并为您提供了一种使用CSS的简单方法来针对某些其他类或整个部分。

类和相关样式的最佳方法之一是利用检查元素功能铬．要做到这一点，只需右键单击您想要查看并选择的页面的任何部分检查元素从出现的下拉列表中。一旦你这样做了，一个弹出窗口应该出现在你的浏览器底部的标记(超文本标记语言)和样式(CSS)在右边。然后，您可以浏览站点的标记，选择某些元素，并通过选择器查看对这些元素应用了什么样式。这是一个很好的工具，如果你对元素的样式有任何疑问，你可以做什么来改变它。

堆栈的选择

完整性(光)

.x-integrity。X-integrity-light {}

完整性(黑)

.x-integrity。X-integrity-dark {}

更新

.x-renew {}

图标

.x-icon {}

导航定位

静态顶

.x-navbar-static-active {}

固定前

.x-navbar-fixed-top-active {}

固定的左

.x-navbar-fixed-left-active {}

固定的对吧

.x-navbar-fixed-right-active {}

网站布局

盒装

.x-box -layout-active {}

Fullwidth

.x-full-width-layout-active {}

内容布局

内容/侧边栏

.x content-sidebar-active {}

侧边栏/内容

.x-sidebar-content-active {}

Fullwidth

.x-full-width-active {}

导航类

本节中列出的类应用于导航栏或导航栏中包含的元素。请注意，.x-navbar-fixed-top类是在用户向下滚动页面时通过JavaScript动态添加的，当视口返回到网页顶部时也会被删除。

导航条

静态顶

.x-navbar {}

固定前

.x-navbar。X-navbar-fixed-top {}

固定的左

.x-navbar。X-navbar-fixed-left {}

固定的对吧

.x-navbar。X-navbar-fixed-right {}

标志

文本

.x-brand。文本{}

图像

.x-brand。Img {}

导航

导航列表

.x-nav {}

移动切换

.x-btn-navbar {}

实用程序类

本节中列出的类并不是针对CSS来改变它们的样式或功能的。相反，这些类已经执行了指定的操作，并在需要时与各种元素一起使用。

间距助手

为了使页面结构正确，所有元素都必须接受某种类型的边距或填充以获得足够的间距。虽然这种间隔在大多数情况下是有益的，但它可能是您希望在其他时候删除或修改的内容。我们已经提供了很多在这些实例中使用的helper类。这些辅助类允许您通过完全删除间距或添加小间距、中间距或大间距来修改元素的边距和填充。这些类是由三个不同参数构建的首字母缩写:

1. 保证金(米)或填充(p）.
2. 前(t)，左(l)，对(r)，底部(b)，垂直(v)、水平(h)，或全部(一个）.
3. (没有一个n)、小(年代)、中(米)，或较大(l）.

例如，如果您想添加一个类，它将删除您将使用的元素顶部的所有边距mtn，代表margin top none。或者，如果你想在元素的两侧添加少量的填充，你可以使用榜单，代表填充水平介质。

要找出元素上的空格来自哪里，你可以很容易地在Chrome中做到这一点。只需右键单击任何元素并选择检查Elemen下拉式中的T。这将在窗口底部显示一个弹出窗口，左边显示HTML，右边显示CSS。您可以将鼠标悬停在弹出窗口中的HTML上，并选择元素来查看任何边距或填充来自哪里。保证金是由红色/橙色和填充由绿色指定。

间距:没有

• mtn
• mrn
• 拥有
• mln
• mvn
• mhn
• 男人。
• ptn
• 打印
• pbn
• pln
• pvn
• phn
• 锅

间距:小

• mts
• 夫人
• mbs
• 美国职业足球大联盟
• mvs
• 肉类
• 马斯
• 分
• prs
• 美国公共电视台
• 请
• pv
• 小灵通
• 不是

间距:中等

• mtm
• mrm
• 喜忧参半
• 传销
• mvm
• 嗯
• 老妈
• 天车
• 人口、难民和移民事务局
• pbm
• plm
• pvm
• 榜单
• 帕姆

间距:大

• mtl
• 推广
• mbl
• mll
• mvl
• mhl
• mal
• ptl
• 光杆载荷
• 出版广播公司
• 锁相环
• pvl
• phl
• 朋友

总结

现在您已经对CSS Helper类有了广泛的概述，以及如何使用它们来提高您的工作效率。