栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > Bootstrap教程

Bootstrap 帮助器类 · Bootstrap教程

Bootstrap 帮助器类

本章将讨论 Bootstrap 中的一些可能会派上用场的帮助器类。

关闭图标

使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标。




   Bootstrap 实例 - 关闭图标
   
   
   



关闭图标实例

结果如下所示:


关闭图标

插入符

使用插入符表示下拉功能和方向。使用带有 class caret 的 元素得到该功能。




   Bootstrap 实例 - 插入符
   
   
   



插入符实例

结果如下所示:


插入符

快速浮动

您可以分别使用 class pull-leftpull-right 来把元素向左或向右浮动。下面的实例演示了这点。




   Bootstrap 实例 - 快速浮动
   
   
   




   向左快速浮动


   向右快速浮动




结果如下所示:


快速浮动

如需对齐导航栏中的组件,请使用 .navbar-left.navbar-right 代替。请查看 Bootstrap 导航栏。

居中内容块

使用 class center-block 来居中元素。




   Bootstrap 实例 - 居中内容块
   
   
   




   
      这是 center-block 实例
   




结果如下所示:


居中内容块

清除浮动

如需清除元素的浮动,请使用 .clearfix class。




   Bootstrap 实例 - 清除浮动
   
   
   




   
      向左快速浮动
   
   
      向右快速浮动
   




结果如下所示:


清除浮动

显示和隐藏内容

您可以通过使用 class .show.hidden 来强行设置元素显示或隐藏(包括屏幕阅读器)。




   Bootstrap 实例 - 显示和隐藏内容
   
   
   




   
      这是 show class 的实例
   
   
      这是 hide class 的实例
   




结果如下所示:


显示和隐藏内容

屏幕阅读器

您可以通过使用 class .sr-only 来把元素对所有设备隐藏,除了屏幕阅读器。




   Bootstrap 实例 - 屏幕阅读器
   
   
   




   

结果如下所示:


屏幕阅读器

在这里,我们看到两个 input 类型的 label 标签都带有 class sr-only,因此标签将只对屏幕阅读器可见。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/10655.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号