Hello, world!

设置和开始使用Bootstrap非常容易。本章将说明如何下载和设置Bootstrap。我们还将讨论Bootstrap文件结构，并通过示例演示其用法。

下载Bootstrap

您可以从https://getbootstrap.com/下载最新版本的Bootstrap。当您单击此链接时，您将看到如下屏幕：

在这里您可以看到两个按钮-

• 下载Bootstrap-单击此按钮，您可以下载Bootstrap CSS，JavaScript和字体的预编译和缩小版本。不包括文档或原始源代码文件。
• 下载源-单击此按钮，您可以直接从GitHub获取最新的Bootstrap LESS和JavaScript源代码。

如果使用Bootstrap的未编译源代码，则需要编译LESS文件以生成可用的CSS文件。为了将LESS文件编译为CSS，Bootstrap正式仅支持Recess ，这是Twitter的基于less.js的CSS提示。

为了更好地理解和易于使用，我们将在整个教程中使用Bootstrap的预编译版本。由于文件已被编译和压缩，因此您不必每次都为单独的功能包括单独的文件而费心。在撰写本教程时，已下载了最新版本(Bootstrap 3)。

档案结构

预编译的Bootstrap

下载编译版本的Bootstrap后，解压缩ZIP文件，您将看到以下文件/目录结构-

如您所见，存在已编译的CSS和JS(bootstrap。*)，以及已编译和精简的CSS和JS(bootstrap.min。*)。包含Glyphicons的字体，因为它是可选的Bootstrap主题。

Bootstrap源代码

如果您已下载Bootstrap源代码，则文件结构如下-

• less / ， js /和fonts /下的文件分别是Bootstrap CSS，JS和图标字体的源代码。
• dist /文件夹包含上面预编译的下载部分中列出的所有内容。
• docs-assets / ， examples /和所有* .html文件均为Bootstrap文档。

HTML模板

使用Bootstrap的基本HTML模板如下所示-

      
      
      
      
      
      
      
      
      
      
   
   
   
      
Hello, world!

      
      
      
      
      
      
   

在这里，您可以看到包含的jquery.js ， bootstrap.min.js和bootstrap.min.css文件，它们可以构成引导模板的常规HTM文件。只要确保包含jQuery库，然后再包含Bootstrap库。

有关以上这段代码中每个元素的更多详细信息，将在Bootstrap CSS Overview一章中进行讨论。

例

现在，让我们尝试使用上述模板的示例。使用我们网站上以下示例代码框右上角的Live Demo选项尝试以下示例-

Hello, world!

在随后的所有章节中，我们都使用来自https://www.lipsum.com/的伪文本。