首页 产品 技术 查看内容

敏捷开发必备:前端开源框架Bootstrap

2014-1-22 12:45| 发布者: tianzc| 查看: 3848| 评论: 0 |原作者: tianzc

摘要: Bootstrap简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。BootstrapSleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. 英文站: http://getbo ...
Bootstrap简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。Bootstrap
Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
英文站:            http://getbootstrap.com/
相关中文资料站:http://www.cnbootstrap.com/
                               http://www.bootcss.com/

框架及布局

Bootstrap创建了响应式的12列栅格系统,并在该系统的基础上设计了固定(fixed)布局和流动宽度(fluid-width)布局。


全局样式 重置CSS,排版和链接
要求HTML5 doctype
Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。
  • <!DOCTYPE html>
  • <html lang="en">
  •   ...
  • </html>

排版和链接
scaffolding.less 文件中,设置了基本的全局显示效果,排版和链接样式。具体来说,我们:
  • 移除了body的margin
  • 设置 body 背景色为 background-color: white;
  • 将 @baseFontFamily, @baseFontSize, 和@baseLineHeight 做为排版的基础变量
  • 使用 @linkColor 设置全局链接的颜色,链接仅在:hover 状下显示下划线

通过Normalize重置默认样式
从Bootstrap 2开始,使用 Normalize.css 对默认的CSS进行重置(reset)。 Normalize.css 项目由 Nicolas Gallagher 创建 HTML5 Boilerplate 项目也出于他手。
新的reset代码保存在 reset.less ,并移除了一些元素,从而更加简洁明了。


默认栅格系统 响应式的12列系统
1

1

1

1

1

1

1

1

1

1

1

1


4

4

4


4

8


6

6


12


做为框架默认的一部分,Bootstrap提供了940px宽, 12列的栅格系统
针对各种不同的设备和分辨率,Bootstrap提供了四种响应式方案:手机,垂直平板,水平平板/小型桌面,宽屏桌面。

  • <div class="row">
  •   <div class="span4">...</div>
  •   <div class="span8">...</div>
  • </div>

如左,一个基本的布局由两个“列”组成,栅格系统由一系列横跨12等分的"span*"组成。



列的偏移
4

4 offset 4


3 offset 3

3 offset 3


8 offset 4


  • <div class="row">
  •   <div class="span4">...</div>
  •   <div class="span4 offset4">...</div>
  • </div>

列的内嵌
在Bootstrap中使用静态(non-fluid)栅格很容易实现内嵌, 只要在一个已存在的 .span* 列中,嵌套一个新的 .row 列,然后在 .row 列中再添加一组 .span* 列即可。
例子
内嵌的行应该包含多个列,行的 span* 应该是几个内嵌列 span* 之和。 例如,两个内嵌的.span3 列应该包含在 .span6 列中。
Level 1 of columnLevel 2
Level 2




  • <div class="row">
  •   <div class="span12">
  •     Level 1 of column
  •     <div class="row">
  •       <div class="span6">Level 2</div>
  •       <div class="span6">Level 2</div>
  •     </div>
  •   </div>
  • </div>


流式栅格系统 基本于百分比的12列响应式布局
列的流式排布
1

1

1

1

1

1

1

1

1

1

1

1


4

4

4


4

8


6

6


12


基于百分比,而非像素
流式栅格系统中的列宽使用百分比计算宽度而非像素。与像素栅格布局一样,Bootstrap根据设备和分辨率不同提供了不同的响应性方案。

行的流式布局
把固定布局变成流式布局很简单,把 .row 变成 .row-fluid即可,列内容不变,因此在流式布局和固定布局之间转换非常简单。

补充
  • <div class="row-fluid">
  •   <div class="span4">...</div>
  •   <div class="span8">...</div>
  • </div>


流式列的内嵌
流式列的内嵌稍稍有点不同:内嵌列的宽度与父级无关,而要视兄弟列而定,因为所有的内嵌列都是按比例分配父列的100%宽度。
Fluid 12Fluid 6
Fluid 6




  • <div class="row-fluid">
  •   <div class="span12">
  •     Level 1 of column
  •     <div class="row-fluid">
  •       <div class="span6">Level 2</div>
  •       <div class="span6">Level 2</div>
  •     </div>
  •   </div>
  • </div>


