bootstrap 一些有趣的用法
来源：互联网 发布：windows系统的特点 编辑：程序博客网 时间：2024/05/20 23:07
1、
关键代码
<span class="hidden-xs">特别小型</span><span class="visible-xs">✔ 在特别小型设备上可见</span>
<span class="hidden-md">中型</span><span class="visible-md">✔ 在中型设备上可见</span>
<span class="hidden-lg">大型</span><span class="visible-lg">✔ 在大型设备上可见</span>
<div class="clearfix visible-xs"></div><--这句话很重要-->
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例</title>
<!-- 包含头部信息用于适应不同设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 包含 bootstrap 样式表 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/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>
<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<!-- 可选: 包含 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
2、
- bootstrap 一些有趣的用法
- python 的一些有趣用法
- find 的一些有趣的用法
- Bootstrap一些用法总结
- 一些有趣的名字
- 一些有趣的forum
- 一些有趣的题目
- 一些有趣的问题
- 一些有趣的文章
- 有趣的一些智力题
- 一些有趣的blog
- 一些有趣的网站
- 一些有趣的网站
- 一些有趣的网站
- 一些有趣的题目
- 一些有趣的网站
- 一些有趣的图形界面
- 一些有趣的图形界面
- js与el小解
- java代码--Fibonacci数列(递归与非递归效率)
- mysql
- 體影之道
- HorizontalScrollView 实现水平滚动
- bootstrap 一些有趣的用法
- iOS中block实现的探究
- POJ 3469 --Dual Core CPU【最小割】
- ARM mbed平台WIZwiki-W7500使用说明
- ssh之spring
- Quartz调度框架简单介绍
- mysql数据库批量快速插入
- 如何在linux上搭建FTP服务器以及在windows上访问
- HDU 5361 In Touch
