如何使 Bootstrap 4 Cover Example 工作？答案

【问题标题】：How to make Bootstrap 4 Cover Example work?如何使 Bootstrap 4 Cover Example 工作？
【发布时间】：2016-04-02 21:23:54
【问题描述】：

我是这方面的初学者。如何使Bootstrap 4 cover example 正常工作，以便我自己编辑？

我已经尝试下载源代码，将 bootstrap.min.css 和 .js 放在我的主文件夹中，然后查看页面源代码以获取模板的代码并将其粘贴到我的 index.html 中。当我预览它时，我看到的只是纯 Bootstrap 文本......我错过了哪些步骤？

【问题讨论】：

标签： templates bootstrapping cover

【解决方案1】：

您必须修复 html 文件中的路径。

 <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

应该是

 <link href="bootstrap.min.css" rel="stylesheet">

如果 css 文件和 index.html 在同一个文件夹中。 html 底部的bootstrap.min.js 也是如此。此外，您需要 cover.css 并将其保存在与 html 相同的目录中。

【讨论】：

谢谢！原来，我没有为cover.css创建一个CSS文件，我不知道它在页面源上是可点击的。你肯定带领我走上了正确的道路。
还有，添加图片..？

【解决方案2】：

要添加图片，请将以下代码添加到您在 cover.scss 中的 body 标签中

background: image-url('background.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

【讨论】：

我修改了你的答案，让它在 css 中为我工作。 background-image: url('image.jpg');background-repeat: no-repeat;background-position: center center;

【解决方案3】：

实际的源代码以及所有其他引导示例都在这里。 https://github.com/twbs/bootstrap/tree/master/site/content/docs/4.3/examples/cover

url 可能会随着 bootstrap get 的更新而改变

【讨论】：