在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. UVa 11437:Triangle Fun（计算几何综合应用，求直线交点，向量运算，求三角形面积）

    Problem ATriangle Fun Input: Standard Input Output: Standard Output In the picture below you can see ...

  2. Windows 10 上强制Visual Studio以管理员身份运行

    Windows 10 的一个既安全又蛋疼之处是UAC的行为被改变了.以往在Windows 7中,只要关闭了UAC,自己的帐号又是本机管理员组的,任何程序都会以管理员身份启动.然而,在Windows 8 ...

  3. Xamarin.Android开发实践（六）

    Xamarin.Android通知详解 一.发送通知的机制 在日常的app应用中经常需要使用通知,因为服务.广播后台活动如果有事件需要通知用户,则需要通过通知栏显示,而在Xamarin.Android ...

  4. poj 1087 最大流

    没啥好说的,慢慢建图 Sample Input 4 A B C D 5 laptop B phone C pager B clock B comb X 3 B X X A X D Sample Out ...

  5. HDU 5009 Paint Pearls 双向链表优化DP

    Paint Pearls Problem Description   Lee has a string of n pearls. In the beginning, all the pearls ha ...

  6. 动态设置form表单的元素值

    因为经常用到的功能,所以我想到封装一个函数,用起来更方便快捷.. 先来看效果图如下: var data = {a:'aaaa', b:'2', 'c':[1,2,4]} 这就相当于 ajax 返回的j ...

  7. C#学习笔记（六）——面向对象编程简介

    一.面向对象编程的含义 *   是一种模块化编程方法,使代码的重用性大大的增加. *   oop技术使得项目的设计阶段需要的精力大大的增加,但是一旦对某种类型的数据表达方式达成一致,这种表达方式就可以 ...

  8. Messenger信使

    * Messenger用于Activity和Service之间消息传递 需求:activity来绑定服务,绑定成功后,将数据发送给service,service收到消息后,再发送信息给activity ...

  9. HTML-Canvas01

    画直线: var c = document.getElementById("myCanvas"); //不要忘写document var ctx = c.getContext(&q ...

  10. 计算几何 2013年山东省赛 A Rescue The Princess

    题目传送门 /* 已知一向量为(x , y) 则将它旋转θ后的坐标为(x*cosθ- y * sinθ , y*cosθ + x * sinθ) 应用到本题,x变为(xb - xa), y变为(yb ...