Bootstrap4のボタン
公式ドキュメント
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-secondary btn-lg">Large</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary btn-sm">Small</button>
<button type="button" class="btn btn-info btn-block">Block level button</button>
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>
アイコンボタンについて
Bootstrap3のときアイコンが使えたがBootstrap4からは外部のアイコンライブラリを使うようにとのこと。
Bootstrap4のアイコンについて（公式ドキュメント）
閉じるボタン
<button type="button" class="close" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
デモ
カード | card | 旧パネル
<div class="card">
<div class="card-header">
カードのテスト
<button type="button" class="close" aria-label="閉じる">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body">
<h5 class="card-title">カードのタイトル</h5>
<div class="card-text">
カードのテキスト<br>
聖書は神を1つの固有の名前で呼んでいますが，数多くの称号や描写を用いて神について述べています。
</div>
</div>
<div class="card-footer">
フッター
</div>
</div>
Demo
カードのタイトル
カードのテキスト
聖書は神を1つの固有の名前で呼んでいますが，数多くの称号や描写を用いて神について述べています。
文字の色 背景の色 アラート
テキスト
text-muted
text-primary
text-success
text-info
text-warning
text-danger
背景
bg-primary
bg-success
bg-info
bg-warning
bg-danger
アラート
alert alert-success
alert alert-info
alert alert-warning
alert alert-danger
Warning
HTMLソース
<p>テキスト</p>
<div class="text-muted">text-muted</div>
<div class="text-primary">text-primary</div>
<div class="text-success">text-success</div>
<div class="text-info">text-info</div>
<div class="text-warning">text-warning</div>
<div class="text-danger">text-danger</div>
<p>背景</p>
<div class="bg-primary">bg-primary</div>
<div class="bg-success">bg-success</div>
<div class="bg-info">bg-info</div>
<div class="bg-warning">bg-warning</div>
<div class="bg-danger">bg-danger</div>
<p>アラート</p>
<div class="alert alert-success" role="alert">alert alert-success</div>
<div class="alert alert-info" role="alert">alert alert-info</div>
<div class="alert alert-warning" role="alert">alert alert-warning</div>
<div class="alert alert-danger" role="alert">alert alert-danger</div>
ドロップダウン | Popper.js
Popper.jsか、もしくはPopper.jsを含むbootstrap.bundle.min.jsが必要。
公式ドキュメント
Demo
HTML
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
入力フォーム
<div style="text-align:center;">
<div class="card" style="min-width:500px;max-width:700px;display:inline-block;text-align:left;">
<div class="card-header">
<h5 class="card-title">入力フォーム</h5>
</div>
<div class="card-body">
<p class="card-text">Bootstrap4の入力フォームデザイン</p>
<div class="form-group">
<label for="email1">メールアドレス</label>
<input type="email" class="form-control" id="email1" aria-describedby="email1_help" placeholder="example@example.com">
<small id="email1_help" class="form-text text-muted">メールアドレスを入力してください。</small>
</div>
<div class="form-group">
<label for="pw1">Password</label>
<input type="password" class="form-control" id="pw1" placeholder="パスワード">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="check1">
<label class="form-check-label" for="check1">猫は好きですか。</label>
</div>
<div class="form-group">
<label for="select1">好きな猫</label>
<select class="form-control" id="select1">
<option>赤猫</option>
<option>ハチワレ</option>
<option>キジシロ</option>
<option>牛猫</option>
<option>犬</option>
</select>
</div>
<div class="form-group">
<label for="textarea1">メモ</label>
<textarea class="form-control" id="textarea1" rows="4">ノラ猫にエサをあげてはいませんと思わくもなくともなく是非に及ばず</textarea>
</div>
<div class="form-group">
<label for="file1">ファイル</label>
<input type="file" class="form-control-file" id="file1">
</div>
<div class="form-group">
<input class="form-control form-control-lg" type="text" placeholder="大きい">
<input class="form-control" type="text" placeholder="普通">
<input class="form-control form-control-sm" type="text" placeholder="小さい">
</div>
<div class="form-group row">
<label for="text2" class="col-sm-4 col-form-label">テキスト2</label>
<div class="col-sm-8">
<input type="text" readonly class="form-control" id="staticEmail" value="猫ちゃん">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-group form-row">
<div class="col">
<label for="last_name">氏</label>
<input type="text" id="last_name" class="form-control" placeholder="氏">
</div>
<div class="col">
<label for="first_name">名</label>
<input type="text" id="first_name" class="form-control" placeholder="名">
</div>
</div>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
入力フォームその2
<div style="text-align:center;">
<div class="card" style="min-width:640px;max-width:900px;display:inline-block;text-align:left;">
<div class="card-header">
<h5 class="card-title">入力フォーム</h5>
</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-3 col-form-label">メールアドレス</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="example@example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-3 col-form-label">パスワード</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="パスワード">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-3 pt-0">Radios</legend>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-3">Checkbox</div>
<div class="col-sm-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
見本
入力フォームその3
<div class="row">
<div class="col-12 col-md-1"></div>
<div class="col-12 col-md-10">
<div class="row">
<div class="form-group col-12 col-md-3">
<input type="text" class="form-control" placeholder="ダミー" />
</div>
<div class="form-group col-12 col-md-3">
<input type="text" class="form-control" placeholder="ダミー2" />
</div>
<div class="form-group col-12 col-md-2">
<input type="text" class="form-control" placeholder="ダミー3" />
</div>
<div class="form-group col-12 col-md-4">
<input type="text" class="form-control" placeholder="ダミー4" />
</div>
</div>
<div class="row">
<div class="form-group col-12 col-md-2">
<input type="text" class="form-control" placeholder="ダミー5" />
</div>
<div class="form-group col-12 col-md-4">
<input type="text" class="form-control" placeholder="ダミー6" />
</div>
<div class="form-group col-12 col-md-3">
<input type="text" class="form-control" placeholder="ダミー7" />
</div>
<div class="form-group col-12 col-md-3">
<div class="row">
<label for="" class="col-2 col-md-4">ネコ名</label>
<div class="col-10 col-md-8">
<input type="text" class="form-control" placeholder="ダミー8" />
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-1"></div>
</div>
スマホとPCの両方に対応したグリッド
デバイスのサイズによって適用するグリッドを指定できる。
下記の見本はPCで見ると横並びだが、スマホで見ると立て並びなる。
見本
神の王国とは何か
神の王国とは何ですか。その王国の王はだれですか。
HTMLソース
<div class="border-top border-success">
<div class="row" style="padding-top:5px;">
<div class="col-12 col-md-1"></div>
<div class="col-12 col-md-3">
<img src="img/imori.jpg" style="width:100%"/>
</div>
<div class="col-12 col-md-7">
神の王国とは何か<br>
神の王国とは何ですか。その王国の王はだれですか。<br>
</div>
<div class="col-12 col-md-1"></div>
</div>
</div>
グリッドとデバイスの表
| コード | 画面サイズ | デバイスの例 |
|---|
| col-4 | ～575px | 基本、または小さめスマホ |
| col-sm-4 | 576px～ | スマホ |
| col-md-4 | 768px～ | タブレット |
| col-lg-4 | 992px～ | 小さめのPC |
| col-xl-4 | 1200px～ | PC |
アイコン表示にはICONIC
Bootstrap3ではアイコンが用意されていたが、Bootstrap4では外部ライブラリに頼らねばならなくなった。
いくつか候補が上げられているがICONICが便利。
ICONICの準備
-
GitHub
や
公式サイトからダウンロードする。
-
パケージにはいろいろ入っているが必要なのはfontのみ。
fontディレクトリを丸ごとbootstrapディレクトリ内にコピーする。
-
「open-iconic.min.css」をBoostrap4の後に読み込む。
<link href="/note_prg/css/bootstrap-4.3.1-dist/bootstrap.min.css" rel="stylesheet">
<link href="/note_prg/css/bootstrap-4.3.1-dist/font/css/open-iconic.min.css" rel="stylesheet">
-
以上で準備OK
-
公式サイトから必要なアイコンを探すことができる。
https://useiconic.com/open/
見本
<span class="oi" data-glyph="arrow-circle-top"></span>
AA
<span class="oi text-success" style="font-size:1.6em" data-glyph="arrow-circle-top">AA</span>
<button type="button" class="btn btn-info"><span class="oi" data-glyph="arrow-circle-top"></span>テスト</button>
xxx
- ホーム
- プログラミングの覚書
- JavaScriptの覚書
- Bootstrap4
