如果你对Web开发感兴趣，学习使用Bootstrap是必要的基石。请阅读以获得一个很好的介绍。
本周，让我们看看Bootstrap。Bootstrapping网站在2011年变得非常流行。它为什么变得如此受欢迎？两个主要原因：开发人员更容易 - 开发自定义CSS非常乏味; 它提供了一致的用户体验 - 由Twitter创建，人们知道如何与页面进行交互，因为他们已经使用Twitter对布局进行了培训。
如今，在创建自定义网页时，Bootstrapping是设计的最低期望。这不仅仅是一个设计决定的期望。我们会明白为什么。
请记住我们制作的可爱网页？
是的，那一个。再次打开备份，因为我们将做一些简单的更改并将体验从单调变为制造。
开始非常简单。我们所要做的就是换出index.html文件中的样式表链接。我们不是指向我们创建的文件，而是指向CSS样式表的Bootstrap云托管。
在标题中删除样式表链接。在它的位置上，在引导链接标记中粘贴。
< link rel = “stylesheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css” integrity = “sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4” crossorigin = “anonymous” >
保存您的更改。现在在浏览器中打开您的index.html文件，并查看该更改如何影响您的应用。
我们的一些样式不存在于Bootstrap样式中，因此您可能会立即注意到这些颜色变化。你可能注意到的另一件事是字体是不同的。Bootstrap的默认字体与浏览器不同。我们看到的最后一个关键区别之一就是按钮。按钮造型比默认更大，更平整。
我们来更新一些样式标签。
回到Bootstrap网站上，您可以找到关于样式的文档。
如果我们浏览文档，我们可以找到更多关于样式图像的信息。看一看！转到文档，然后是内容，然后转到图像。
我们可以使图像响应屏幕尺寸和密度。在设计网页时，您总是需要考虑桌面和移动浏览器用例。许多观众将通过移动浏览器进入，并且需要考虑网络和移动设备上的用户体验。
如果您在图像页面上向下滚动，则会针对响应式图像，缩略图和图片进行造型。让我们尝试一下我们图片的响应式样式。
复制造型代码片段的类部分。
class="img-fluid"
在文本编辑器中打开您的index.html文件。将类属性添加到已有的图像标记中。
<img id="myImage" class="img-fluid">
保存您的更改，并在浏览器中刷新您的index.html文件。点击加载图片按钮。在更改浏览器窗口大小时，请注意图像的大小如何改变而不是被切断。
Bootstrap还具有样式标签等新标签，可在Content> Code下找到。让我们将我们的第二段作为计算机输出。
用<samp>标签替换<p>标签。
<samp>And then I added more that I want to be in a new paragraph. </samp>
保存您的更改并在浏览器中运行index.html文件。
但是现在我们失去了一些造型！链接不再处于新行。当我向你展示如何分解事情时，我们使用了<br />标签。虽然这可行，但这不是一个好习惯。我们应该使用的是风格<div>标签。<div>帮助我们定义一段标签，文本和我们想要分组在一起的元素。它有助于在页面上定义“隔离”区域。您可以嵌套div标签以创建更多样式。
用<div>包装<samp>行。
在Bootstrap文档的Utilities部分下，我们可以找到关于如何设置这些div盒的更多信息。看看显示部分，我们可以找到如何显示文本的例子。我抓住了蓝色的D块的例子。
class="d-block p-2 bg-primary text-white"
现在我的div看起来像这样：
<div class="d-block p-2 bg-primary text-white">
<samp>And then I added more that I want to be in a new paragraph. </samp>
</div>
当我保存更改并在浏览器中刷新我的网页时，它看起来像这样：
继续研究Bootstrap文档以查看我们可以用它做的所有事情。它使得造型更容易一些。下次准备做一些导航栏吧！