描述Bootstrap框架的自适应式设计理念

1 自适应式设计

自适应式网站设计的概念是由闻名网页设计师Ethan Marcotte于2010年提出的, 其设计理念是针对客户的不偕行为或不同设备, 网页都可以及时做出调整和自适应。自适应式是一种跨终端的网页开发技术, 可以针对不同的设备表现出合理的页面, 实现一次开发、多处适用。无论客户是使用PC或移动设备欣赏网页, 自适应式网页都能马上对分辨率、笔墨大小、图片尺寸等主动进行调整, 对不同设备做出及时自适应, 而无需为每个设备开发一个特定的版本, 从而大大节省了开发成本。自适应式设计的关键技术重要包含媒体查询、弹性盒布局及百分比布局等。

1.1 媒体查询

移动端欣赏器中存在可见视口 (即设备大小) 和视窗视口 (即网页宽度) , 在CSS3规范中, 媒体查询可以根据可见视口宽度、设备方向等差异来改变页面的表现方法。媒体查询通常由媒体类型和条件表达式组成, 如:

上述代码透露表现媒体类型为screen并且屏幕宽度小于等于960px时的样式。因为CSS代码是从上到下依次实行, 所以当使用max-width来区分屏幕时, 要按照从大屏到小屏的编写顺序, 使用min-width来区分屏幕时, 则按照从小屏到大屏的编写顺序。

1.2 弹性盒布局

CSS3中的弹性盒布局是为了轻松创建自适应式网页布局, 为盒状模型增长天真性。弹性盒改进了块模型, 既不使用浮动, 也不会在弹性盒容器与其内容之间合并外边距, 是一种特别很是天真的布局方式。在使用弹性盒布局时, 通过设置容器的display属性为flex, 将其设置成弹性盒容器。弹性盒由容器、子元素和轴组成, 默认情况下, 子元素的排列方向与横轴的方向一致, flex-flow属性用于排列弹性质元素, 即可以通过设置“flex-flow:row;”达到子元素按横轴方向顺序排列。弹性容器中的每一个子元素都是一个弹性质元素, 弹性容器在布局时用数字可以达到分配宽度的结果, 如图1将容器分为5份, article占3份, CSS代码可以通过设置“flex:3;”实现。配合媒体查询使用, 当屏幕小于640px, 弹性盒中的子元素由横向变为纵向方向排列, 即“flex-flow:column;”。

图1 弹性盒布局PC端结果和移动端页面结果

1.3 百分比布局

因为媒体查询只能针对某几个特定阶段的视口, 在捕获到下一个视口前, 页面的布局是不会转变的, 这样会影响页面的表现, 同时也无法兼容日益增多的各种设备。所以, 要想做出真正天真的页面, 还必须要用百分比布局代替固定布局, 并且使用媒体查询限定范围。百分比布局的本质是将固定宽度换算为百分比宽度, 换算公式为:目标元素宽度÷父盒子宽度=百分数宽度。使用百分比布局的网页会随欣赏器的缩放而等比例进行缩放。

2 Bootstrap实现自适应式设计

Bootstrap是由闻名的社交网站Twitter推出的前端开源工具包, 它基于HTML、CSS、javascript等前端技术, 一经推出就深受广大前端开发人员的迎接。Bootstrap中预定义了一套CSS样式和与样式对应JQuery代码, 应用时只需提供固定的HTML结构, 添加Bootstrap中提供的class名称就可以完成指定结果的实现。Bootstrap还包含了功能壮大的插件和内置组件, 并且提供了一个先辈的栅格体系。使用Bootstrap可以构建出特别很是优雅的前端界面, 而且占用资源特别很是小, Bootstrap的自适应式CSS能够响应台式机、平板电脑和手机的屏幕大小, 除此之外, 移动设备优先的样式贯穿整个库, IE、Chrome、Firefox等主流欣赏器都支撑Bootstrap。

2.1 自适应式导航条

Bootstrap导航栏是在应用或网站中作为导航的自适应式基础组件。Bootstrap中提供了默认样式的导航条, 它在移动设备上可以折叠, 且可以通过汉堡按钮实现开关, 在视口宽度渐渐增长时变为水平睁开模式, 缩小欣赏器窗口时菜单均被隐蔽, 代替出现的是一个汉堡按钮。实现菜单折叠的结果有以下两个步骤:

(1) 实现菜单的折叠和隐蔽, 把小屏幕表现时必须要折叠的内容包裹在一个<div>标签内, 并且为这个<div>标签使用.collapse、.navbar-collapse两个类, 为这个div添加一个id。

(2) 添加在小屏幕时, 要表现的汉堡按钮的固定写法如下:

使用汉堡按钮时, 先为折叠菜单添加id, 值为navbar-collapse, 再在<button>标签添加data-target="#navba r-collapse", 代表这个按钮控制的是id值为navbar-collapse的容器。单击汉堡按钮即可表现下拉菜单。

2.2 栅格体系

栅格体系在网页设计中用固定的格子进行页面布局, 是一种清晰工整的设计风格。Bootstrap提供了一套自适应式、移动设备优先的流式栅格体系, 随着屏幕或视口 (viewport) 尺寸的增长, 体系会主动分为最多12列。它包含了易于使用的预定义类和壮大的mixin用于生成更具语义的布局。栅格体系用于通过一系列的行 (row) 和列 (column) 的组合来创建页面布局, Bootstrap为不同屏幕宽度定义了不同的类, 它使用4种栅格选项来形成栅格体系, 这4种栅格选项的区别在于适用不同尺寸的屏幕设备。如表1所示。