bootstrap——辅助类和响应式工具类
2024-10-09 13:14:34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>辅助类和响应式工具类</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<style type="text/css">
.a{
height: 50px;
width: 200px;
border: 1px solid #ccc;
background-color: #eee;
}
</style>
<body style="margin:50px;">
<!-- 辅助类 -->
<!--
前景色
text-muted：柔和灰
text-primary：主要蓝
text-success：成功绿
text-info：信息蓝
text-warning：警告黄
text-danger：危险红 背景色
bg-primary：主要蓝
bg-success：成功绿
bg-info：信息蓝
bg-warning：警告黄
bg-danger：危险红
-->
<p class="text-muted">bootstrap柔和灰</p>
<p class="text-primary">bootstrap主要蓝</p>
<p class="text-success">bootstrap成功绿</p>
<p class="bg-info">bootstrap信息蓝</p>
<p class="bg-warning">bootstrap警告黄</p>
<p class="bg-danger">bootstrap危险红</p> <!-- 关闭按钮 -->
<button class="close">×</button> <!-- 三角符号 -->
<span class="caret"></span>
<hr> <!-- 快速浮动 -->
<div class="pull-left a">
左边
</div>
<div class="pull-right a">
右边
</div> <!-- 块级居中 -->
<div class="center-block a">居中</div> <hr>
<!-- 清理浮动 -->
<div class="pull-left a">
左边
</div>
<div class="clearfix"></div>
<div class="a">
右边
</div> <hr>
<!-- 显示和隐藏 -->
<div class="show">
显示
</div>
<div class="hidden">
隐藏
</div> <!--
超小屏幕 小屏幕 中等屏幕 大屏幕
.visible-xs-* 见 藏 藏 藏
.visible-sm-* 藏 见 藏 藏
.visible-md-* 藏 藏 见 藏
.visible-lg-* 藏 藏 藏 见
.hidden-xs 藏 见 见 见
.hidden-sm 见 藏 见 见
.hidden-mc 见 见 藏 见
.hidden-lg 见 见 见 藏 对于显示的内容，有三种。分别为：block、inline-block、inline
-->
<!-- 超小屏幕显示 -->
<div class="visible-xs-block a">超小屏幕激活显示</div> <!-- 超小屏幕隐藏 -->
<div class="hidden-xs a">超小屏幕隐藏</div> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
最新文章
- linux杀死jobs的正确方法
- HDU1848 Fibonacci again and again SG函数
- Android 学习第3课，小例子
- EDM备忘录：触发式邮件订阅和退订功能介绍
- Blender to XPS(blender 2.7x Internal materials)
- Linux下MySQL使用
- iOS开发--UIKit控件之UISearchBar(搜索栏)
- QStringList与QString互转
- 隐藏Activity标题栏
- VBS中解决路径带空格的三种方法
- 前端开发利器webStorm
- 设置position（absolute,fixed）导致flex布局不生效
- Linux上svn搭建
- Android：android studio快捷键大全
- print('{:15}|{:^9}|{:^9}'.format('', 'lat.', 'long.'))是什么意思？
- 电梯间的谈话：3分钟快速回答CEO的问题
- AGC001 E - BBQ Hard 组合数学
- 最小生成树 Prim算法 和 Kruskal算法，c++描述
- ipsec协议(转)
- Delphi中ClientDataSet的用法小结