读书频道 > 网站 > 网页设计 > Bootstrap实战
3.4.6 响应式Bootstrap
2013-11-02 16:51:23     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

Bootstrap完全支持响应式设计,在默认情况下Bootstrap是没有引入响应式特性的,因为不是任何情况都需要使用到,建议在需要使用的时候才启用它。

1.响应式Bootstrap概述

响应式Bootstrap通过Media Query技术实现,相关的响应式CSS样式存放在bootstrap-responsive.css文件中,Media Query允许在一些条件基础上自定义CSS,不过主要是通过min-width和max-width进行设计。主要包含的定义项目:

修改栅格系统中列的宽度。

根据需要,用堆叠元素代替浮动。

调整标题和文本的大小以适合各种设备。

当然,Media Query技术不是万能的,对于大型商业项目,建议选用JavaScript技术来解决响应式设计,可以考虑使用专门的代码库,而不是构筑在Media Query技术之上。

Bootstrap支持的几个Media Query都放在bootstrap-responsive.css文件中,调用该文件可以使页面能够灵活适应不同设备和屏幕分辨率,简单说明如表3-1所示。

表3-1 Bootstrap支持的Media Query分类
类  型 布 局 宽 度 列  宽 间 隙 宽 度
大屏幕 大于或等于1200px 70px 30px
默认 大于或等于980px 60px 20px
平板电脑 大于或等于768px 42px 20px
手机到平板电脑 小于或等于767px 流式列,无固定宽度 
手机 小于或等于480px 流式列,无固定宽度 

具体样式结构如下:
/* 大屏幕 */
@media (min-width: 1200px) {
}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {
}
/* 横向放置的手机和竖向放置的平板电脑之间的分辨率 */
@media (max-width: 767px) {
}
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
}

2.使用响应式Bootstrap

使用响应式Bootstrap的具体方法和步骤如下。

第1步:在需要使用响应式设计的页面中启用响应式特性,具体方法如下。

在文档头部区域内添加合适的meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
引入Bootstrap响应式样式表,即可启用响应式CSS。
<link href="bootstrap/css/bootstrap-responsive.css"rel="stylesheet" "type="text/css">

提示 如果已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。

第2步:添加响应式布局辅助类样式。具体说明如表3-2所示。

表3-2 响应式布局辅助类样式
类(Class) 手机(767px 及以下) 平板电脑 (979px 到 768px) 台式机 (默认)
.visible-phone 显示 隐藏 隐藏
.visible-tablet 隐藏 显示 隐藏
.visible-desktop 隐藏 隐藏 显示
.hidden-phone 隐藏 显示 显示
.hidden-tablet 显示 隐藏 显示
.hidden-desktop 显示 显示 隐藏

提示 这些类样式不支持table元素,在有限的情况下使用Bootstrap响应式设计类样式,避免创建同一个站点的不同版本。当这些类样式能对每种设备的展示做有益的补充时才使用。

第3步:复制3.5.4节的案例,在样式表中删除Media Query部分的全部样式声明,同时清理掉结构部分的#content、#sidebar和#footer样式。同时在内部样式表上面引入Bootstrap响应式设计样式表。
<link href="bootstrap/css/bootstrap-responsive.css"rel="stylesheet" "type="
 text/css">

第4步:在HTML结构中,为<div id="content">和<div id="sidebar">栏目包裹一层流式布局框,定义该标签的类样式为class="row-fluid"。同时为<div id="content">添加class="span8"类样式,为<div id="sidebar">添加class="span4"类样式,并添加.hidden-phone类样式,设计在移动设备的小屏幕中隐藏侧栏显示。
<div class="row-fluid">
     <div id="content" class="span8">
          <h2>Content</h2>
          <p>text</p>
     </div>
     <div id="sidebar" class="span4 hidden-phone">
          <h3>Sidebar</h3>
          <p>text</p>
     </div>
</div>

第5步:在浏览器中预览,逐步调整浏览器窗口,会发现Bootstrap能够自动调整页面的版式布局,如图3-28所示。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.4.5 响应式设计流程和实战
下一篇:HTML 5与CSS 3 权威指南(第3版·上册)
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站