Bootstrap-辅助类和响应工具

最新推荐文章于 2023-03-16 14:17:28 发布

幸运的菇凉

最新推荐文章于 2023-03-16 14:17:28 发布

阅读量228

点赞数

分类专栏：学习心得

本文链接：https://blog.csdn.net/qq_27626645/article/details/78808469

版权

学习心得专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .a{
            height: 50px;
            width: 200px;
            border: 1px solid #ccc;
            background-color: #eee;
        }
    </style>
</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><!--危险红-->

    <!--情景背景色-->

    <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><!--危险红-->

    <!--关闭按钮-->
    <button type="button" class="close">&times</button>

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

    <!--快速浮动 就是float加了！important优先级-->
    <div class="pull-left">左边</div>
    <div class="pull-right">右边</div>

    <!--块级居中-->
    <div class="center-block a">居中</div>

    <!--清理浮动:放在需要清理的浮动块前面-->
    <div class="clearfix "></div>

    <!--显示和隐藏-->
    <div class="show">show</div>
    <div class="hidden">hidden</div>

<!--响应式工具：在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容，响应式工具提供了解决方案-->
    <div class="visible-xs-block">超小屏激活显示</div><!--缩小屏幕会显示-->
    <div class="hidden-xs">超小屏隐藏显示</div><!--有三种变体：block,inline-block,inline-->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

幸运的菇凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-辅助类和响应工具

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style...
复制链接

扫一扫

专栏目录