Bootstrap
  • [Bootstrap]Bootstrap 教程
  • [Bootstrap]Bootstrap 简介
  • [Bootstrap]Bootstrap 环境安装
  • [Bootstrap]Bootstrap CSS 概览
  • [Bootstrap]Bootstrap 网格系统
  • [Bootstrap]Bootstrap 排版
  • [Bootstrap]Bootstrap 代码
  • [Bootstrap]Bootstrap 表格
  • [Bootstrap]Bootstrap 表单
  • [Bootstrap]Bootstrap 按钮
  • [Bootstrap]Bootstrap 图片
  • [Bootstrap]Bootstrap 辅助类
  • [Bootstrap]Bootstrap 响应式实用工具
  • [Bootstrap]Bootstrap 字体图标(Glyphicons)
  • [Bootstrap]Bootstrap 下拉菜单(Dropdowns)
  • [Bootstrap]Bootstrap 按钮组
  • [Bootstrap]Bootstrap 按钮下拉菜单
  • [Bootstrap]Bootstrap 输入框组
  • [Bootstrap]Bootstrap 导航元素
  • [Bootstrap]Bootstrap 导航栏
  • [Bootstrap]Bootstrap 面包屑导航Breadcrumbs
  • [Bootstrap]Bootstrap 分页
  • [Bootstrap]Bootstrap 标签
  • [Bootstrap]Bootstrap 徽章 Badges
  • [Bootstrap]Bootstrap 超大屏幕 Jumbotron
  • [Bootstrap]Bootstrap 页面标题 Page Header
  • [Bootstrap]Bootstrap 缩略图
  • [Bootstrap]Bootstrap 警告 Alerts
  • [Bootstrap]Bootstrap 进度条
  • [Bootstrap]Bootstrap 多媒体对象(Media Object)
  • [Bootstrap]Bootstrap 列表组
  • [Bootstrap]Bootstrap 面板Panels
  • [Bootstrap]Bootstrap Well
  • [Bootstrap]Bootstrap 插件概览
  • [Bootstrap]Bootstrap 过渡效果 Transition插件
  • [Bootstrap]Bootstrap 模态框 Modal插件
  • [Bootstrap]Bootstrap 下拉菜单(Dropdown)插件
  • [Bootstrap]Bootstrap 滚动监听 Scrollspy 插件
  • [Bootstrap]Bootstrap 标签页 Tab插件
  • [Bootstrap]Bootstrap 提示工具Tooltip插件
  • [Bootstrap]Bootstrap 弹出框 Popover插件
  • [Bootstrap]Bootstrap 警告框 Alert 插件
  • [Bootstrap]Bootstrap 按钮 Button 插件
  • [Bootstrap]Bootstrap 折叠 Collapse 插件
  • [Bootstrap]Bootstrap 轮播 Carousel 插件
  • [Bootstrap]Bootstrap 附加导航 Affix 插件
  • [Bootstrap]Bootstrap UI 编辑器(开发工具)
  • [Bootstrap]Bootstrap HTML编码规范
  • [Bootstrap]Bootstrap CSS编码规范
  • [Bootstrap]Bootstrap Web框架
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> HTML >> Bootstrap >> Bootstrap 辅助类
    Bootstrap 辅助类
    更新日期: 2017年07月19日 来源: 本站原创 作者: 佚名 阅读:
    上一篇Bootstrap 图片 下一篇:Bootstrap 响应式实用工具

    bootstrap 辅助类

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

    文本

    以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:

    描述 实例
    .text-muted "text-muted" 类的文本样式
     
    .text-primary "text-primary" 类的文本样式
     
    .text-success "text-success" 类的文本样式
     
    .text-info "text-info" 类的文本样式
     
    .text-warning "text-warning" 类的文本样式
     
    .text-danger "text-danger" 类的文本样式
     

    背景

    以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:

    描述 实例
    .bg-primary 表格单元格使用了 "bg-primary" 类
     
    .bg-success 表格单元格使用了 "bg-success" 类
     
    .bg-info 表格单元格使用了 "bg-info" 类
     
    .bg-warning 表格单元格使用了 "bg-warning" 类
     
    .bg-danger 表格单元格使用了 "bg-danger" 类
     

    其他

    描述 实例
    .pull-left 元素浮动到左边
     
    .pull-right 元素浮动到右边
     
    .center-block 设置元素为 display:block 并居中显示
     
    .clearfix 清除浮动
     
    .show 强制元素显示
     
    .hidden 强制元素隐藏
     
    .sr-only 除了屏幕阅读器外,其他设备上隐藏元素
     
    .sr-only-focusable 与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户)
     
    .text-hide 将页面元素所包含的文本内容替换为背景图
     
    .close 显示关闭按钮
     
    .caret 显示下拉式功能
     

    更多实例

    关闭图标

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

    实例

    <p>关闭图标实例 <button type="button" class="close" aria-hidden="true"> &times; </button> </p>

     

    结果如下所示:

    Bootstrap 辅助类

    插入符

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

    实例

    <p>插入符实例 <span class="caret"></span> </p>

     

    结果如下所示:

    Bootstrap 辅助类

    快速浮动

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

    实例

    <div class="pull-left"> 向左快速浮动 </div> <div class="pull-right"> 向右快速浮动 </div>

     

    结果如下所示:

    Bootstrap 辅助类

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

    内容居中

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

    实例

    <div class="row">
    <div class="center-block" style="width:200px;background-color:#ccc;"> 这是 center-block 实例 </div>
    </div>

     

    结果如下所示:

    Bootstrap 辅助类

    清除浮动

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

    实例

    <div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
    <div class="pull-left" style="background:#58D3F7;"> 向左快速浮动 </div>
    <div class="pull-right" style="background: #DA81F5;"> 向右快速浮动 </div>
    </div>

     

    结果如下所示:

    Bootstrap 辅助类

    显示和隐藏内容

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

    实例

    <div class="row" style="padding: 91px 100px 19px 50px;">
    <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;"> 这是 show class 的实例 </div>
    <div class="hidden" style="width:200px;background-color:#ccc;"> 这是 hide class 的实例 </div>
    </div>

     

    结果如下所示:

    Bootstrap 辅助类

    屏幕阅读器

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

    实例

    <div class="row" style="padding: 91px 100px 19px 50px;">
    <form class="form-inline" role="form">
    <div class="form-group">
    <label class="sr-only" for="email">Email 地址</label>
    <input type="email" class="form-control" placeholder="Enter email"> </div>
    <div class="form-group">
    <label class="sr-only" for="pass">密码</label>
    <input type="password" class="form-control" placeholder="Password"> </div>
    </form>
    </div>

     

    结果如下所示:

    Bootstrap 辅助类

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

     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇Bootstrap 图片 下一篇:Bootstrap 响应式实用工具
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918