首页 > 其他分享 >【Bootstrap】009-全局样式：辅助类

【Bootstrap】009-全局样式：辅助类

时间：2023-02-22 17:31:40浏览次数：38  
标签：元素 演示 样式 代码 Bootstrap 说明 运行 009 CSS


目录

​​一、情境文本颜色​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​3、处理差异​​

​​4、向辅助技术传递意义​​

​​二、情景背景色​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​3、处理差异​​

​​4、向辅助技术传递意义​​

​​三、关闭按钮​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​四、三角符号​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​五、快速浮动​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​3、CSS源码​​

​​六、让内容块居中​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​3、CSS源码​​

​​七、清除浮动​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​八、显示或隐藏内容​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​3、CSS源码​​

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

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

​​3、CSS源码​​

​​十、图片替换​​

​​1、说明​​

​​2、演示​​

​​代码演示：​​

​​运行结果：​​

一、情境文本颜色

1、说明

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <p class="text-muted">柔和</p>
    <p class="text-primary">基本</p>
    <p class="text-success">成功</p>
    <p class="text-info">信息</p>
    <p class="text-warning">警告</p>
    <p class="text-danger">危险</p>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_css

 

3、处理差异

有时，由于另一个选择器的特殊性，强调类不能应用。在大多数情况下，一个充分的解决办法是用类将文本包装在 < span > 中；

 

4、向辅助技术传递意义

使用颜色来增加意义只提供一个视觉指示，而不会传达给使用辅助技术的用户，例如屏幕阅读器。确保用颜色表示的信息从内容本身来看是显而易见的(上下文颜色只用于强化已经存在于文本/标记中的含义) ，或者通过其他方式包含，例如使用.sr-only class。

 

二、情景背景色

1、说明

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <p class="bg-primary">基本</p>
    <p class="bg-success">成功</p>
    <p class="bg-info">信息</p>
    <p class="bg-warning">警告</p>
    <p class="bg-danger">危险</p>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_html_02

 

3、处理差异

有时，由于另一个选择器的特殊性，上下文背景类无法应用。在某些情况下，一个充分的解决办法是将元素的内容包装在 < div > 中并与class一起使用；

 

4、向辅助技术传递意义

与上下文的颜色一样，确保通过颜色传达的任何意义也是以一种非纯粹表象的格式传达的；

 

三、关闭按钮

1、说明

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_css_03

 

四、三角符号

1、说明

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <span class="caret"></span>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_bootstrap_04

 

五、快速浮动

1、说明

通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。这些类还可以作为 mixin（参见 less 文档） 使用；

【Bootstrap】009-全局样式：辅助类_html_05

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <div class="pull-left">左浮动</div>
    <div class="pull-right">右浮动</div>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_bootstrap_06

 

3、CSS源码

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

 

六、让内容块居中

1、说明

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <!-- 这里必须设置style才能实现居中 -->
    <div class="center-block" style="width:150px;background-color:#ff0000;">居中</div>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_bootstrap_07

 

3、CSS源码

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

 

七、清除浮动

1、说明

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <!-- Usage as a class -->
    <!-- 这个只能清除普通浮动，bootstrap自己的快速浮动是无法清除的 -->
    <div class="clearfix">
      清除浮动
      <div style="float: left;">右普通浮动</div>
      <div class="pull-left">左快速浮动</div>
      <div class="pull-right">右快速浮动</div>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_bootstrap_08

 

八、显示或隐藏内容

1、说明

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

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

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <div class="show">显示</div>
    <div class="hidden">隐藏</div>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_bootstrap_09

 

3、CSS源码

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

 

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

1、说明

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <p> .sr-only 类除了屏幕阅读器外，其他设备上都隐藏元素:</p>
    <a class="sr-only" href="#">跳转到主要内容</a>
    <p>与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户):</p>
    <a class="sr-only sr-only-focusable" href="#">跳转到主要内容</a>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_bootstrap_10

 

3、CSS源码

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

 

十、图片替换

1、说明

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

 

2、演示

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <p> .text-hide 类将页面元素所包含的文本内容替换为背景图:</p>
    <div class="text-hide">在 div 元素中插入一些文本。</div>
  </body>
</html>

运行结果：

【Bootstrap】009-全局样式：辅助类_html_11

 

 

 

 

 

 

 

 

 

标签：元素,演示,样式,代码,Bootstrap,说明,运行,009,CSS
From： https://blog.51cto.com/u_13272819/6079275

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99