自定义栅格
变量
默认值
描述

@gridColumns
12
列的数量

@gridColumnWidth
60px
每列的宽度

@gridGutterWidth
20px
列之间的间隔宽度

@siteWidth
计算所有列的总宽度(含间隔)
计算列的总宽度以设置 .container-fixed() 的宽度
LESS中的变量
Bootstrap内置了一组很有用的变量,用以定制上述的默认940px栅格系统。这些变量保存在variables.less中。

如何定制
修改栅格意味着改变三个 @grid* 变量并要重新编译Bootstrap。 改变variables.less中的栅格变量,再使用四种方式中的某一种重编译less。 在添加更多列之前,要先在grid.less在定义这三个变量。

保持响应性
定制的栅格只能工作在默认的940px下,若要保证Bootstrap的全面响应性,还得更改responsive.less中的栅格内容。


布局 用基础模板创建网页
固定布局
用 <div class="container"> 实现的简单的中央布局的页面,默认为940px宽。


  • <body>
  •   <div class="container">
  •     ...
  •   </div>
  • </body>

流式布局
<div class="container-fluid"> 提供灵活的页面结构,定义了最小和最大宽度,拥有一个左边栏。很适合做应用和文档。



  • <div class="container-fluid">
  •   <div class="row-fluid">
  •     <div class="span2">
  •       <!--Sidebar content-->
  •     </div>
  •     <div class="span10">
  •       <!--Body content-->
  •     </div>
  •   </div>
  • </div>


响应式设计 Media Query根据设备和分辨率的不同而使用不同样式
响应式设计用来做什么?
Medias Query允许浏览器基于不同的条件而使用不同的CSS:比如宽高比,宽度,显示类型等等。但最常用的条件还是 min-width 和 max-width 。
  • 在栅格中修改列的宽度
  • 堆叠元素,而不是让其浮动
  • 根据不同设备重置标题和文字的大小,以获得更好的阅读体验。
谨慎地使用media query,建议仅仅将其做为你的手机用户的初体验。对于大型项目而言,最好还是选择专业的代码库,而不是进行层层的media查询。

支持的设备
Bootstrap在responsive.less文件中提供了一组media query,令你的项目可以更为便捷地适应多种设备和分辨率。包括:
设备
布局宽度
列宽度
间隔宽度

智能手机
<=480px
流式列,非固定宽度

智能手机到垂直平板
<=767px
流式列,非固定宽度

水平平板
>=768px
42px
20px

默认
>=980px
60px
20px

大分辨率
>=1200px
70px
30px
要求有meta标签
要确保设备能正常显示响应式页面,就要添加meta标签
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">



使用media query
Bootstrap不会自动包含media query,但理解和添加media query却是非常容易。 如下这般,即可在Bootstrap中包含响应式特性:
  • 使用编译后的bootstrap-responsive.css
  • 添加 @import "responsive.less" ,然后重新编译Bootstrap
  • 修改并重编译responsive.less为一个单独的文件
为什么不直接包含它呢? 说实话,并不是什么应用都需要响应性设计,响应性不是必须的。 与其让开发者移除这个特性,不如由我们动手。

  •   // 水平状态的手机及以下
  •   @media (max-width: 480px) { ... }
  •   // 界于水平手机与竖直平板之间
  •   @media (max-width: 768px) { ... }
  •   // 界于竖直平板与水平平板/桌面之间
  •   @media (min-width: 768px) and (max-width: 980px) { ... }
  •   // 宽桌面
  •   @media (min-width: 1200px) { .. }



用于响应性的实用类介绍
为了更高效友好地面向手机开发,可以使用这些基础实用类根据设备的不同决定内容的显示或隐藏。
何时适用
你的网站已经有了一点底子,但并不想再为不同设备而重新创建一个完全不同的站点,这种情况就适合使用实用类来完善呈现效果。
例如,你仅仅想在使用手机浏览时显示 <select> 做为导航,而在使用平板和桌面浏览时,就隐藏起来。

