抓住重点 下面开始实现Bootstrap版本3的Demo 案例

首先去官方网站  http://www.bootcss.com/ 下载

点击 进入

点击 进入

下载

把 相关的js和css 拷贝到项目中

为了看到直观的 效果  我们给了div 添加了背景样式 现在  看看效果

尽管屏幕在变小 恒向 也不会出现 滚动条   简单吧

bootstrap3 响应式布局栅格式布局的更多相关文章

  1. PC响应式、固宽布局思想

    截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局. 如果不明 ...

  2. 静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

    静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

  3. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  4. 前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  5. webapp，liveapp： 流式布局和rem布局

    liveapp场景应用,一般针对的是移动端,近来也是很火,颇有一些感受,拿来分享一下. 页面宽度范围: 一般移动端页面我们的像素范围是320px-640px,最大640px,最小320px,所以设计稿 ...

  6. Django中间件，CSRF（跨站请求伪造），缓存，信号，BootStrap(模板)-响应式（栅格）+模板

    Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板 1.中间件(重要): 在Django的setting中有个MIDDLEWARE列表,里面的东 ...

  7. Web前端_流式布局（百分比布局）

    移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...

  8. 你不知道的css各类布局（二）之流体布局、液体布局、栅格布局

    流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元 ...

  9. 你不知道的css各类布局（一）之固定布局、静态布局

    前言 当为大量用户设计网站时,设计人员必须考虑到访问者的差异: 屏幕分辨率, 浏览器的选择, 是否在浏览器最大化状态, 浏览器的额外工具栏的开启(历史记录,书签等), 操作系统和硬件. 我们知道css ...

随机推荐

  1. 超市RFID结算系统项目进度与总结

    超市RFID结算系统项目进度与总结 超市RFID结算系统本周末(明天演示),目前进度如下: 一.后台PHP端已经完成了大部分的工作,包括以下: 1.数据库的建立(目前只包括用户表.商品信息表.购物车表 ...

  2. Nodejs的多线程

    转: http://snoopyxdy.blog.163.com/blog/static/60117440201349352443/

  3. mongodb学习(六)索引

    准备工作: 先插入100万条数据 for(i=0;i<=1000000;i++){ db.users.insert({ "i":i, "username" ...

  4. IOS软件国际化（本地化Localizable）

    IOS软件国际化(本地化Localizable) iPhone是支持语言最多的手机,它支持各国语言及中国少数名族如蒙古等语言,这也是好多少数名族都用苹果的原因.在这一点上我们自主品牌还是要多学习学习. ...

  5. js动画学习笔记

    <html> <head> <meta charest="utf-8"> <title>test</title> < ...

  6. SQL数据库文件修复/用友/金蝶/管家婆/速达/思讯数据库恢复 硬盘恢复

    硬盘的故障情况可以分为以下几类: 1.控制电路故障 大部分外电路的问题是电源芯片或主轴驱动芯片烧坏引起的,由于硬盘电路板质量问题.设计缺陷.市电波动.突然断电.芯片老化或者散热不良.静电等原因造成芯片 ...

  7. OC 优化目录

    把 main. info 和 appdelegate 放到自己的新建目录 1.去掉info.plist的警告 在build phases->copy Bundle Resources中去掉inf ...

  8. 3.IP协议，ARP协议，RARP协议

    1.IP协议 IP协议是TCP/IP协议的核心,所有的TCP,UDP,IMCP,IGCP的数据都以IP数据格式传输.要注意的是,IP不是可靠的协议,这是说,IP协议没有提供一种数据未传达以后的处理机制 ...

  9. Mac 安装Eclipse

    1.下载 1.1.网址 http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/mar ...

  10. 非常完整的PHP的mysql类

    非常完整的PHP的MySQL操作类, 即使PDO, ActiveRecord, ORM, 框架, Framework… 都不如这个强大和好用. 有了它, 你就不会再需要任何MySQL封装了,此类已经在 ...