Bootstrap

Bootstrap 4 的界面组件课程已经发布了，可以帮你快速了解 Bootstrap 最核心的部分。你可以使用 Bootstrap 的组件快速为网站应用创建界面。课程里演示了 Bootstrap 所有组件的使用方法，除了表单部分，我们会单独再做个课程介绍一下表单的使用方法。

学习 Bootstrap 框架，不仅仅是要得到好看的界面，更重要的是去了解它的一些解决问题的思路，比如设计一个界面都需要怎么去组织 HTML 的代码结构。学习 Bootstrap 的组件部分，有几点要注意一下，颜色，尺寸，交互，配置还有事件。

组件可能有不同的颜色，尺寸，有些组件还有些交互功能，配置使用这些功能可以使用 Bootstrap 提供的 data 接口，或者可以通过 JavaScript 代码去配置。带交互功能的组件一般还会触发一些自定义的事件，我们可以监听这些事件去做一些事情。

学习使用 Bootstrap 这个库是最好的学习 HTML 与 CSS 的方法，当然还有一点 JavaScript。如果您刚刚起步学习 Web 开发，那首先要学 HTML 与 CSS。有一点基础以后，就可以去学习使用 Bootstrap 去设计界面了。它给了我们一套界面设计框架，学习它是怎么组织的 HTML 代码结构，然后在上面去应用 CSS 样式，CSS 类的命名方式，各种选择器，如何利用各种伪类与伪元素。Bootstrap 里面的东西主要分成了四个部分。布局，内容，组件，还有工具。我们先来了解一下 Bootstrap 的布局（Layout）。

布局（Layout）

网格是设计界最常用的工具。Bootstrap 使用了 12 栏网格（Grid）的布局系统，就是它把一行（Row）内容分成了十二栏（Column）。你可以为一行内容里面的每一个栏去指定它占用的栏数，一行最多只能显示十二栏宽度的内容。

比如你的界面上需要一块三栏显示的内容，A，B还有 C，你可以让 A 占用 6 栏宽度，B 占用 4 栏宽度，剩下的两个网格宽度留给 C 。这样 A，B，C 这几栏内容加起来的宽度正好是 12 个网格，所以它们也就正好可以在一排显示。如果一排内容的宽度超过了 12 个网格，那后面的栏会自动给挤到第二排显示。

Bootstrap 4 是地球上最受欢迎的 CSS 界面框架。最新版的 Bootstrap 4 已经发布测试版，现在我们的网站应用的界面已经可以基于 Bootstrap 4 去开发了。宁皓网录制了一批新鲜的 Bootstrap 课程，刚刚发布了 《Bootstrap 4：网页布局》，其它组件的使用方法本月会陆续发布完。

学习 Bootstrap

Bootstrap 的基本使用是非常简单的，仔细地看看官方文档就能直接用了，不过即使是老手，也经常在文档中迷失。正确的方法是先看宁皓网的视频：） 然后再去看文档。

Bootstrap 4 刚刚发布了预览版，离正式版还有一段时间。不过现在我们已经可以使用 Bootstrap 4 了，看看里面有什么新东西。 最简单的方法就是使用 Bootstrap 的 CDN ，把需要的样式表与 JS 文件链接到网页上，不过这样你不能去编辑 Bootstrap ，比如去定制里面的一些选项。下面我们使用 Git 去克隆一份 Bootstrap 仓库到本地。

# 进入到桌面
cd ~/desktop

# 为项目创建目录并进入这个目录
mkdir ninghao-bootstrap
cd ninghao-bootstrap

# 克隆 Bootstrap 仓库
git clone https://github.com/twbs/bootstrap.git

# 进入到 Bootstrap
cd bootstrap

# 提取分支
git fetch

# 切换到 Bootstrap 4 的开发分支
git checkout v4-dev

确定你已经安装好了 npm 还有 Bower ，然后我们需要去为 Bootstrap 项目安装需要的东西。

经过一年多的开发，8 月 19 号发布了 Bootstrap 4 的预览版（alpha），2011 年的 8 月 19 号正好是 Bootstrap 的生日。Bootstrap 4 几乎是从头开始开发的。120,000 行代码改进，1,100 个提交，另外，还有很多没有完成。这里是 v4 alpha 文档。

新功能

下面是一部分亮点：

• 从 Less 到 Sass。
• 改进网络系统。
• 支持 Flexbox。
• 用新的组件 Cards 来代替原来的 Wells，Thumbnails 还有 Panels，。
• 合并所有 HTML 重置为新的模块，叫 Reboot。
• 全新的自定义选项。
• 放弃对 IE8 的支持，使用 rem 与 em 单位。
• 重写所有的 JavaScript 插件。
• 改进 tooltip 与 popovers 的自动位置。
• 改进文档。
• 还有更多。

两年前，我们发布了第一个 Bootstrap 框架的课程，介绍了 Bootstrap 2 的基本用法。今天咱们再一起学一下 Bootstrap 3 ，相比第二个版本的 Bootstrap，做了很多改进，Bootstrap 3 是一套移动优先的前端框架。移动优先就是，设计的所有的样式默认都会应用到移动设备上，然后在设计里，利用媒体查询，一步一步的增加对于其它尺寸设备的设计。

这两天翻译了 Bootstrap 的文档，发现新版的 Bootstrap 照去我们做 Bootstrap 视频的时候有了一些改进。听说 Bootstrap 3.x 版本会有更大的改进。不过基础的应用都是差不多的，使用这个中文档案配合我们的视频，你可以很快掌握使用 Bootstrap 编译后的版本来创建网站项目。

对于一般用户，我们使用的只是 Bootstrap 编译后的版本，也就是现成的 CSS 样式表，JavaScript 。或者你可以使用 Bootstrap 的定制功能去修改 Bootstrap ，比如改改主要的颜色，字体，字号，网络系统等等，然后你可以把定制好的 Bootstrap 下载下来。

注：文档里介绍的是编译后的 Bootstrap 的使用。

《Bootstrap 用户界面架构 》介绍了 Bootstrap 架构的使用。Bootstrap 来自 Twitter ，是一套用户界面与交互的架构，你可以使用 Bootstrap 快速的创建专业的设计。