支持的类
下面展示了可用的类,及其在media query(由设备标识)下的效果。 这些类保存在 responsive.less 。
手机<=480px
平板<=767px
桌面>=768px

.visible-phone
显示
隐藏
隐藏

.visible-tablet
隐藏
显示
隐藏

.visible-desktop
隐藏
隐藏
显示

.hidden-phone
隐藏
显示
显示

.hidden-tablet
显示
隐藏
显示

.hidden-desktop
显示
显示
隐藏
测试案例
改变你的浏览器尺寸,或是不在同的设备上浏览,以观察上述类的效果。
显示...
  • 手机
  • 平板
  • 桌面✔ 桌面
隐藏...
  • 手机✔ 手机
  • 平板✔ 平板
  • 桌面


组件示例

Bootstrap内置几十种高可用的组件,以实现导航栏,通知,弹出框等功能。


按钮组 添加更多按钮,实现类似工具条功能
按钮组
按钮组可以将多个按钮做为一个复合组件来用。 由一系列 <a>或 <button> 元素构建。
最佳实践
我们建议使用按钮组和工具条时应遵循下列准则:
  • 在一个按钮组中只使用一种元素, <a> 或 <button> 。
  • 不要在同一个按钮组中使用不同按钮颜色。
  • 使用图标补充内容或直接替代文本时,应包含说明性的alt或title文字。
补充 下面会单独强调带下拉框的按钮组,其包含一个下拉/上弹三角以表示可点击触发下拉/上弹。

默认例子
用 button 标签按钮构建的标准按钮组:
左中右

  • <div class="btn-group">
  •   <button class="btn">1</button>
  •   <button class="btn">2</button>
  •   <button class="btn">3</button>
  • </div>
工具条的例子
集合几组 <div class="btn-group"> ,再用 <div class="btn-toolbar"> 包装就可以合成工具条组件。
1234
567
8

  • <div class="btn-toolbar">
  •   <div class="btn-group">
  •     ...
  •   </div>
  • </div>

复选和单选形式
按钮组也可实现单选和复选功能。前者只有一个按钮被按下,后者可以按下多个按钮。详见Javascript插件
按钮组中的下拉项
强调! 为了渲染正常,带下拉项的按钮应该被 .btn-group 嵌套,然后再放入 .btn-toolbar 内。


按钮下拉菜单 基于按钮组提供下拉菜单
下拉按钮简介和例子
下拉菜单中的按钮嵌套于 .btn-group 内。
动作
动作
危险

警告
成功
信息
逆操作


标记例子
和按钮组类似,下拉按钮仍使用按钮标记,并用到少量其他标记以增强显示效果,同时支持Bootstrap的下拉jquery插件。
  • <div class="btn-group">
  •   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  •     Action
  •     <span class="caret"></span>
  •   </a>
  •   <ul class="dropdown-menu">
  •     <!-- dropdown menu links -->
  •   </ul>
  • </div>


适应所有按钮的尺寸
下拉按钮适应任何尺寸,可以是 .btn-large, .btn-small, 或 .btn-mini 。
大按钮
小按钮
迷你按钮


需要Javascript
下拉按钮需要 Bootstrap下拉插件 实现功能。
在某些情况下(诸如使用手机浏览),下拉菜单会超出可视区域。这时要么手动对齐,要么使用定制的javascript。



带间隔的下拉按钮简介和例子
在按钮组的样式和标记的基础上,我们可以很方便的创建带间隔的下拉按钮。间隔左侧是按钮,右侧是下拉链接。
动作
动作
危险

警告
成功
信息

逆操作

尺寸
使用 .btn-mini, .btn-small, 和 .btn-large 指定大小。
大按钮

小按钮

迷你按钮

  • <div class="btn-group">
  •   ...
  •   <ul class="dropdown-menu pull-right">
  •     <!-- dropdown menu links -->
  •   </ul>
  • </div>

标记的例子
我们对普通的下拉按钮进行扩展,将下拉区域独立出来,可对其单独点击收放菜单。
  • <div class="btn-group">
  •   <button class="btn">Action</button>
  •   <button class="btn dropdown-toggle" data-toggle="dropdown">
  •     <span class="caret"></span>
  •   </button>
  •   <ul class="dropdown-menu">
  •     <!-- dropdown menu links -->
  •   </ul>
  • </div>
