1.3.12　使用Bootstrap创建UI

在剩余章节中，我们将在浏览器中做大量工作。创建一个有吸引力的UI并不容易，尤其是让UI在不同移动设备的不同布局模式下工作，就显得尤为困难。为了方便工作，我们将严重依赖Bootstrap。Bootstrap是一个移动设备优先的UI框架，能够平滑地扩展到PC浏览器。本节将布局一个包含标准Bootstrap元素的基础模板，然后看看如何使用Bootstrap网格系统等功能完成一个简单页面的布局。

我们将使用Bootstrap提供的基础模板（https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template）。通过使用这个模板，就可以避免下载安装不同的CSS样式表和JavaScript文件，而可以依赖知名的内容交付网络（Content Delivery Network，CDN）来为我们提供这些文件。

推荐使用CDN来获取外部JavaScript和CSS文件。这么做提供了很多好处，包括不需要我们自己维护这些文件，以及当浏览器在其他地方再次遇到该CDN文件时，能够利用浏览器缓存。

基础模板如下所示：

容器是布局内容的起点，要放到前面的内容部分。下面的代码显示了div节：

container类提供了与Twitter类似的外观，即每个屏幕具有固定的大小。如果需要填满整个窗口，就可以改为使用container-fluid。

在容器内，Bootstrap尝试用网格方式布局各项。在Bootstrap系统中，屏幕的每一行可被表示为最多12个不同的列。默认情况下，这些列在页面上平均分布，所以通过为UI的每个部分选择使用不同的列数，就可以创造出复杂的布局。Bootstrap提供了大量预定义的样式，帮助我们为不同类型的设备创建布局，包括PC、手机和平板电脑。这些样式都遵守如表1-1所示的命名约定：.col-<<size-identifier>>-<<number-of-columns>>。

表　1-1

列数是这样工作的：每一行占用的列数加起来应该等于12列。因此，如果我们想让一行中的内容分别占据3列、6列和剩余的3列，就应该在容器内像下面这样定义行：

这种样式定义了小设备上的显示方式，但也可以针对大设备重写样式。例如，如果想让大设备分别使用5列、2列和5列，就可以应用下面的样式：

响应式布局系统的优美就在于此。它允许我们生成适合于设备的内容。

下面看看如何在页面中添加内容。我们将在第一列添加jumbotron，在第二列添加一些文本，在第三列添加一个按钮：

我们使用CSS样式来控制页面的显示。通过为一个div节提供jumbotron样式，Bootstrap会立即为我们应用该样式。通过使按钮成为主按钮，我们能够精确地控制按钮的显示。

通常，jumbotron会拉伸到占据全部列的宽度。我们将其放到一个三列的div中，这样就能够看到宽度和样式是由网格布局系统控制的，jumbotron并没有一些特殊的属性能强制它占据页面的宽度。

当快速创建一个布局的原型时，需要执行两个步骤。首先，在纸上绘出期望的UI的样子。其实也可以使用线框图工具来绘图，但本书推荐快速绘出UI的原型。当对布局形成了大概的想法后，就使用工具在屏幕上呈现这种想法，如使用Layoutit!（https://www.layoutit.com/）。使用工具也能够导出布局，手工对其做进一步修正。