form-select-sm
bootstrap5.css
bootstrap5.css
.col-form-label-sm {
padding-top: calc(0.25rem + 1px);
padding-bottom: calc(0.25rem + 1px);
font-size: 0.875rem;
line-height: 1.5;
}
bootstrap5.css
.form-control-plaintext.form-control-sm,
.form-control-plaintext.form-control-lg {
padding-right: 0;
padding-left: 0;
}
bootstrap5.css
.form-control-sm {
height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
bootstrap5.css
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
height: calc(1.5em + 0.5rem + 2px);
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
html bootstrap5 Sample
フォームタイトル:block-title-infoとfa-shopping-basket
formタイトル
<!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
<!-- font-awesomeによるアイコン -->
<h3 class="block-title-info">
<i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトル
</h3>
<div class="form-row">
<!-- 最小単位のセット、勝手に順番に2列で並んでいく -->
<div class="form-group col-sm-6">
<label for="text4a">First name</label>
<input type="text" class="form-control" id="text4a" placeholder="First name" />
</div>
<div class="form-group col-sm-6">
<label for="text4b">Last name</label>
<input type="text" class="form-control" id="text4b" placeholder="Last name" />
</div>
<div class="form-group col-sm-6">
<label for="text4a">First name</label>
<input type="text" class="form-control" id="text4a" placeholder="First name" />
</div>
<div class="form-group col-sm-6">
<label for="text4b">Last name</label>
<input type="text" class="form-control" id="text4b" placeholder="Last name" />
</div>
<div class="form-group col-sm-6">
<label for="select1a">Select:</label>
<select id="select1a" class="form-control">
<option>Select A</option>
<option>Select B</option>
</select>
</div>
<div class="form-group col-sm-6">
<label for="file1">File:</label>
<input type="file" id="file1" class="form-control-file" />
</div>
<div class="form-group col-sm-6">
<label for="select1a">check:</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1a" checked />
<label class="form-check-label" for="check1a">Check A</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1b" />
<label class="form-check-label" for="check1b">Check B</label>
</div>
</div>
<div class="form-group col-sm-6">
<label for="select1a">radio:</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
<label class="form-check-label" for="radio1a">Check A</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radio1" id="radio1b" />
<label class="form-check-label" for="radio1b">Check B</label>
</div>
</div>
</div>
読み取りテキストを、枠を非表示にする:form-control-plaintext
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">メールアドレス</label>
<div class="col-sm-10">
<!-- inputの枠を表示しない -->
<input type="text" class="form-control-plaintext" readonly id="staticEmail" value="email@example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
<div class="col-sm-10">
<!-- passwordを使うと、入力内容が*として表示される -->
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
</form>
入力コントロールのサイズを調整する:-lgと-sm
<form>
<!-- 大サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input1">大サイズのテキスト入力欄 form-control-lg</label>
<input type="text" class="form-control form-control-lg" id="input1" placeholder="form-control-lg">
</div>
<!-- 標準サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input2">標準サイズのテキスト入力欄</label>
<input type="text" class="form-control" id="input2" placeholder="Default size">
</div>
<!-- 小サイズのテキスト入力欄 -->
<div class="form-group">
<label for="input3">小サイズのテキスト入力欄 form-control-sm</label>
<input type="text" class="form-control form-control-sm" id="input3" placeholder="form-control-sm">
</div>
<hr>
<!-- 大サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select1">大サイズのプルダウンメニュー form-control-lg</label>
<select class="form-control form-control-lg" id="select1">
<option>form-control-lg</option>
</select>
</div>
<!-- 標準サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select2">標準サイズのプルダウンメニュー</label>
<select class="form-control" id="select2">
<option>Default size</option>
</select>
</div>
<!-- 小サイズのプルダウンメニュー -->
<div class="form-group">
<label for="select3">小サイズのプルダウンメニュー form-control-sm</label>
<select class="form-control form-control-sm" id="select3">
<option>form-control-sm</option>
</select>
</div>
</form>
水平配置のフォームを作成する:form-groupとrowとcol
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
<label class="form-check-label" for="radios1">
オプション1
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
<label class="form-check-label" for="radios2">
オプション2
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
<label class="form-check-label" for="radios3">
オプション3(無効)
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-2">チェックボックス</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1">
<label class="form-check-label" for="check1">
チェックする
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">サインイン</button>
</div>
</div>
</form>
インラインのフォーム:form-inline
<!-- formにclassを設定する -->
<form class="form-inline">
<label class="sr-only" for="name">氏名</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="name" placeholder="氏名を入力">
<label class="sr-only" for="username">ユーザーネーム</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="username" placeholder="ユーザーネームを入力">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="checkbox20">
<label class="form-check-label" for="checkbox20">
チェックする
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">送信</button>
</form>
ラベルサイズを調整する:col-form-label-smとform-control-sm
<form>
<div class="form-group row">
<!-- 小サイズのラベル -->
<label for="labelSm" class="col-sm-3 col-form-label col-form-label-sm">小サイズ:col-form-label-sm</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-sm" id="labelSm" placeholder="form-control-sm">
</div>
</div>
<div class="form-group row">
<!-- 標準サイズのラベル -->
<label for="labelDefault" class="col-sm-3 col-form-label">標準サイズ</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="labelDefault" placeholder="Default size">
</div>
</div>
<div class="form-group row">
<!-- 大サイズのラベル -->
<label for="labelLg" class="col-sm-3 col-form-label col-form-label-lg">大サイズ:col-form-label-lg</label>
<div class="col-sm-9">
<input type="email" class="form-control form-control-lg" id="labelLg" placeholder="form-control-lg">
</div>
</div>
</form>
入力グループのサイズ調整/小: input-group-sm
Small
<!-- 小サイズの入力グループ -->
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
入力グループのサイズ調整/大:input-group-lg
Large
<!-- 大サイズの入力グループ -->
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
ナビバーの検索窓:form-inline
<nav class="navbar navbar-expand navbar-dark bg-dark">
<!-- 画面が狭い時はアイコン、画面が広い時メニューを表示 -->
<a class="navbar-brand" href="#">TOP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">メニュー1</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー2</a></li>
<li class="nav-item"><a class="nav-link" href="#">メニュー3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ナビゲーションバー 切替ボタンを左寄せに表示:mr-auto
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav02"
aria-controls="navbarNav02" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ブランド</a>
<div class="collapse navbar-collapse" id="navbarNav02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ナビゲーションバーアイコンしか出さない
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- navbar-brand -->
<a class="navbar-brand" href="#">TOP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav2"
aria-controls="navbarNav2" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ブランドの表示・非表示 ブランドを折り畳んで隠すナビゲーションバ
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<a class="navbar-brand" href="#">ブランドを隠す</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active"><a class="nav-link" href="#">リンク1<span class="sr-only">(現位置)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-light my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
ボタン:navbar
ナビバーのデザイン:navbar-darkとbg-dark
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<!-- アウトラインの検索ボタン、darkだど映える -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>
navbar-lightで文字色を暗くし、背景色をCSSで設定
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#">ブランド</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3"
aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="ナビゲーション切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent3">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">リンク1</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク2</a></li>
<li class="nav-item"><a class="nav-link" href="#">リンク3</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">検索</button>
</form>
</div>
</nav>