在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类：

　　.visible-phone:

　　　　　在智能手机设备上显示这个元素，在其他设备上隐藏该元素

　　.visible-tablet:

　　　　　在平板电脑上显示这个元素，在其他设备上隐藏该元素

　　.visible-desktop:

　　　　　在桌面电脑上显示这个元素，在其他设备上隐藏该元素

　　.hidden-phone:

　　　　在智能手机上隐藏，在其他设备上显示该元素

　　.hidden-tablet:

　　　　在平板电脑上隐藏，在其他设备上显示该元素

　　.hidden-desktop:

　　　　在桌面电脑上隐藏，在其他设备上显示该元素

　　测试（略）：

　　　　先引入bootstrap-responsive.css文件

　　　　然后再测试的元素上应用以上的类，通过调整浏览窗口的大小来测试！

Bootstrap页面布局7 - Bootstrap响应式布局的实用类的更多相关文章

  1. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  2. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  3. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  4. Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局

    首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel= ...

  5. Bootstrap 手机屏幕自适应的响应式布局开关

    head中添加 <meta name="viewport" content="width=device-width, initial-scale=1, shrink ...

  6. Bootstrap如何禁止响应式布局 不适配

    Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...

  7. Bootstrap如何禁止响应式布局

    Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好.下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样. 禁止响应式布局有如下几步: 移除 此 ...

  8. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  9. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  10. HTML5学习总结-番外05 响应式布局

    1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...

随机推荐

  1. ***Linux文件夹文件创建、删除、改名

    Linux删除文件夹命令 linux删除目录很简单,很多人还是习惯用rmdir,不过一旦目录非空,就陷入深深的苦恼之中,现在使用rm -rf命令即可.直接rm就可以了,不过要加两个参数-rf 即:rm ...

  2. Xamarin.Android开发实践（十一）

    Xamarin.Android之使用百度地图起始篇 一.前言 如今跨平台开发层出不穷,而对于.NET而言时下最流行的当然还是 Xamarin,不仅仅能够让我们在熟悉的Vs下利用C#开发,在对原生态类库 ...

  3. x264测试代码

    建立一个工程,将头文件,库文件加载到工程,测试代码如下:#include <iostream>#include <string>#include "stdint.h& ...

  4. Action类为何要 extends ActionSupport

    我做的时候,我的action是继承ActionSupport的 Struts 2的Action无须实现任何接口或继承任何类型,普通的POJO类就可以用做Action类,但是,我们为了方便实现Actio ...

  5. POJ 2778 DNA Sequence（AC自动机+矩阵加速）

    DNA Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9899   Accepted: 3717 Desc ...

  6. 精灵动画Animation对话框组成Idle动画的各精灵

    精灵动画Animation对话框组成Idle动画的各精灵 1.3  精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...

  7. jQuery检查某个元素在网页上是否存在

    jQuery选择器有比较完善的处理机制,用jQuery获取网页中不存在的元素也不会报错,值得注意的是,利用$('#tt')获取的永远是对象,即使网页上没有此元素.当使用jQuery检查某个元素在网页上 ...

  8. 简单几何(凸包+枚举) POJ 1873 The Fortified Forest

    题目传送门 题意:砍掉一些树,用它们做成篱笆把剩余的树围起来,问最小价值 分析:数据量不大,考虑状态压缩暴力枚举,求凸包以及计算凸包长度.虽说是水题,毕竟是final,自己状压的最大情况写错了,而且忘 ...

  9. SCU3109 Space flight（最大权闭合子图）

    嗯,裸的最大权闭合子图. #include<cstdio> #include<cstring> #include<queue> #include<algori ...

  10. unity 翻牌游戏（全都是gui）

    ;//列数 ;//行数 ;//所有卡片的数量 var matchesNeededToWin:int = totalCards*0.5;//最大匹配数,用来判断游戏是否胜利 ; ; ; var aCar ...