Bootstrap4-flex
提供：Dev Guides
ブートストラップ4-フレックス
説明
Flexユーティリティを使用して、レイアウト、配置、グリッド列、ナビゲーション、およびページの他のコンポーネントを管理できます。 フロートや位置決めを使用せずにレイアウト構造を簡単に設計できます。
フレックスの動作と方向
d-flex_や_d-inline-flex_などのflexbox表示ユーティリティを使用して、flexboxコンテナと子要素をflexアイテムに表示します。 _.flex-row（反対側から水平方向を表示するには_.flex-row-reverse_を使用）と_.flex-column_（_.flexを使用）を使用して、水平方向と垂直方向のflexアイテムの方向を設定できます。 -column-reverse_反対側からの垂直方向を表示するには、それぞれ以下の例に示すようなクラス-
例
<html>
<head>
<!-- Meta tags -->
<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.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Flex Behaviors</h2>
<div class = "d-flex p-2 bg-info">
This is flex container, uses the 'd-flex' class
</div>
<br>
<div class = "d-inline-flex p-2 bg-info">
This is inline flexbox container, uses the 'd-inline-flex' class
</div>
<br>
<br>
<h2>Direction</h2>
<h4>Horizontal Direction</h4>
<div class = "d-flex flex-row bg-info mb-3">
<div class = "p-2 border border-dark ">flex-row: Item 1</div>
<div class = "p-2 border border-dark">flex-row: Item 2</div>
<div class = "p-2 border border-dark">flex-row: Item 3</div>
</div>
<div class = "d-flex flex-row-reverse bg-info">
<div class = "p-2 border border-dark">flex-row-reverse: Item 1</div>
<div class = "p-2 border border-dark">flex-row-reverse: Item 2</div>
<div class = "p-2 border border-dark">flex-row-reverse: Item 3</div>
</div>
<br>
<h4>Vertical Direction</h4>
<div class = "d-flex flex-column bg-info mb-3">
<div class = "p-2 border border-dark">flex-column: Item 1</div>
<div class = "p-2 border border-dark">flex-column: Item 2</div>
<div class = "p-2 border border-dark">flex-column: Item 3</div>
</div>
<div class = "d-flex flex-column-reverse bg-info">
<div class = "p-2 border border-dark">flex-column-reverse: Item 1</div>
<div class = "p-2 border border-dark">flex-column-reverse: Item 2</div>
<div class = "p-2 border border-dark">flex-column-reverse: Item 3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<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>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
コンテンツの正当化
_justify-content_ユーティリティを使用して、フレックスコンテナの主軸（開始から終了までのx軸）でフレックスアイテムの配置（開始、終了、中央、前後など）を変更できます。
次の例はこれを示しています-
例
<html>
<head>
<!-- Meta tags -->
<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.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Alignment - Start</h2>
<div class = "d-flex justify-content-start bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Alignment - End</h2>
<div class = "d-flex justify-content-end bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Alignment - Center</h2>
<div class = "d-flex justify-content-center bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Alignment - Between</h2>
<div class = "d-flex justify-content-between bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Alignment - Around</h2>
<div class = "d-flex justify-content-around bg-info">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<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>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
アイテムの整列
_align-items_ユーティリティを使用して、フレックスボックスコンテナのクロス軸（開始するy軸）でフレックスアイテムの配置（開始、終了、中央、ベースライン、ストレッチなど）を変更できます。
次の例はこれを示しています-
例
<html>
<head>
<!-- Meta tags -->
<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.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Align Items - Start</h2>
<div class = "d-flex align-items-start bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Align Items - End</h2>
<div class = "d-flex align-items-end bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Align Items - Center</h2>
<div class = "d-flex align-items-center bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Align Items - Baseline</h2>
<div class = "d-flex align-items-baseline bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
<h2>Align Items - Stretch</h2>
<div class = "d-flex align-items-stretch bg-info" style = "height: 100px">
<div class = "p-2 border border-dark">Item 1</div>
<div class = "p-2 border border-dark">Item 2</div>
<div class = "p-2 border border-dark">Item 3</div>
</div>
<br>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<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>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
塗りつぶし、拡大、縮小
.flex-fill_クラスを使用して、要素を水平方向のスペースに等しい幅で表示できます。 _.flex-grow-* _クラスを使用して使用可能なスペースがあればフレックスアイテムが大きくなり、必要に応じて.flex-shrink-* _クラスを使用してフレックスアイテムが縮小します。
次の例は、上記のユーティリティの使用方法を示しています-
例
<html>
<head>
<!-- Meta tags -->
<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.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Fill</h2>
<div class = "d-flex bg-info">
<div class = "p-2 flex-fill border border-dark">Item 1</div>
<div class = "p-2 flex-fill border border-dark">Item 2</div>
<div class = "p-2 flex-fill border border-dark">Item 3</div>
</div>
<br>
<h2>Grow</h2>
<div class = "d-flex bg-info">
<div class = "p-2 flex-grow-1 bg-info">Item 1 (Using class flex-grow-1)</div>
<div class = "p-2 bg-warning">Item 2</div>
<div class = "p-2 bg-secondary">Item 3</div>
</div>
<br>
<h2>Shrink</h2>
<div class = "d-flex bg-info">
<div class = "p-2 w-100 bg-info">Item 1</div>
<div class = "p-2 flex-shrink-1 bg-warning">Item 2 (Using class flex-shrink-1)</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<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>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
自動マージンとalign-itemsを使用
フレックスユーティリティは、。mr-auto（アイテムを右に押す）および_.ml-auto_（アイテムを左に押す）クラスを使用して、フレックスアイテムに自動マージン機能を提供します。 コンテナの_mt-auto_または_mb-auto_クラスを使用して、フレックスアイテムを上部または下部に移動できます。
次の例は、上記のクラスの使用法を示しています-
例
<html>
<head>
<!-- Meta tags -->
<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.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Auto Margins</h2>
<div class = "d-flex bg-info mb-3">
<div class = "p-2 bg-warning">Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "p-2 bg-secondary">Item 3</div>
</div>
<div class = "d-flex bg-info mb-3">
<div class = "mr-auto p-2 bg-warning">mr-auto: Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "p-2 bg-secondary">Item 3</div>
</div>
<div class = "d-flex bg-info mb-3">
<div class = "p-2 bg-secondary">Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "ml-auto p-2 bg-warning">ml-auto: Item 3</div>
</div>
<h2>With align-items</h2>
<div class = "d-flex align-items-start flex-column bg-info mb-3"
style = "height: 200px;">
<div class = "mb-auto p-2 bg-warning">mb-auto: Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "p-2 bg-secondary">Item 3</div>
</div>
<div class = "d-flex align-items-end flex-column bg-info mb-3"
style = "height: 200px;">
<div class = "p-2 bg-secondary">Item 1</div>
<div class = "p-2 bg-primary">Item 2</div>
<div class = "mt-auto p-2 bg-warning">mt-auto: Item 3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<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>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
注文
次の例に示すように、フレックスは_order_ユーティリティを使用して、コンテナ内のフレックスアイテムの順序を変更します-
例
<html>
<head>
<!-- Meta tags -->
<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.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Flex Items Order</h2>
<div class = "d-flex flex-nowrap bg-info">
<div class = "order-3 p-2 bg-secondary">'order-3': Item 1</div>
<div class = "order-1 p-2 bg-primary">'order-1': Item 2</div>
<div class = "order-2 p-2 bg-warning">'order-2': Item 3</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<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>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
コンテンツを揃える
_align-content_ユーティリティを使用して、コンテナのクロス軸上のフレックスアイテムを整列（開始、終了、中央、間、周囲など）できます。
次の例はこれを示しています-
例
<html>
<head>
<!-- Meta tags -->
<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.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>align-content-start</h2>
<div class = "d-flex bg-info align-content-start flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
<h2>align-content-end</h2>
<div class = "d-flex bg-info align-content-end flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
<h2>align-content-center</h2>
<div class = "d-flex bg-info align-content-center flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
<h2>align-content-between</h2>
<div class = "d-flex bg-info align-content-between flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
<h2>align-content-around</h2>
<div class = "d-flex bg-info align-content-around flex-wrap" style = "height: 150px">
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
<div class = "p-2 border border-dark">Demo Item</div>
</div>
<br>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<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>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
