Question

我正在尝试使用Bootstrap 4。我通过 Bower 下载的所有依赖项。

这是我的 index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="bower_components/bootstrap/scss/bootstrap.scss">

</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">

<!-- NAVIGATION -->
 <!-- <nav class="navbar navbar-dark bg-dark " >
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a ui-sref="home">Home</a></li>
      <li><a ui-sref="about">About</a></li>
    </ul>
  </nav>-->

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

  <!-- MAIN CONTENT -->
  <!--<div class="container">

    &lt;!&ndash; THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== &ndash;&gt;
    <div ui-view></div>

  </div>-->

<button type="button" class="btn btn-success">Primary</button>


  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/popper.js/dist/popper.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
 <script src="app.js"></script>

</body>
</html>

我尝试了Bootstrap 4和Bootstrap 4.1的两种语法，但没有任何效果。我尝试了按钮/导航/下拉菜单，但没有任何作用。我想念什么？

Answer 1

在<head>中，您有<link rel="stylesheet" href="bower_components/bootstrap/scss/bootstrap.scss">无效，因为您引用的是.scss文件，该文件是css的预处理程序，可在服务器端编译css并输出浏览器的.css。因此，您需要将文件编译为CSS或简单地使用<head>标记中的.css文件。例如：

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

如果无法正常工作，则可以始终使用CDN，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Answer 2

尝试将所有脚本标签移到“ head”标签内。

根据您的代码，浏览器首先加载所有元素，然后获取脚本，它应该以其他方式工作。当您使用会影响外观的CSS或Javascript代码时，请先加载它，然后再加载页面的其余部分。

Answer 3

请检查 https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template

入门模板。

使Bootstrap 4正常工作的正确方法是什么

3 个答案: