【Bootstrap】v4.5導方法と注意点
16556 ワード
導入
ここを見て導入する。
ひな形
<!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/[email protected]/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 システム
レスポンシブデザインを簡単に実装できる。
これもクラス名で適用する。
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/[email protected]/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>
Author And Source
この問題について(【Bootstrap】v4.5導方法と注意点), 我々は、より多くの情報をここで見つけました https://zenn.dev/nash/articles/0c9af1a6676217著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol