Zenn
🐷

【Bootstrap】v4.5導方法と注意点

2022/05/05に公開
Bootstrap
tech

導入

ここを見て導入する。
https://getbootstrap.jp/docs/4.5/getting-started/introduction/

ひな形

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap temp</title>
    <!-- Bootstrap link -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- /Bootstrap link -->
    <link rel="stylesheet" href="app.css">
</head>

<body>
    <!-- Contents -->
    <button type="button" class="btn btn-primary">Primary</button>
    <!-- /Contents -->

    <!-- Bootstrap script -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
    <!-- /Bootstrap script -->
</body>

</html>

Bootstrapの強み

2つある。

1.コンポーネント思考

button等のhtml要素をある程度見た目が整った部品(コンポーネント)で管理しており、開発者はそれらをimportして使う。自分で見た目部分を作らなくても良いため開発が高速になる。
(ただ、importしたものを使うだけだとオリジナリティに欠けたwebページになるので注意)

2.Grid システム

レスポンシブデザインを簡単に実装できる。
これもクラス名で適用する。
https://getbootstrap.jp/docs/4.5/layout/grid/

Bootstrapの使い方

classを指定して使う。<link>で取ってきたスタイルを適用させて見た目を作る。

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

gridシステムの使い方

後で書く...

導入注意点

linkタグで読み込む際はローカルで読み込むものを後にする。*
読み込み順を意識しないとBootstrapのcssで上書きされてしまう。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link prl="stylesheet" href"./css/index.css">

<script>タグは</body>タグの直前に置く

	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

Discussion