首先引入文件bootstrap-responsive.css

　　<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

　　bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了相应的响应式设计：

　　比如：

　　　　分辨率宽度1200像素以上的屏幕上，网格的宽度会由60px变为70px，且网格与网格之间的距离由20px变为30px

　　　　在平板电脑的垂直状态下，每一个网格的宽度由默认的60px会变为42px;

　　　　如果是再小一点的屏幕，网格宽度会变为”流动的"宽度，且网格类所在的元素会堆砌在一起。

 

Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局的更多相关文章

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

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

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

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

  3. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  4. 一个菜鸟所喜欢用的响应式布局，操作方便简单、时尚简约，适合新手！（一个Dreamweaver cs6生成响应式布局）

    前端开发并不是一个容易的工作,不仅需要掌握HTML.CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站.如今随着响应式设计的流行,前端开发变得越来越困难,且花费 ...

  5. 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  6. Bootstrap页面布局5 - 响应式布局(格式)

    旨在优化不同上网设备中页面显示的优化 响应式布局:就是根据浏览窗口的尺寸,改变页面的变化 原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在&l ...

  7. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  8. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  9. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

随机推荐

  1. Java Hour 43 Weather ( 12 ) - 杭州 Show

    终于从fastjson 的阴影中走出来了,接下去就是显示一个完整的天气信息了. 43.1 Weather Show 首先增加Model 中的属性. public class Weatherinfo { ...

  2. struts2框架——从后台取得数据集，并在前台页面循环显示

    1.CourseBean.java public class CourseBean { private String f_courseId = ""; private String ...

  3. androidSDK也要配置环境变量（转）

    android的开发人员来说,首先要做的就是环境变量的配置.java是需要配置环境变量的.当然,安卓的环境变量需要我们配置adb的使用,将开发平台的两个工具包配置到环境变量里. 工具/原料 andro ...

  4. MATLAB信号与系统分析（四）——离散信号与系统的复频域分析及MATLAB实现

    一.系统的z变换和反变换 1.利用部分分式展开求解逆Z变换: 2.例子 3.Z变换的MATLAB函数 clear all f=sym('cos(a*k)'); F=ztrans(f) F=sym('z ...

  5. python 类访问控制

    访问限制 我们可以给一个实例绑定很多属性,如果有些属性不希望被外部访问到怎么办? Python对属性权限的控制是通过属性名来实现的,如果一个属性由双下划线开头(__),该属性就无法被外部访问.看例子: ...

  6. DFS(剪枝) POJ 1724 ROADS

    题目传送门 题意:问从1到n的最短路径,同时满足花费总值小于等于k 分析:深搜+剪枝,如果之前走过该点或者此时的路劲长度大于最小值就不进行搜索. /************************** ...

  7. Redis String命令

        命令 解释 APPEND key value 如果 key 已经存在并且是一个字符串, APPEND 命令将 value 追加到 key 原来的值的末尾. 如果 key 不存在, APPEND ...

  8. ssh org.springframework.beans.TypeMismatchException

    这个问题我搜了一上午都木有解决 后来找到一个英文网站 It seems that some other bean (one that is not shown) has a property of t ...

  9. C# 如何判断数据是否为 NaN

    double a = 0 / 0d; if (double.IsNaN(a)){ //do } 在浮点数计算中, 0除以0将得到NaN ,正数除以0将得到PositiveInfinity ,负数除以0 ...

  10. 【BZOJ】3709: [PA2014]Bohater（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3709 很水的题...但是由于脑洞小..漏想了一种情况.. 首先显然能补血的先杀.. 然后杀完后从补血 ...