『黑马程序员济南』JavaEE就业笔记串讲—BootStrap

BootStrap的概述

Ø  什么是BootStrap

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师MarkOtto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

Ø  BootStrap可以在那些地方使用:

BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.

Ø  BootStrap的使用:

下载BootStrap:

http://www.bootcss.com

引入的文件

[HTML] 纯文本查看 复制代码

?

1

2

3

4

5

6

7

8

BootStrap的全局CSS

BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.

Ø  布局容器：

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

[HTML] 纯文本查看 复制代码

?

1

2

3

  ...

Ø  栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

使用.row样式定义栅格的行.

定义列：.col-lg-n.col-md-n  .col-sm-n  .col-xs-n

Ø  排版：

HTML 中的所有标题标签，

 到

 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

对齐

通过文本对齐类，可以简单方便的将文字重新对齐。

[HTML] 纯文本查看 复制代码

Left aligned

  text.

Center aligned

  text.

Right aligned text.

Justified

  text.

No wrap

  text.

Ø  改变大小：

[HTML] 纯文本查看 复制代码

Lowercased

  text.

Uppercased text.

Capitalized

  text.

Ø  表单：

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的、 和 <select> 元素都将被默认设置宽度属性为 width:

100%;。 将 label 元素和前面提到的控件包裹在.form-group 中可以获得最好的排列。

BootStrap的组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

BootStrap的JS的插件

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中

avaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用bootstrap.js 或压缩版的bootstrap.min.js）。