Bootstrap4「CDN」の基本タグ

Bootstrap4.0.0の場合
注意点

Bootstrap4.0.0の場合

<head>内に下記を追加

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

1	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

</body>の直前に下記を追加

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>

サンプルHTML※integrity属性入り

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<title>Bootstrap4 CDN 基本HTML</title>
</head>
<body>
<!-- コンテンツ --> 
 
 
<!-- /コンテンツ --> 
<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

<!doctype html>

<head>

<title>Bootstrap4 CDN 基本HTML</title>

</head>

<body>

</body>

</html>

※Font Awesome　最新と旧バージョン

<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
<link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”>

1 2	<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”> <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”>

※4.00のJSファイル「bundle.min.js」には「Popper」が組み込まれている、「min.js」の場合は「Popper.js」が必要。

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js

その場合は下記を追加。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

※integrity属性

取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータ。

注意点

jquery-3.x.x.slim.min.js（jQuery）はBootstrapのJavaScriptプラグインを動かすためのJSライブラリファイル（v4.1.0時点でjQuery1.9.1以上に対応）
popper.min.js（Popper.js）はツールチップやポップオーバーで使用する位置決め用のサードパーティのライブラリファイル（v4.1.0時点でPopper.js1.14.0以上に対応）

jQueryのバージョンは1.9.1以上です、jQueryのプログラムを組み入れる場合3系では上手く動かない場合があります。

その場合はBootstrap3系でのCDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

を使うのがおすすめ、また位置も<head>内に置く必要がある場合があります。