Bootstrap 辅助类

2018-03-22 17:19 更新

情境背景色

我们可以使用情境背景颜色类来设置元素的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
  p{
      padding: 10px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="bg-primary">Important. This is important.</p>
    <p class="bg-success">Success: This is successful.</p>
    <p class="bg-info">Note: This is an information.</p>
    <p class="bg-warning">Warning: This is a warning.</p>
    <p class="bg-danger">Error: This is an error.</p>
</div>
</body>
</html>

关闭图标

Bootstrap有一个关闭图标,用于关闭模态框和警报框。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong>.
    </div>
</div>
</body>
</html>

三角符号

Bootstrap有一个三角符号图标来指示元素具有下拉菜单。

插入符号图标的方向将在下拉菜单下拉时自动反转。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">CSS</a></li>
                <li><a href="#">HTML</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

内容块居中

我们可以使用 .center-block类来居中对齐内容块。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
  .wrapper{
    margin: 20px;
    padding: 10px;
    background: #EEEEEE;
    border: 1px solid #000;
  }
    .center-block{
        width: 50%;
        padding: 30px;
        background: #e3b740;
    }
</style>
</head> 
<body>
<div class="wrapper">
   <div class="center-block">Center Aligned DIV Box</div>
    <p><strong>Note:</strong>.</p>
</div>
</body>
</html>

快速浮动

我们可以使用.pull-left和.pull-right类将元素向左或向右浮动。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
  .bs-example div{
    margin: 20px;
        padding: 20px;
    background: #f0e68c;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="pull-left">Floated to left.</div>
  <div class="pull-right">Floated to right.</div>
</div>
</body>
</html>

清除浮动

.clearfix类清除任何元素上的浮动(float)。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
  .wrapper{
    margin: 20px;
    padding: 10px;
    background: #fffacd;
    border: 1px solid #000;
  }
    .pull-left, .pull-right{
        padding: 20px;
    background: #e3b740;
  }
</style>
</head> 
<body>
<div class="wrapper clearfix">
    <div class="pull-left">Float to left</div>
    <div class="pull-right">Float to right</div>
</div>
</body>
</html>

显示或隐藏内容

我们可以使用.show和.hidden类显示或隐藏一个元素。

.invisible 类可以用来仅切换元素的可见性,元素占用布局中的空间。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
  .bs-example div{
    margin: 20px;
        padding: 20px;
    background: #f0e68c;
  }
  div.hint{
    display: none;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="hint show">This is visible to the user.</div>
    <div class="hidden">This is not visible to the user.</div>
    <div class="invisible">This is not visible but affects the layout.</div>
    <p>This is a normal paragraph.</p>
</div>
</body>
</html>

屏幕阅读器

.sr-only 类可以对屏幕阅读器之外的所有设备隐藏元素。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p>This paragraph is visible to all devices.</p>
  <p class="sr-only">This paragraph is only visible to screen readers.</p>
</div>
</body>
</html>

仅隐藏文本

我们可以使用类.text-hide来隐藏元素的文本内容。

.text-hide使用color:transparent和font-size:0px来隐藏文本。搜索引擎将此类技术视为垃圾邮件。

<h1 class="text-hide">The text of this heading is not visible</h1>
<p class="text-hide">The text of this paragraph is not visible.</p>

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号