Bootstrap实用工具
来源:互联网 发布:南昌宝德网络是干嘛的 编辑:程序博客网 时间:2024/05/29 10:00
http://blog.weiqinxue.cn/blogs/index.php/User/articleview/ArticleID/U2A162
Bootstrap 提供了一些帮助器类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。
需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。
打印类
下表列出了打印类。使用这些切换打印内容。
实例
下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 响应式实用工具</title>
<link href=
"/bootstrap/css/bootstrap.min.css"
rel=
"stylesheet"
>
<script src=
"/scripts/jquery.min.js"
></script>
<script src=
"/bootstrap/js/bootstrap.min.js"
></script>
</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>
</body>
</html>
阅读全文
0 0
- Bootstrap实用工具
- Bootstrap 响应式实用工具
- bootstrap 响应式实用工具
- 【Bootstrap】响应式实用工具
- Bootstrap 响应式实用工具
- Bootstrap 响应式实用工具
- Bootstrap学习:响应式实用工具
- 实用工具
- ~~~实用工具~~~
- 实用工具
- 实用工具
- 实用工具
- 实用工具
- 实用工具
- 实用工具
- 实用工具
- 实用工具
- Bootstrap 响应式实用工具——visible-xs、visible-sm、hidden-xs、hidden-sm等
- 密码学----基本概念
- 博文
- POJ
- EasyUI--自定义日历
- Java 8的新特性
- Bootstrap实用工具
- GSON的用法
- android studio的api level的修改
- ZOJ
- Java抽象类和抽象方法
- Docker镜像压缩与优化
- 未来的大神,从现在起
- 探索红黑树中的秘密
- 字符串的扩展