Bootstrap页面布局7 - Bootstrap响应式布局的实用类
在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类:
.visible-phone:
在智能手机设备上显示这个元素,在其他设备上隐藏该元素
.visible-tablet:
在平板电脑上显示这个元素,在其他设备上隐藏该元素
.visible-desktop:
在桌面电脑上显示这个元素,在其他设备上隐藏该元素
.hidden-phone:
在智能手机上隐藏,在其他设备上显示该元素
.hidden-tablet:
在平板电脑上隐藏,在其他设备上显示该元素
.hidden-desktop:
在桌面电脑上隐藏,在其他设备上显示该元素
测试(略):
先引入bootstrap-responsive.css文件
然后再测试的元素上应用以上的类,通过调整浏览窗口的大小来测试!
Bootstrap页面布局7 - Bootstrap响应式布局的实用类的更多相关文章
- BootStrap2学习日记2--将固定布局换成响应式布局
概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...
- html响应式布局,css响应式布局,响应式布局入门
html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局
首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel= ...
- Bootstrap 手机屏幕自适应的响应式布局开关
head中添加 <meta name="viewport" content="width=device-width, initial-scale=1, shrink ...
- Bootstrap如何禁止响应式布局 不适配
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...
- Bootstrap如何禁止响应式布局
Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 移动Web之响应式布局的探讨
响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...
- HTML5学习总结-番外05 响应式布局
1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...
随机推荐
- H264码流打包分析
转自:http://www.360doc.com/content/13/0124/08/9008018_262076786.shtml SODB 数据比特串-->最原始的编码数据 RBSP ...
- linux socket 编程(C语言)
转自:http://blog.csdn.net/piaojun_pj/article/details/5920888 最近看了一些网络编程的书籍,一直以来总感觉网络编程神秘莫测,其实网络编程入门还是很 ...
- myeclipse打war包
转自:http://wjlvivid.iteye.com/blog/1401707 右键选中项目,选择export然后选择J2EE->WAR File,点击next 接下来指定war包的存放路径 ...
- Codeforces Round #360 (Div. 2) E. The Values You Can Make DP
E. The Values You Can Make Pari wants to buy an expensive chocolate from Arya. She has n coins, ...
- Notification通知
manager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE); button = (Button) fi ...
- HUE的时区问题
转自 http://molisa.iteye.com/blog/1953390 我主要是根据这个说明调整的HUE的时区问题 在使用Cloudera Hue时遇到一问题: 1. 使用Sqoop导入功 ...
- wrk 进程管理
4.3.1 四种情况创建新进程并调用MmInitializeProcessAddressSpace, 调用完这个函数的时候,一个进程的地址空间基本建立了, 可执行文件的映像和ntdll.dll(内存区 ...
- 贪心 HDOJ 4726 Kia's Calculation
题目传送门 /* 这题交给队友做,做了一个多小时,全排列,RE数组越界,赛后发现读题读错了,囧! 贪心:先确定最高位的数字,然后用贪心的方法,越高位数字越大 注意:1. Both A and B wi ...
- Catching Fish[HDU1077]
Catching Fish Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算(终结版)
首先,说下概念(网上很多帖子几个地方都搞混了,理一下): dip : device independent pixels ,设备无关像素. 我看很多帖子写的五花八门的,关于d的,什么display ...