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月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...
随机推荐
- LBS优化方案探究
方案1: 假设数据结构是这个样子的结构 那么找某个范围之内的用户,相当于: select * from tb_lbs_user where lat > lat_min and lat < ...
- C++的那些事:数据与类型
一.前言 最近在看C++Primer第5版,先前已经看过第4版,但是发现第5版在整个知识布局与个别知识的讲解上跟第4版差别还是挺大的,尤其是新增了C++11的内容,正如孟岩老师在第5版前言中所讲:“现 ...
- SqlServer数据库字典--索引.sql
SELECT TOP 100 PERCENT --a.id, CASE WHEN b.keyno = 1 THEN c.name ELSE '' END AS 表名, CASE ...
- 克隆或拷贝的VMware虚拟机IP问题解决
克隆的虚拟机或是将虚拟机通过快照回到过去某个状态后,会上不了网. 如果不想看细节,可直接跳到小结部分. 问题描述: 运行service network restart时 Device eth0 doe ...
- OUYA设备的购买和安装
OUYA设备的购买和安装 在为OUYA这款游戏终端做具体的开发之前,建议读者先上手感受一下这款设备的游戏体验.本节所涉及的内容包括,OUYA设备的购买.安装.设置,以及最终上手开始游戏这一系列的过程本 ...
- Jquery操作
一.文档操作 1.内部插入:append(),appendTo(),prepend(): 2.外部插入:after(),before(): 3.删除操作:remove(),empty(): 4.克隆操 ...
- HDU1561 The more, The Better(树形DP)
题目是有n个存有宝藏的城堡,攻克任何一个城堡都需要先攻克0个或其他1个城堡,问攻克m个城堡最多能得到多少宝藏. 题目给的城堡形成一个森林,添加一个超级根把森林连在一起就是树了,那么就考虑用树型DP: ...
- ural 1246. Tethered Dog
1246. Tethered Dog Time limit: 1.0 secondMemory limit: 64 MB A dog is tethered to a pole with a rope ...
- BZOJ1665 : [Usaco2006 Open]The Climbing Wall 攀岩
直接BFS貌似复杂度飞起来了,于是我们用k-d tree优化找点的过程即可.时间复杂度$O(n\sqrt{n})$. #include<cstdio> #include<algori ...
- BZOJ3830 : [Poi2014]Freight
首先为了保证发车时间都不同,T[i]=max(T[i],T[i-1]+1) 然后设f[i]表示前i列车回来的最早时刻 f[i]=min(max(T[i],f[j]+i-j-1)+s*2+i-j-1) ...