读书频道 > 网站 > 网页设计 > Bootstrap用户手册 : 设计响应式网站
1.8  响应式设计
2013-08-16 16:53:15     我来说两句 
收藏    我要投稿   
Bootstrap 是Mark Otto 和Jacob Thornton 在Twitter 公司共同开发的一个网站开发框架,2011 年8 月发布至今已经成为Github 上最受关注的开源项目。从最初CSS 驱动的项目到目前内置很多JavaScript 插件...  立即去当当网订购

要让Bootstrap支持响应式布局,必须在<head>标签中添加一个<meta>标签。另外,如果你下载的文件中没有响应式CSS文件,也要单独下载。响应式布局必需的标签和文件如下所示:

<!DOCTYPE html>

<html>

<head>

<title>My amazing Bootstrap site!</title>

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

<link href="/css/bootstrap.css" rel="stylesheet">

<link href="/css/bootstrap-responsive.css" rel="stylesheet">

</head>

如果发现Bootstrap没有响应能力,请确保这些标签一个也不少。目前,响应能力还不是默认就有的,因为不是所有网站都需要响应式布局。Bootstrap的作者选择了让开发人员需要时添加,而不是不需要时删除响应功能。

什么是响应式设计

响应式设计是针对浏览设备优化页面中既有内容的一种方法。比如,在桌面浏览器中既可以看到网站的常规版本,也可以在用户接入更大的显示器时看到针对宽屏的布局。在平板电脑中看到的是针对其横屏和竖屏模式优化之后的布局。而在手机上,则是能够适应更窄宽度的布局。为了适用不同的屏幕宽度,Bootstrap使用CSS的媒体查询(media query)来检测浏览器视口的宽度,然后再根据条件加载和应用调整布局的样式表。根据浏览器视口的宽度,Bootstrap可以按照纵横比或宽度的范围来优化布局,但最主要还是使用min-width和max-width属性。

Bootstrap内部支持5种不同的布局,都依赖于CSS媒体查询。最大布局中每一列的宽度为70像素,而常规布局中每一列宽度是60像素。在适合平板电脑的布局中,列宽缩小为42像素,再窄一点,每一列就会流动起来,变成在垂直方向上堆叠,并且都与视口同宽(见表1-1)。

 

要根据媒体查询添加自定义的CSS,可以像下面这样把所有规则写到一个CSS文件中,也可以单写一个CSS文件:

/* 大屏幕 */

@media (min-width: 1200px) { ... }

/* 平板竖屏到横屏到常规屏幕 */

@media (min-width: 768px) and (max-width: 979px) { ... }

/* 手机横屏到平板竖屏 */

@media (max-width: 767px) { ... }

/* 手机横屏及更小屏幕 */

@media (max-width: 480px) { ... }

对于大型网站,应该把不同的媒体查询分别保存在单独的CSS文件中。而在HTML的<link>标签中,可以根据条件加载它们。这样可以保证加载的文件相对小,但在响应式布局中会增加HTTP请示。如果你使用LESS编译CSS,可以把它们都放到一个文件中:

<link rel="stylesheet" href="base.css" />

<link rel="stylesheet" media="(min-width: 1200px)" href="large.css" />

<link rel="stylesheet" media="(min-width: 768px) and (max-width: 979px)"

href="tablet.css" />

<link rel="stylesheet" media="(max-width: 767px)" href="tablet.css" />

<link rel="stylesheet" media="(max-width: 480px)" href="phone.css" />

辅助类

Bootstrap为响应式开发提供了一些辅助类(见表1-2),但这些类还是能不用就不要用。什么情况下用呢?比如在某些布局中显示或隐藏自定义元素。举个例子,常规布局中可以包含一个页眉,但在移动布局中需要简化它,只显示少量元素。此时,可以给页眉中需要隐藏的元素添加.hidden-phone类。

 

响应式开发有两种主要的思路。当前备受推崇的方法是从移动版本做起,最后才是桌面网站。Bootstrap的思路刚好相反,你可以用它来搭建一个“差不多”的桌面网站。

不过,就算你想找的是移动开发框架,Bootstrap仍然是值得考虑的。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.7  容器布局
下一篇:深入解析WordPress(原书第2版)
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

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