在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. .net学习之.net和C#关系、运行过程、数据类型、类型转换、值类型和引用类型、数组以及方法参数等

    1..net 和 C# 的关系.net 是一个平台,C#是种语言,C#语言可以通过.net平台来编写.部署.运行.net应用程序,C#通过.net平台开发.net应用程序2..net平台的重要组成FC ...

  2. Codeforces Round #Pi (Div. 2) C. Geometric Progression map

    C. Geometric Progression Time Limit: 2 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/5 ...

  3. loj 1026( tarjan + 输出割边 ）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1026 思路:Tarjan 算法简单应用.割边的特点:low[v]>dfn[u]( ...

  4. sql2005-数据库备份方案 (转载)

    sql2005数据库备份一般情况分为二种:一是手工备份.二是自动备份.以下是二种方法的步骤: 一.手工备份 打开数据库,选择要备份数据库,右键选择[任务]->[备份],打开备份数据库页面,在[源 ...

  5. HDFS数据迁移解决方案之DistCp工具的巧妙使用

    前言 在当今每日信息量巨大的社会中,源源不断的数据需要被安全的存储.等到数据的规模越来越大的时候,也许瓶颈就来了,没有存储空间了.这时候怎么办,你也许会说,加机器解决,显然这是一个很简单直接但是又显得 ...

  6. TYVJ P1004 滑雪 Label：记忆化搜索

    背景 成成第一次模拟赛 第三道 描述     trs喜欢滑雪.他来到了一个滑雪场,这个滑雪场是一个矩形,为了简便,我们用r行c列的矩阵来表示每块地形.为了得到更快的速度,滑行的路线必须向下倾斜.    ...

  7. 【BZOJ】2820: YY的GCD（莫比乌斯）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2820 此题非常神! 下文中均默认n<m 首先根据bzoj1101的推理,我们易得对于一个数d使 ...

  8. 【BZOJ】2049: [Sdoi2008]Cave 洞穴勘测（lct/并查集）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2049 bzoj挂了..在wikioi提交,,1A-写lct的速度越来越快了-都不用debug-- 新 ...

  9. [开源框架推荐]Icepdf：纯java的pdf文档的提取和转换库

    ICEpdf 是一个轻量级的开源 Java 语言的 PDF 类库.通过 ICEpdf 可以用来浏览.内容提取和转换 PDF 文档,而无须一些本地PDF库的支持. 可以用来做什么? 1.从pdf文件中提 ...

  10. hdu Bone Collector

    入门级动态规划 #include"iostream" #include"string.h" #include"stdio.h" using ...