12.辅助类样式

来源：互联网发布：软件测试方案范例编辑：程序博客网时间：2024/04/28 12:28

<!doctype html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title></title>    <link rel="stylesheet" href="css/bootstrap.css" />    <style>        .chai div{            height:100px;            background-color:skyblue;            border:1px solid #000;            color:#000;        }    </style></head><body>    <div class="container">        <div class="row"><!--字体颜色-->            <p class="text-muted">苹果梨橘子香蕉核桃大枣</p><!--muted的英文含义为柔和的；趋缓的；-->            <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>        </div>        <div class="row"><!--背景颜色-->            <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>        </div>        <div class="row"><!--三角符号、关闭按钮-->            <span class="caret"></span>            <button class="close">&times;</button><!--也可以用大写的X-->        </div>        <div class="row" style="border:1px solid red"><!--浮动，row这个class自带清除浮动-->            <div class="pull-left">111</div><!--左浮动-->            <div class="pull-right">222</div><!--有浮动-->        </div>        <div class="row">            <div class="clearfix" style="border:1px solid blue"><!--清除浮动-->                <div class="pull-left">333</div><!--左浮动-->                <div class="pull-right">444</div><!--有浮动-->            </div>        </div>        <div class="row"><!--居中对齐-->            <div style="width:30px;height:30px;background-color: red" class="center-block"></div><!--用margin:0 auto;也可以-->        </div>        <div class="row chai"><!--隐藏与显示-->            <div class="col-lg-3 show">第1列</div>            <div class="col-lg-3 hidden">第2列</div>            <div class="col-lg-3">第3列</div>            <div class="col-lg-2 invisible">第4列</div>            <div class="col-lg-1">第5列</div>        </div>    </div>    <script src="js/jquery-2.1.0.js"></script>    <script src="js/bootstrap.js"></script></body></html>

运行结果：
这里写图片描述

2.再补充一个响应式工具：
在不同宽度的情况下显示和隐藏相关内容。
visible-lg-block
visible-lg-inline
visible-lg-inline-block 在lg范围内显示元素

hidden-lg 在lg范围内隐藏元素
而md,sm,xs同上。

0 0