完整說明如何安裝 jQuery, Popper JS and Bootstrap 4 至 angular 8 以上版本中使用

簡介:

Bootstrap 4 is the latest version of Bootstrap. Bootstrap is a free front-end framework for quick and simple web development. Bootstrap helps to create responsive designs in less time. Bootstrap contains many HTML and CSS based templates or components like typography, buttons, forms, tables, image carousels, navigation, modals, pagination, spinners, alerts, icons, dropdowns, cards and many more.

先決條件:

1. Node.js 安裝.
2. Angular CLI 安裝.

如果你是從零開始的新學習者，你必須先把開發環境安裝好，Node.js 及 Angular CLI 。

Getting started: Creating a hello world application in angular 8

要安裝 Bootstrap 4 需要先安裝  jQuery 及 popper.js 才能正常使用. 下方說明安裝的步驟

方法 1: MaxCDN

If you don’t want to install and host bootstrap, you can add it from CDN(Content Delivery Network).

步驟 1: Copy-paste following link and script tags into your head tag in the index.html file

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

步驟 2: Copy-paste following code in the app.component.html file

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DevConquer</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="jumbotron">
  <h1 class="text-center">Welcome to angular 8 and bootstrap 4</h1>
</div>

步驟 3: Run your project and open the application in a browser

Run your project from a terminal by the ng serve command:

Open your application from a browser by the following URL:

http://localhost:4200

方法 2: By installing the npm packages

步驟 1: Install jQuery npm package

Install jquery npm package from a terminal by the following command:

npm install jquery --save

**Note: –save flag will add the dependency in package.json

步驟2: Install Bootstrap npm package

Install bootstrap npm package from a terminal by the following command:

npm install bootstrap@4.3.1 --save

步驟 3: Install Popper JS npm package

Install popper.js npm package from a terminal by the following command:

npm install popper.js --save

步驟 4: Adding styles and scripts into angular.json file

Add the following styles and scripts code in the angular.json file from your project.

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],
 "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/popper.js/dist/umd/popper.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]

步驟 5: Copy-paste following code in the app.component.html file

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">DevConquer</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

<div class="jumbotron">
  <h1 class="text-center">Welcome to angular 8 and bootstrap 4</h1>
</div>

步驟 6: Run your project and open the application in a browser

Run your project from a terminal by the ng serve command.

Open your application from a browser by the following URL:

http://localhost:4200