12.辅助类样式

2024-04-27 15:06:07

字体：大中小

来源：转载

供稿：网友

<!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> <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">×</button> </div> <div class="row" style="border:1px solid red"> <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> </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>

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