18-Bootstrap 全局 css 样式-辅助类|学习笔记

简介: 快速学习18-Bootstrap 全局 css 样式-辅助类

开发者学堂课程【前端开发框架Bootstrap使用教程18-Bootstrap 全局 css 样式-辅助类】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4237


18-Bootstrap 全局 css 样式-辅助类


目录

一、情景文本颜色

二、情景背景色

三、关闭按钮

四、三角符号

五、快速浮动

六、让内容块居中

七、清除浮动

八、显示或隐藏内容

九、屏幕阅读器和键盘导航

十、图片替换


一、情境文本颜色

通过颜色来展示意图,Bootstrap 提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深就像默认的链接一样。

处理差异

处理差异

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

 

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication,which will not be conveyed to users of assistive technologies -such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup or is included through alternative means, such as additional text hidden with the .sr-onlyclass

二、情境背景色

和情境文本颜色类一样,使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的情境文本颜色类一样。

处理差异

处理差异

Sometimes contextual background classes cannot be applied due to the specificity of ano-ther selector. In some cases, a sufficient workaround is to wrap your element’s content  in a <div> with the class

 

Conveying meaning to assistive technologies

As with contextual colors,ensure that any meaning conveyed through color is also convey-ed in a format that is  not purely presentational


三、关闭按钮

通过使用一个象征关闭的图标,可以让模态框和警告框消失。


四、三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意,向上弹出式菜单中的三角符号是反方向的。


五、快速浮动

通过添加一个类可以将任意元素向左或向右浮动。eportant 被用来明确 CSS 样式的优先级,这些类还可以作为mixin(参见 less 文档)使用。不能用于导航条组件中

排列导航条中的组件时可以使用这些工具类;,navbar-left 或,navbar-right 。参见导航条文档以获取更多信息。


六、让内容块居中  

为任意元素设置 display: biock 属性并通过 margio 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。


七、清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动(float)。这里所使用的是 Nicolas Gallagher 创造的 microclearfix 方式。此类还可以作为 mixin 使用。


八、显示或隐藏内容

.show 和.hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。这些类通过 !Iimportant 来避免 CSS 样式优先级问题,就像 quick floats 一样的做法。注意,这些类只对块级元素起作用,另外,还可以作为 mixin 使用。

.hide 类仍然可用,但是它不能对屏幕阅读器起作用,并且从 v3.0.1版本开始就不建议使用了。请使用.hidden 或 .sr-only.

另外,.invisible 类可以被用来仅仅影响元素的可见性,也就是所,元素的 display 属性不被改变,并且这个元素仍杰能够影响文档流的排布。


九、屏幕阅读器和键盘导航

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容I.sr-only 和 .sn-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来(例如,使用键盘导航的用户)。对于遵循 可访问性的最佳实践很有必要。这个类也可以作为 mixin 使用。


十、图片替换

使用.text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。

相关文章
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
192 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
112 1
|
8月前
|
前端开发
|
前端开发
基于CSS3+Bootstrap实现的侧边栏后台菜单源码
CSS3+Bootstrap实现的侧边栏后台菜单特效源码是一段基于Bootstrap和图标库制作的侧边栏菜单后台管理页面效果代码,简洁大方、易于管理,是一段非常不错的后台菜单栏效果,欢迎对此段代码感兴趣的朋友前来下载。
217 54
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
前端开发 JavaScript UED
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。