Bootstrapざっくり入門
Bootstrapとは
レスポンシブWebデザインを採用した HTML, CSS, JavaScript フレームワークです。
レスポンシブWebデザイン
レスポンシブWebデザインはフルードグリッド、フルードイメージ、メディアクエリなどの技術で構成されています。
-
フルードグリッド
- グリッドシステムによるWebデザインとブラウザ幅の変化に応じて内容の大きさを変えるリキッドレイアウトを組み合わせた手法をフルードグリッドと言います。
-
フルードイメージ
- レイアウト幅に応じて、画像サイズを拡大縮小させるテクニックをフルードイメージと言います。
-
メディアクエリ
- 画面幅、画像解像度、デバイスの向きなどの条件に合わせて、スタイルを切り替えることができるCSS3から導入された技術です。
Bootstrapの導入
CDN、パッケージマネージャ、ダウンロードなど様々な方法で導入することができます。
詳しくはBootstrap公式サイトを参照してください。
Bootstrap4の基本テンプレート
<!doctype html>
<html lang="ja">
<head>
<!-- Required 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://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
インデックス
Bootstrapざっくり入門 - 2
Bootstrapざっくり入門 - 3
あとがき
Bootstrapについてざっくりとまとめています。
どうか暖かい目で見守ってください。
(´･ω･)ﾉ 夜露死苦 ヽ(´･ω･)
Author And Source
この問題について(Bootstrapざっくり入門), 我々は、より多くの情報をここで見つけました https://qiita.com/white_tiger/items/f3823fbc7bcee266f2c7著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .