Bootstrapの基本

2023年2月20日 16:09

1.Bootstrap

Bootstrap は、レスポンシブなモバイルファーストの Web プロジェクトを開発するための最も一般的なHTML、CSS、およびJS フレームワークです。Bootstrapにより、フロントエンド開発がより迅速かつ簡単になります。すべての開発者がすぐに開始でき、すべてのデバイスを適応させることができ、すべてのプロジェクトに適用できます。
CSS Media Query のおかげで、Bootstrapの助けを借りて、Web サイトとアプリケーションは同じソースコードを介してモバイル、タブレット、および PC デバイスに迅速かつ効果的に適応できます。
Bootstrapは、一般的な HTML 要素、HTML および CSS コンポーネント、jQuery プラグインに関するすべての詳細なドキュメントを見つけることができる。

2.ダウンロード

2.1 BootstrapCDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

2.2 npm

npmを用いてインストール：
npm install bootstrap@3
モバイルブラウザーでは、viewportメタ属性を user-scalable=no に設定することで、zoomingを無効にすることができます。このように、zooming機能を無効にした後、ユーザーは画面をスクロールすることしかできず、Web サイトをネイティブアプリケーションのように見せることができます。以上の二つの方法をすべての Web サイトに適応するわけではありません。状況によって異なります。

3.Bootstrapの基本

3.1 viewport

適切な描画とタッチスケーリングを確保するには、viewportタグを <head> に追加します。

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

3.2 レイアウトコンテナ

.container クラスは、レスポンシブレイアウトをサポートする固定幅コンテナーです。
.container-fluid クラスは、viewport全体を占める幅 100% のコンテナーです。
<div class="container">container</div>
<div class="container-fluid">.container-fluid</div>

3.3 文字

small：小字で表示
strong:太字で表示
em ：斜体で表示
.text-left：テキストを左揃えにする
.text-center：テキストを中心揃えにする
.text-right：テキストを右揃えにする
.text-muted：テキストをは弱める
<mark>：ハイライト
<del>：削除されたテキスト
<s>：無用テキスト
<ins>：テキスト挿入
<u>：下線付きテキスト
<div class="container">
<small>smallタグ</small><br>
<strong>strongタグ</strong><br>
<em>emタグ</em><br>
<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>
<p class="text-muted">text-muted</p>
<p class="text-primary">text-primary class</p>
<p class="text-success">text-success class</p>
<p class="text-info">text-info class</p>
<p class="text-warning">text-warning class</p>
<p class="text-danger">text-danger class</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
<mark>highlight</mark>
<del>removed text</del>
<s>useless text</s>
<ins>insert the text</ins>
<u>underlined text</u>
</div>

3.4 略語

<abbr> 要素は、テキストの下部に表示される点線の境界線としてスタイル設定され、マウスがその上にあるときに全文を表示します ( <abbr> title 属性にテキストを追加する限り)。.initialismはより小さい字体を表示
<abbr title="World Wide Web">abbr略語</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">abbr略語</abbr>

3.5 リスト

<ol>
<li>Item</li>
</ol>
<ul>
<li>Item </li>
</ul>
<ul class="list-unstyled">
<li>Item</li>
</ul>
<ul class="list-inline">
<li>Item</li>
</ul>
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
</dl>

3.6 テーブル

.table-bordered ：テーブルとその中の各セルに境界線を追加
.table-hover ：<tbody> の各行をhover状態に応答
.table-striped：<tbody> 内の各行に縞を追加
.active、.success、.info、.warning、.dangerは以上のtext-successと同様

3.7 Form

.form-control：<input>、<textarea>、および <select> 要素のwidth 属性は、デフォルトで width: 100%; に設定