Bootstrap之辅助类样式，响应式工具和小图标组件

最新推荐文章于 2024-08-08 07:17:07 发布

英子的搬砖日志

最新推荐文章于 2024-08-08 07:17:07 发布

阅读量3.8k

点赞数 2

分类专栏： web前端文章标签： bootstrap 响应式小图标组件辅助类样式

本文链接：https://blog.csdn.net/ganyingxie123456/article/details/71375469

版权

web前端专栏收录该内容

53 篇文章 6 订阅

订阅专栏

Bootstrap之辅助类样式，响应式工具和小图标组件的使用

一. 辅助类样式

Bootstrap 在布局方面提供了一些细小的辅助类样式，用于文字颜色以及背景色的设置、显示关闭图标等等。

1. 文本颜色类
这里写图片描述

2. 背景颜色类
这里写图片描述

3. 其他类

关闭按钮 close

三角符号 caret

块级居中 center-block

快速浮动 pull-left（左浮动），pull-right(右浮动)

清理浮动 clearfix

显示和隐藏 show(显示)，hidden(隐藏)

二. 响应式工具

之所以介绍响应式工具，是因为在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。

这里写图片描述

超小屏幕激活隐藏 hidden-xs

超小屏幕激活显示 visible-xs-block

注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。

三. 小图标组件

Bootstrap 提供了免费的 263 个小图标（数字可能改变），具体可以参考中文官网的组件。

网址：http://v3.bootcss.com/components/#glyphicons。

部分小图标：
这里写图片描述

使用方式：

配合标签使用

    <i class="glyphicon glyphicon-star">star</i>
    <span class="glyphicon glyphicon-heart">heart</span>

配合按钮使用

    <button class="btn btn-default btn-lg">
        <i class="glyphicon glyphicon-glass"></i>
    </button>

四. 具体使用演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
    <title>test4 辅助类和响应式工具</title>
    <link rel="stylesheet" href="../bootstrap-3.3.4/css/bootstrap.min.css">
    <style type="text/css">
    .a{
        height:50px;
        width: 100px;
        border: 1px solid black;
        background-color: #ccc;
    }
    </style>
</head>

<body style="margin: 10px; ">

    文本颜色
    <p class="text-muted">text-muted</p>
    <p class="text-primary">text-primary</p>
    <p class="text-success">text-success</p>
    <p class="text-info">text-info</p>
    <p class="text-warning">text-warning</p>
    <p class="text-danger">text-danger</p>

    <br>背景颜色
    <p class="bg-primary">bg-primary</p>
    <p class="bg-success">bg-success</p>
    <p class="bg-info">bg-info</p>
    <p class="bg-warning">bg-warning</p>
    <p class="bg-danger">bg-danger</p>

    <br>关闭按钮<br>
    <button class="close">&times;</button>

    <br>三角符号<br>
    <span class="caret"></span>

    <hr style= "border: 1px solid red">

    <br>快速浮动<br>
    <div class="pull-left a">left</div>
    <div class="pull-right a">right</div>

    <hr style= "border: 1px solid red">

    <br><br>区块居中<br>
    <div class="center-block a">center-block</div>

    <hr style= "border: 1px solid red">

    <br>请除浮动<br>
    <div class="pull-left a">left</div>左浮动
    <div class="clearfix"></div> <!-- 请除浮动,如果没有这句，那么no-flow的背景会被浮动的left掩盖 -->
    <div class="a">no-flow</div>

    <hr style= "border: 1px solid red">

    <br>显示/隐藏<br>
    <div class="show">show</div>
    <div class="hidden">hidden</div>


    <!-- 响应式工具 -->
    <div class="visible-xs-inline a">超小屏激活显示</div>
    <div class="hidden-xs a">超小屏激活隐藏</div>

    <!-- 小图标组件 -->

    <!-- 配合标签使用 -->
    <i class="glyphicon glyphicon-star">star</i>
    <span class="glyphicon glyphicon-heart">heart</span>

    <!-- 配合按钮使用 -->
    <button class="btn btn-default btn-lg">
        <i class="glyphicon glyphicon-glass"></i>
    </button>

</body>
</html>