上弹菜单
下拉菜单也可以变成上弹菜单,只要在 .dropdown-menu 最近的父标签上应用 .dropup 即可。它会改变 .caret 的箭头方向,并将菜单底部与按钮顶部对齐。
上弹按钮
上弹按钮(右对齐)

  • <div class="btn-group dropup">
  •   <button class="btn">Dropup</button>
  •   <button class="btn dropdown-toggle" data-toggle="dropdown">
  •     <span class="caret"></span>
  •   </button>
  •   <ul class="dropdown-menu">
  •     <!-- dropdown menu links -->
  •   </ul>
  • </div>


导航,标签页,胶囊链接 定制性强的列表导航
轻巧的默认项 同样的标记,不同的类强大的基类
所有的导航组件,诸如标签页/胶囊链接/列表,使用同样的标记和样式 - .nav 类。
何时适用
标签页和胶囊链接非常适合内容片段的切换,或是相关内容的页面导航。
组件对齐
使用 .pull-left 或 .pull-right 对齐导航链接,两者都依赖CSS float实现左/右对齐。

基本的标签页
对存放链接的 <ul> 应用 .nav-tabs :
  • <ul class="nav nav-tabs">
  •   <li class="active">
  •     <a href="#">首页</a>
  •   </li>
  •   <li><a href="#">...</a></li>
  •   <li><a href="#">...</a></li>
  • </ul>

基本的胶囊链接
HTML不变,使用 .nav-pills :
  • <ul class="nav nav-pills">
  •   <li class="active">
  •     <a href="#">首页</a>
  •   </li>
  •   <li><a href="#">...</a></li>
  •   <li><a href="#">...</a></li>
  • </ul>


叠放式导航 竖直排放标签和胶囊链接如何叠放
默认情况下标签和胶囊链接是水平排放的,使用 .nav-stacked 就可以将其变成竖直叠放。

叠放式标签
  • <ul class="nav nav-tabs nav-stacked">
  •   ...
  • </ul>

叠放式胶囊链接
  • <ul class="nav nav-pills nav-stacked">
  •   ...
  • </ul>


下拉项 改良的导航组件易用的富内容菜单
在Bootstrap中,创建标签和胶囊链接中的下拉菜单非常方便,仅需极少的HTML和一个轻巧的jQuery插件。

带下拉项的标签页
  • <ul class="nav nav-tabs">
  •   <li class="dropdown">
  •     <a class="dropdown-toggle"
  •        data-toggle="dropdown"
  •        href="#">
  •         下拉
  •         <b class="caret"></b>
  •       </a>
  •     <ul class="dropdown-menu">
  •       <!-- links -->
  •     </ul>
  •   </li>
  • </ul>

带下拉的胶囊链接
  • <ul class="nav nav-pills">
  •   <li class="dropdown">
  •     <a class="dropdown-toggle"
  •        data-toggle="dropdown"
  •        href="#">
  •         下拉
  •         <b class="caret"></b>
  •       </a>
  •     <ul class="dropdown-menu">
  •       <!-- links -->
  •     </ul>
  •   </li>
  • </ul>


导航列表 构建简单的叠放式导航,适用于侧边栏应用风格(application-style)的导航
导航列表可以便捷地创建带有标头(可选)的导航链接组,非常适合用做侧边栏(与OS X中的Finder类似)。
从结构上看,其与标签和胶囊链接无异,都使用同样的导航样式,所以用法和定制都一样简洁。

使用图标
在导航列表中使用图标很容易。只须添加带有图标类的 <i> 标签即可。
水平间隔
应用 .divider 的空列表项会显示为一个水平间隔,如下:
  • <ul class="nav nav-list">
  •   ...
  •   <li class="divider"></li>
  •   ...
  • </ul>

导航列表例子
对存放一组链接的列表使用 class="nav nav-list" :

  • <ul class="nav nav-list">
  •   <l

鲜花

握手

雷人

路过

鸡蛋

扫一扫关注最新动态

毒镜头:老镜头、摄影器材资料库、老镜头样片、摄影
爱评测 aipingce.com  
返回顶部