css中辅助类和响应式工具所有测试方法案例
2016-08-05 23:00
309 查看
css中辅助类和响应式工具所有测试方法案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<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 style="margin:50px;">
<!--<p class="text-muted">Bootstrap视频教程</p>-->
<!--<p class="text-primary">Bootstrap视频教程</p>-->
<!--<p class="text-success">Bootstrap视频教程</p>-->
<!--<p class="text-info">Bootstrap视频教程</p>-->
<!--<p class="text-warning">Bootstrap视频教程</p>-->
<!--<p class="text-danger">Bootstrap视频教程</p>-->
<!--<p class="text-muted">Bootstrap视频教程</p>-->
<!--<p class="bg-primary">Bootstrap视频教程</p>-->
<!--<p class="bg-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>-->
<!--<div class="pull-left a">左边</div>-->
<!--<div class="pull-right a">右边</div>-->
<!--<div class="center-block a">居中</div>-->
<!--<div class="pull-left a">左边</div>-->
<!--<div class="clearfix"></div>-->
<!--<div class="a">右边</div>-->
<!--<div class="show">显示</div>-->
<!--<div class="hidden">隐藏</div>-->
<!--<div class="visible-xs-inline a">超小屏激活显示</div>-->
<div class="hidden-xs a">超小屏幕的隐藏</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<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 style="margin:50px;">
<!--<p class="text-muted">Bootstrap视频教程</p>-->
<!--<p class="text-primary">Bootstrap视频教程</p>-->
<!--<p class="text-success">Bootstrap视频教程</p>-->
<!--<p class="text-info">Bootstrap视频教程</p>-->
<!--<p class="text-warning">Bootstrap视频教程</p>-->
<!--<p class="text-danger">Bootstrap视频教程</p>-->
<!--<p class="text-muted">Bootstrap视频教程</p>-->
<!--<p class="bg-primary">Bootstrap视频教程</p>-->
<!--<p class="bg-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>-->
<!--<div class="pull-left a">左边</div>-->
<!--<div class="pull-right a">右边</div>-->
<!--<div class="center-block a">居中</div>-->
<!--<div class="pull-left a">左边</div>-->
<!--<div class="clearfix"></div>-->
<!--<div class="a">右边</div>-->
<!--<div class="show">显示</div>-->
<!--<div class="hidden">隐藏</div>-->
<!--<div class="visible-xs-inline a">超小屏激活显示</div>-->
<div class="hidden-xs a">超小屏幕的隐藏</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
相关文章推荐
- 最全的ftp 操作工具(所有方法经过测试,附ftp 服务配置)
- 测试方法和测试工具解决方案(1)
- 测试方法和测试工具解决方案(2)
- JUnit测试案例的测试方法
- 一款js和css代码压缩工具[附JAVA环境配置方法]
- 嵌入式软件测试工具和测试方法
- 第4代白盒测试方法之“如何选择嵌入式白盒测试工具”
- 测试工具LoadRunner里错误 -27728的解决方法
- 测试方法和测试工具解决方案
- 测试方法和测试工具解决方案
- 测试方法和测试工具解决方案(1)
- linux网络配置、测试及故障诊断方法和工具五
- linux网络配置、测试及故障诊断方法和工具三
- 测试方法和测试工具解决方案
- 网络测试及故障诊断方法及工具 v0.1b
- linux网络配置、测试及故障诊断方法和工具四 推荐
- 网络测试及故障诊断方法及工具
- 图解 CSS (1): 先做一个样式表测试工具
- IE6、IE7、IE8之IE多版本共存的几种方法(主要是为了测试css用)
- 测试方法和测试工具解决方案(1)