首先引入文件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. Wcf for wp8 调试Wcf服务程序(四)

    1.要以管理员身份进行登录vs2012 否则会提示: 2.在wcf 服务程序上设为启动项 3.编译 运行你的wcf服务程序 点击 就出现wcftestclient.exe 客户端调试程序 双击点击Re ...

  2. String 和 document 的相互转换总结

    转自:http://blog.sina.com.cn/s/blog_7f865faf01014qrs.html 一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转 ...

  3. 常用的Linux操作

    1.运行.sh文件 第一种方法: 首先你要打开一个终端. 然后输入sudo su 随后输入密码.这样就取得了root用户权限. 然后找到那个文件 执行./sh文件名字 这样.sh就运行了. 第二种方法 ...

  4. 【HTML5】audio音频

    当前,audio 元素支持三种音频格式:   IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   √ √ √   MP3 √ ...

  5. CDH中，执行HIVE脚本表联查权限问题。。

    文章来自http://www.cnblogs.com/hark0623/p/4174641.html 转发请注明 有时候执行表联查的时候总会出现没有权限写文件的情况. 这个时候使用sudo -H hi ...

  6. 游戏控制杆OUYA游戏开发快速入门教程

    游戏控制杆OUYA游戏开发快速入门教程 1.2.2  游戏控制杆 游戏控制杆各个角度的视图,如图1-4所示,它的硬件规格是本文选自OUYA游戏开发快速入门教程大学霸: 图1-4  游戏控制杆各个角度的 ...

  7. 了解Json

    Json(JavaScript Object Notation) 是一种轻量级的数据交换格式,它是基于JavaScript的一个子集. 数据格式简单, 易于读写, 占用带宽小. {'age':'12' ...

  8. mysql之对触发器的操作

    1. 为什么要使用触发器? 触发器与函数有些类似,都需要声明,执行.但是触发器的执行不是由程序调用,也不是由手工启动,而是由事件来触发,激活,从而实现执行. 当触发DELETE,INSERT,UPDA ...

  9. Android RelativeLayout 实现左右中布局

    效果图如下: 代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  10. POJ2047 Concert Hall Scheduling（最小费用最大流）

    题目大概是有两个音乐厅,有n个乐队申请音乐厅,他们必须从第ii天到第ji天连续开音乐会且他们的开价是wi,每天每个音乐厅都只能供一个乐队进行音乐会.问接受哪些乐队的申请,获利最多能多少. 这题相当于在 ...