Twitter bootstrap 让引导程序4工作的正确方法是什么_Twitter Bootstrap

Twitter bootstrap 让引导程序4工作的正确方法是什么

twitter-bootstrap

Twitter bootstrap 让引导程序4工作的正确方法是什么,twitter-bootstrap,Twitter 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" c

我正试着让它与引导程序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>


主要的，重要的

我尝试了bootstrap4和bootstrap4.1的两种语法，但都没有效果。

我试过按钮/导航/下拉菜单-没有任何功能。我遗漏了什么？

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

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

在

中，您的

将不起作用，因为您引用的是.scss文件，它是CSS的预处理器，在服务器端编译CSS并为浏览器输出.CSS。因此，您需要将该文件编译为css，或者在

标记中简单地使用.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">

请检查
初学者模板