响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在PC端和手机端均可以完美的展现其内容,具有自适应性。

使用基于Bootstrap的栅格系统

Bootstrap响应式布局是利用其栅格系统,对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板,PC端都能使用,而不用考虑使用媒体查询(针对不同的设备分别写不同的代码)。Bootstrap的官方解释:Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为做多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。

1. 栅格系统的工作原理

(1)行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列内补(padding)。 
(2)通过行(row)在水平方向创建一组列(column)。 
(3)自己内容应当放置于列(column)内,并且,只有列可以作为行(row)的直接子元素。 
(4)类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局。
(5)通过为列设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding。 
(6)栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。 
(7)如果一行(row)中包含了的列(column)大于12,多余的列所在的元素将作为一个整体另起一行排列。 
(8)栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕覆盖栅格类。

  1. <div class="container">
  2.  
  3. <h1>Hello, world!</h1>
  4.  
  5. <div class="row">
  6.  
  7. <div class="col-md-3" style="background-color: #dedef8;box-shadow:
  8. inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  9. <h4>第一列</h4>
  10. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  11. </div>
  12.  
  13. <div class="col-md-9" style="background-color: #dedef8;box-shadow:
  14. inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  15. <h4>第二列 - 分为四个盒子</h4>
  16. <div class="row">
  17. <div class="col-md-6" style="background-color: #B18904;
  18. box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  19. <p>Consectetur art party Tonx culpa semiotics. Pinterest
  20. assumenda minim organic quis.
  21. </p>
  22. </div>
  23. <div class="col-md-6" style="background-color: #B18904;
  24. box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  25. <p> sed do eiusmod tempor incididunt ut labore et dolore magna
  26. aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  27. ullamco laboris nisi ut aliquip ex ea commodo consequat.
  28. </p>
  29. </div>
  30. </div>
  31.  
  32. <div class="row">
  33. <div class="col-md-6" style="background-color: #B18904;
  34. box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  35. <p>quis nostrud exercitation ullamco laboris nisi ut
  36. aliquip ex ea commodo consequat.
  37. </p>
  38. </div>
  39. <div class="col-md-6" style="background-color: #B18904;
  40. box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  41. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  42. sed do eiusmod tempor incididunt ut labore et dolore magna
  43. aliqua. Ut enim ad minim.</p>
  44. </div>
  45. </div>
  46.  
  47. </div>
  48.  
  49. </div>
  50.  
  51. </div>

响应式网站设计---Bootstrap的更多相关文章

  1. IE浏览器支持响应式网站设计

    目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...

  2. 响应式网站设计(Responsive Web design)

    页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...

  3. Web开发——HTML基础(HTML响应式Web设计 Bootstrap)

    参考: 参考:http://www.bootcss.com/ 目录: 1.什么是响应式 Web 设计? 2.创建自己的响应设计 3.使用 Bootstrap 1.什么是响应式 Web 设计? RWD ...

  4. Responsive Design响应式网站设计心得笔记

    这个词已经喊了很久了,一直都是小打小闹,没正经的做过大的响应式全站,这次终于有机会了.网站刚上线半个月,就要改版为响应式设计,支持手机/PC等各类终端显示浏览.今天把首页做好,并测试无误,这里把一些应 ...

  5. 7 个 Bootstrap 在线编辑器用于快速开发响应式网站

    Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...

  6. 使用Quasar设计Material和IOS风格的响应式网站

    使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com   本文转载自:https://segmentfaul ...

  7. 响应式布局及bootstrap(实例)

    说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...

  8. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  9. 响应式Web设计(Responsive Web design)的理念

    页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...

随机推荐

  1. 思维导图软件iMindMap怎么用模板制作思维导图

    随着思维导图的不断发展,市场上相关的软件也越来越多.像XMind.MindManager等.每一款软件都有它独特的亮点.作为众多思维导图软件中的一款,iMindMap算是比较亮眼的了.现在很多人都在用 ...

  2. 紧急发布用cherry-pick检出当前分支所有我的提交记录

    目录 背景 操作命令 cherry-pick git log Shell脚本 背景 公司接了个新项目,需在平台上增加几个新接口,问题是本来说是和平台一起迭代发布的时间提前了,但当前的代码都和其他开发人 ...

  3. C Looooops POJ - 2115

    数论好题.. 香! 首先我们看到这一题, 题意是 \[a + c * x \equiv b (mod \ \ 2 ^ k) \] 对此式移一下项, 得 \[c * x \equiv b - a (mo ...

  4. Contest 1445

    A \(a\) 中第 \(i\) 小的配 \(b\) 中第 \(i\) 大的. 限制相同,这样配最平均. 时间复杂度 \(O\left(tn\log n\right)\). B 最终的一百名至少是第一 ...

  5. Java基础教程——内部类

    内部类 内部类(inner class)是定义在另一个类中的类 内部类的好处: |--1.隐藏机制:内部类封装性更好,隐藏在一个类之中,同一包中的其他类也不能访问 |--2.内部类可以访问外围类的私有 ...

  6. Spring Boot 2.4发布了,但Spring Cloud用户不推荐着急升级

    前段时间Spring Boot发布了本年度最后一个重要更新版本:Spring Boot 2.4.0. 最近在社群里也开始有讨论关于Spring Boot 2.4的一些使用问题.我发现有很多Spring ...

  7. rest-framework:频率控制

    一 频率简介: 为了控制用户对某个url请求的频率,比如,一分钟以内,只能访问三次 二 自定义频率类,自定义频率规则: 自定义的逻辑 #(1)取出访问者ip # (2)判断当前ip不在访问字典里,添加 ...

  8. kafka监听出现的问题,解决和剖析

    问题如下: kafka为什么监听不到数据 kafka为什么会有重复数据发送 kafka数据重复如何解决 为什么kafka会出现俩个消费端都可以消费问题 kafka监听配置文件 一. 解决问题一(kaf ...

  9. MySQL——事务ACID&隔离级别

    数据库事务ACID&隔离级别 什么是事务 事务是用户定义的一个数据库操作序列.这些操作要么全执行,要么全不执行,是一个不可分割的工作单元.在关系型数据库中,事务可以是一条SQL语句,也可以是一 ...

  10. day1(Django)

    1,web项目工作流程 1.1 了解web程序工作流程 1.2 django生命周期   2,django介绍 目的:了解Django框架的作用和特点作用: 简便.快速的开发数据库驱动的网站 Djan ...