如何让 Bootstrap 4 Cover Example 工作？

Question

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

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

Answer 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.

相同的目录中

Answer 2

要添加图片，请将以下代码添加到 cover.scss

中的正文标记中

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;

Answer 3

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

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

如何让 Bootstrap 4 Cover Example 工作？

How to make Bootstrap 4 Cover Example work?

templates

bootstrapping

cover