bootstrap32-响应式实用工具类(bootstrap,响应,式实用,开发技术)

时间:2024-04-29 03:24:50 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 辅助类</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container" style="padding: 40px;">

<div class="row visible-on">

<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<span class="hidden-xs">特别小型</span>

<span class="visible-xs"> 在特别小型设备上可见</span>

</div>


<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<span class="hidden-sm">小型</span>

<span class="visible-sm"> 在小型设备上可见</span>

</div>


<div class="clearfix visible-xs"></div>


<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<span class="hidden-md">中型</span>

<span class="visible-md"> 在中型设备上可见</span>

</div>

<div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

<span class="hidden-lg">大型</span>

<span class="visible-lg"> 在大型设备上可见</span>

</div>

</div>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

bootstrap32-响应式实用工具类

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:bootstrap32-响应式实用工具类的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:bootstrap25-控件状态下一篇:

6 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18