Web前端CSS框架—Bootstrap学习笔记
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等
文档章节
脚手架
全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。
基本CSS样式
常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。
组件
常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。
JavaScript插件
和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。
组件列表
组件库 和 JavaScript插件集 一同提供了以下组件元素。
- 按钮组
- 按钮下拉菜单
- 用于导航的标签、pill、列表
- 导航条
- Labels
- Badges
- Page headers and hero unit
- 缩略图
- 警告对话框
- 进度条
- 模态对话框(Modals)
- 下拉菜单(Dropdowns)
- Tooltips
- Popovers
- Accordion
- Carousel
- Typeahead
现在, 这里展示一个典型的HTML文件：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap
101
Template</title>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
</head>
<body>
<h1>Hello, world!</h1>
<script src=
"<a href="http://code.jquery.com/jquery.js" "="" style="outline: none; text-decoration: none; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.2em !important; margin: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: inherit !important; color: rgb(0, 51, 102) !important; background: none !important;">http://code.jquery.com/jquery.js"
></script>
</body>
</html>
|
为了使其成为一个Bootstrap模板, 需要包含相应的 CSS and JS 文件：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap
101
Template</title>
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<!-- Bootstrap -->
<link href=
"css/bootstrap.min.css"
rel=
"stylesheet"
media=
"screen"
>
</head>
<body>
<h1>Hello, world!</h1>
<script src=
"<a href="http://code.jquery.com/jquery.js" "="" style="outline: none; text-decoration: none; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.2em !important; margin: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: inherit !important; color: rgb(0, 51, 102) !important; background: none !important;">http://code.jquery.com/jquery.js"
></script>
<script src=
"js/bootstrap.min.js"
></script>
</body>
</html>
|
设置成功! 加入这两个文件, 你就可以开始用Bootstrap开发任何网站和应用程序了。
脚手架
全局设置
Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype
<!DOCTYPE html>
<html lang=
"en"
>
...
</html>
|
Bootstrap 为屏幕、排版和链接设置了基本的全局样式。
ž 移除了body的 margin
ž 设置了 body 的背景颜色 background-color: white;
ž 使用 @baseFontFamily、@baseFontSize 和@baseLineHeight 属性作为我们排版的基础
ž 通过 @linkColor 设置全局链接颜色，并且，当链接处于 :hover 状态时才会带有下划线
默认栅格系统
栅格系统示例
Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。
带有基本栅格的HTML代码
对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
<div>
<div
class
=
"span4"
>...</div>
<div
class
=
"span8"
>...</div>
</div>
|
上面的代码展示了 .span4 和 .span8 两列，两列的和总共是12个栅格。
偏移列
把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。
<div>
<div
class
=
"span4"
>...</div>
<div
class
=
"span3 offset2"
>...</div>
</div>
|
嵌套列
在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
<div
class
=
"row"
>
<div
class
=
"span9"
>
Level
1
column
<div
class
=
"row"
>
<div
class
=
"span6"
>Level
2
</div>
<div
class
=
"span3"
>Level
2
</div>
</div>
</div>
</div>
|
流式栅格系统
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。
将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变，这样能方便的在流式与固定栅格之间切换。
和固定栅格的嵌套有一点不同：被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度。
布局
固定布局
提供了一个通用的固定宽度(也可以变为响应式)的布局方式，仅仅用 <div class="container"> 即可。
<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>
|
响应式设计
启用响应式特性
通过在文档中的 <head> 标签里添加合适的meta标签并引入一个额外的样式表即可启用响应式CSS。如果你已经在定制页面编译好一个Bootstrap, 那么只需添加一个meta标签。
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<link href=
"assets/css/bootstrap-responsive.css"
rel=
"stylesheet"
>
|
注意！ Bootstrap在默认情况下是没有引入响应式特性的，因为不是任何情况都需要使用到。我们并不是鼓励开发者移除此功能, 而是在需要使用的时候才启用它。
关于响应式Bootstrap
Media queries允许在一些条件基础上自定义CSS 例如：--ratios、widths、display type, etc-- 但通常都是围绕着 min-width 和 max-width 这两者。
- ž 修改栅格系统中列的宽度
- ž 需要的时候, 用堆叠元素代替浮动
- ž 调整标题和文本的大小以便适合各种设备
- ž 谨慎的使用media queries，先从你的手机用户开始吧。对于大型的项目, 应该考虑使用专门的代码库, 而不是构筑在media queries之上。
/* 大屏幕 */
@media (min-width: 1200px) { ... }
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }