Twitter Bootstrap 101：简介

Twitter的Bootstrap是一组精心制作的出色用户界面元素，布局和javascript工具，可在您的下一个Web设计项目中免费使用。 该视频系列旨在向您介绍Bootstrap； 从下载资源到构建完整的基于Bootstrap的网站，将带您一路走。

当Mark Otto（ @mdo ）和Jacob Thornton（ @fat ）在2011年8月向世界发布Twitter Bootstrap时 ， 他们的公告解释了它的价值：授权前端开发人员更有效地启动项目。

Bootstrap样式表提供了易于实现的960网格，可实现高效布局，并提供用于印刷，导航，表格，表单，按钮等的精巧样式。 为了照顾日常JavaScript接触，Bootstrap提供了一套完善的jQuery插件集，用于下拉菜单，选项卡，模式框，工具提示，警报消息等。

这些界面元素一起提供了现成的，符合标准，用户友好，专业构建HTML5网站的所有陷阱。 正如@mdo在原始帖子中所说的那样：

Bootstrap是一种促进快速，干净和高度可用的应用程序的非常简单的方法...为开发人员遇到的最常见的日常界面任务提供干净统一的解决方案。

但是，它们都没有阻碍进一步定制的方式。 再次用@mdo的话来说，尽管Twitter Bootstrap“非常广泛”，但它仍然“足够灵活，可以满足许多独特的设计需求”。 从而，

您可以使用Bootstrap将快速的原型放在一起，或指导更复杂的设计和更大的工程工作的执行。

在Apache 2.0许可下的自由许可条款提供了大量的创作自由。 只要您对Twitter上的好人的工作给予应有的赞誉，您就可以自由地进行，调整和自定义其内容以适应您的内心需求，然后免费为您自己或为客户创建并启动结果网站或牟利。 （要进一步阅读，请查看此讨论线程，Twitter上的人们在其中解释了如何在自定义代码时保持与许可证的合规性 。）

鉴于它提供的产品具有明显的价值以及许可证的自由条款，难怪有那么多开发人员开始充分利用它。 Tumblr网站“使用Bootstrap构建”已记录了许多Bootstrap构建的网站，包括：

• CodeAcademy.com
• CodeCards.com
• 代码打印
• 轮毂店
• 清算音乐会
• 甚至MSNBC的新站点： BreakingNews.com

在所有这些示例中，您将注意到干净的网格和暗示专业精神的界面。 您还将在细节上注意到很多变化。 您可能会为这样的事实而感到震惊：Code Academy和MSNBC等受人尊敬的公司的开发人员选择使用Bootstrap进行构建。

如果您像我一样，就会非常想亲自检查一下-您应该这样做！

实际上，我最近一直在检查它。 让我带你看看。

在下面的两个简短视频中，我将向您介绍Twitter Bootstrap的基础知识，并指导您下载代码，然后将其打开，并开始整理内容以准备我们自己的Bootstrap构建的网站。

---

获取代码

• 转到Twitter Bootstrap的主页
• 下载Bootstrap 1.4.0版 （在本教程中使用）

---

视频1：简介

或者， 下载视频，或通过iTunes 订阅 Webdesigntuts +屏幕录像！

该视频介绍的步骤：

1. 访问Bootstrap的在线文档主页
2. 查看一些使用Bootstrap构建的网站
3. 从Github下载代码
4. 解压缩

---

视频2：解压整理

或者， 下载视频，或通过iTunes 订阅 Webdesigntuts +屏幕录像！

该视频介绍的步骤：

我们将执行以下操作，但不完全按照此顺序进行：

1. 整理CSS
2. 整理JavaScript
3. 删除不需要的文件（节省了另一天的时间）
4. 保留Twitter Bootstrap许可条款要求的Apache 2.0许可文件
5. 准备开发我们自己的Bootstrap构建站点

---

下一步？

在以后的教程中，我将带您逐步了解Bootstrap的主要功能，并帮助您使用Bootstrap来构建自己的Bootstrap片段自定义存储库。 这样，我们将了解Bootstrap，获得使用它和自定义它的经验，并准备自己在以后的Bootstrap构建项目中以更高的效率工作。

翻译自: https://webdesign.tutsplus.com/tutorials/twitter-bootstrap-101-introduction--webdesign-5459