在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. hdu 1195:Open the Lock（暴力BFS广搜）

    Open the Lock Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  2. hdu 4268 multiset+贪心

    Alice和Bob有n个长方形,有长度和宽度,一个矩形可以覆盖另一个矩形的条件的是,本身长度大于等于另一个矩形,且宽度大于等于另一个矩形,矩形不可旋转,问你Alice最多能覆盖Bob的几个矩形? /* ...

  3. Android下拉刷新完全解析，教你如何一分钟实现下拉刷新功能 （转）

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最 近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在 ...

  4. MVC的处理过程

    MVC的处理过程,首先控制器接受用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回的数据,并通过表示层呈现给用户.

  5. loj 1168(Tarjan应用)

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=26882 思路:一开始把题意理解错了,还以为是简单路径,然后仔细一看 ...

  6. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

  7. Android，visibility属性

    Android,visibility属性 1) 可见(visible)XML文件:android:visibility="visible"Java代码:view.setVisibi ...

  8. BZOJ4389 : ZYB and Trees

    Link-Cut Tree维护. 每个点x维护以下信息: v:这个点的点权 s:实链上的信息和 st:子树信息和(不包括链上) sa:子树+链上的信息和 as:所有虚儿子的sa的和 则有 s[x]=v ...

  9. BZOJ2674 : Attack

    整体二分+树状数组套Treap,时间复杂度$O(n\log^3n)$. #include<cstdio> #include<cstdlib> #include<algor ...

  10. html5中manifest特性测试

    测试环境和工具   chromium  18.0.1025.151 (开发编译版 130497 Linux) Ubuntu 11.04 一.测试内容 1.A页面manifest缓存的js文件,B页面不 ...