在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. Guid和Int还有Double、Date的ToString方法的常见格式（转载）

    Guid的常见格式: 1.Guid.NewGuid().ToString("N") 结果为:       38bddf48f43c48588e0d78761eaa1ce6 2.Gu ...

  2. Java Hour 40 Maven ( 2 )

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 40 Maven 坐标 任何一个包都需要一个全世界唯一的id, Ma ...

  3. PHPcms怎么调用二级栏目

    {pc:content action=" siteid="$siteid" order="listorder ASC"}             {l ...

  4. 在ubuntu 14.04 64位系统上安装32位库

    转自:http://www.enjoydiy.com/2937.html 有些软件还是依赖32位的库,但是64位的系统已经成为现在的主流.以前的ubuntu可以通过下面的命令安装:           ...

  5. Oracle11完全卸载方法 deinstall.bat如何用以及如何删除oracle注册表

    转自:http://blog.sina.com.cn/s/blog_68fe7e15010100an.html 之前因为不知道偶电脑是因为安装了oracle后,才导致的长达两周的开机速度要足足10分钟 ...

  6. ER-Studio的五种关系说明

    1. identifying relationship: 1对多. 父实体的主键是子实体的外键(FK1),且FK1是主键. 2. no identifying, mandatory relations ...

  7. Html的一点点收获

    结束了牛腩,总结了自己的收获,我开始了征战HTML的计划,在看<提高班培养计划>的时候,我很诧异,因为<HTML孙鑫>这个项目竟然就只有一天的时间,怎么可以这样,但是,我还是决 ...

  8. Linux常用命令_（进程管理）

    进程管理:ps.top.kill 指令名称:ps语法:ps [选项]-a显示所有终端机下执行的程序.-e显示所有程序.-f显示UID,PPIP,C与STIME栏位.功能描述:查看系统中运行的进程.范例 ...

  9. ArduinoYun的电源插座

    ArduinoYun的电源插座 Arduino Yun有两排插座,这些插座可以按类型分为三类:电源.数字IO和模拟输入.电源部分主要集中在如图1.7所示的部分本文选自Arduino Yun快速入门教程 ...

  10. [LintCode] Binary Tree Serialization

    Design an algorithm and write code to serialize and deserialize a binary tree. Writing the tree to a ...