响应式网站设计---Bootstrap
响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求,实现不同屏幕分辨率的终端上浏览网页的不同展示方式,使得网页在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)栅格类适用于与屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕覆盖栅格类。
- <div class="container">
- <h1>Hello, world!</h1>
- <div class="row">
- <div class="col-md-3" style="background-color: #dedef8;box-shadow:
- inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
- <h4>第一列</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
- </div>
- <div class="col-md-9" style="background-color: #dedef8;box-shadow:
- inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
- <h4>第二列 - 分为四个盒子</h4>
- <div class="row">
- <div class="col-md-6" style="background-color: #B18904;
- box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
- <p>Consectetur art party Tonx culpa semiotics. Pinterest
- assumenda minim organic quis.
- </p>
- </div>
- <div class="col-md-6" style="background-color: #B18904;
- box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
- <p> sed do eiusmod tempor incididunt ut labore et dolore magna
- aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat.
- </p>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6" style="background-color: #B18904;
- box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
- <p>quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
- </p>
- </div>
- <div class="col-md-6" style="background-color: #B18904;
- box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna
- aliqua. Ut enim ad minim.</p>
- </div>
- </div>
- </div>
- </div>
- </div>
响应式网站设计---Bootstrap的更多相关文章
- IE浏览器支持响应式网站设计
目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...
- 响应式网站设计(Responsive Web design)
页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...
- Web开发——HTML基础(HTML响应式Web设计 Bootstrap)
参考: 参考:http://www.bootcss.com/ 目录: 1.什么是响应式 Web 设计? 2.创建自己的响应设计 3.使用 Bootstrap 1.什么是响应式 Web 设计? RWD ...
- Responsive Design响应式网站设计心得笔记
这个词已经喊了很久了,一直都是小打小闹,没正经的做过大的响应式全站,这次终于有机会了.网站刚上线半个月,就要改版为响应式设计,支持手机/PC等各类终端显示浏览.今天把首页做好,并测试无误,这里把一些应 ...
- 7 个 Bootstrap 在线编辑器用于快速开发响应式网站
Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...
- 使用Quasar设计Material和IOS风格的响应式网站
使用Quasar设计Material和IOS风格的响应式网站 栏目: CSS · 发布时间: 8个月前 来源: segmentfault.com 本文转载自:https://segmentfaul ...
- 响应式布局及bootstrap(实例)
说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- 响应式Web设计(Responsive Web design)的理念
页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...
随机推荐
- 思维导图软件iMindMap怎么用模板制作思维导图
随着思维导图的不断发展,市场上相关的软件也越来越多.像XMind.MindManager等.每一款软件都有它独特的亮点.作为众多思维导图软件中的一款,iMindMap算是比较亮眼的了.现在很多人都在用 ...
- 紧急发布用cherry-pick检出当前分支所有我的提交记录
目录 背景 操作命令 cherry-pick git log Shell脚本 背景 公司接了个新项目,需在平台上增加几个新接口,问题是本来说是和平台一起迭代发布的时间提前了,但当前的代码都和其他开发人 ...
- C Looooops POJ - 2115
数论好题.. 香! 首先我们看到这一题, 题意是 \[a + c * x \equiv b (mod \ \ 2 ^ k) \] 对此式移一下项, 得 \[c * x \equiv b - a (mo ...
- Contest 1445
A \(a\) 中第 \(i\) 小的配 \(b\) 中第 \(i\) 大的. 限制相同,这样配最平均. 时间复杂度 \(O\left(tn\log n\right)\). B 最终的一百名至少是第一 ...
- Java基础教程——内部类
内部类 内部类(inner class)是定义在另一个类中的类 内部类的好处: |--1.隐藏机制:内部类封装性更好,隐藏在一个类之中,同一包中的其他类也不能访问 |--2.内部类可以访问外围类的私有 ...
- Spring Boot 2.4发布了,但Spring Cloud用户不推荐着急升级
前段时间Spring Boot发布了本年度最后一个重要更新版本:Spring Boot 2.4.0. 最近在社群里也开始有讨论关于Spring Boot 2.4的一些使用问题.我发现有很多Spring ...
- rest-framework:频率控制
一 频率简介: 为了控制用户对某个url请求的频率,比如,一分钟以内,只能访问三次 二 自定义频率类,自定义频率规则: 自定义的逻辑 #(1)取出访问者ip # (2)判断当前ip不在访问字典里,添加 ...
- kafka监听出现的问题,解决和剖析
问题如下: kafka为什么监听不到数据 kafka为什么会有重复数据发送 kafka数据重复如何解决 为什么kafka会出现俩个消费端都可以消费问题 kafka监听配置文件 一. 解决问题一(kaf ...
- MySQL——事务ACID&隔离级别
数据库事务ACID&隔离级别 什么是事务 事务是用户定义的一个数据库操作序列.这些操作要么全执行,要么全不执行,是一个不可分割的工作单元.在关系型数据库中,事务可以是一条SQL语句,也可以是一 ...
- day1(Django)
1,web项目工作流程 1.1 了解web程序工作流程 1.2 django生命周期 2,django介绍 目的:了解Django框架的作用和特点作用: 简便.快速的开发数据库驱动的网站 Djan ...