页面的设计与开发应当根据用户行为以及设备环境 (系统平台, 屏幕尺寸, 屏幕定向等) 进行相应的响应和调整. 具体的实践方式由多方面组成, 包括弹性网格和布局, 图片, CSS media query 的使用等. 无论用户正在使用笔记本还是 iPad, 我们的页面都应该能够自动切换分辨率, 图片尺寸及相关脚本功能等, 以适应不同设备; 换句话说, 页面应该有能力去自动响应用户的设备环境. 响应式网页设计就是一个网站能够兼容多个终端 -- 而不是为每个终端做一个特定的版本. 这样, 我们就可以不必为不断到来的新设备做专门的版本设计和开发了.
Bootstrap, 来自 Twitter, 是目前最受欢迎的前端框架. Bootstrap 是基于 html,CSS,JavaScript 的, 它简洁灵活, 使得 web 开发更加快捷.
官方文档 ( https://v3.bootcss.com/ )
Bootstrap 提供了一套响应式, 移动设备优先的流式网格系统, 随着屏幕或视口 (viewport) 尺寸的增加, 系统会自动分为最多 12 列.
什么是网格(Grid)?
在平面设计中, 网格是一种由一系列用于组织内容的相交的直线 (垂直的, 水平的) 组成的结构(通常是二维的). 它广泛应用于打印设计中的设计布局和内容结构. 在网页设计中, 它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法. 简单地说, 网页设计中的网格用于组织内容, 让网站易于浏览, 并降低用户端的负载.
什么是 Bootstrap 网格系统(Grid System)? Bootstrap 官方文档中有关网格系统的描述:
Bootstrap 包含了一个响应式的, 移动设备优先的, 不固定的网格系统, 可以随着设备或视口大小的增加而适当地扩展到 12 列. 它包含了用于简单的布局选项的预定义类, 也包含了用于生成更多语义布局的功能强大的混合类. 让我们来理解一下上面的语句. Bootstrap 3 是移动设备优先的, 在这个意义上, Bootstrap 代码从小屏幕设备 (比如移动设备, 平板电脑) 开始, 然后扩展到大屏幕设备 (比如笔记本电脑, 台式电脑) 上的组件和网格.
Bootstrap 网格系统 (Grid System) 的工作原理 网格系统通过一系列包含内容的行和列来创建页面布局. 下面列出了 Bootstrap 网格系统是如何工作的:
行必须放置在 .container class 内, 以便获得适当的对齐 (alignment) 和内边距 (padding). 使用行来创建列的水平组. 内容应该放置在列内, 且唯有列可以是行的直接子元素. 预定义的网格类, 比如 .row 和 .col-xs-4, 可用于快速创建网格布局. Less 混合类可用于更多语义布局. 列通过内边距(padding) 来创建列内容之间的间隙. 该内边距是通过 .rows 上的外边距 (margin) 取负, 表示第一列和最后一列的行偏移. 网格系统是通过指定您想要横跨的十二个可用的列来创建的. 例如, 要创建三个相等的列, 则使用三个 .col-xs-4
样例代码
- <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>
响应式网站设计(Responsive Web design)
来源: http://www.bubuko.com/infodetail-3041014.html