Category: bootstrap

table-secondary など、classにtable-*を入れる

<table class="table">
                  <tr>
                    <th>問合せ日時</th><th>会社名</th><th>氏名</th><th>カテゴリ</th><th>問合せ内容</th><th>詳細</th>
                  </tr>
                  @if($quotes)
                    @foreach ($quotes as $quote)
                      <tr class="{{ $quote->status == 1 ? 'table-secondary' : ''}}">
                        <td>{{ \Carbon\Carbon::parse($quote->created_at)->isoFormat("YYYY年MM月DD日(ddd) H:m") }}</td> // 省略
                      </tr>
                    @endforeach
                  @endif
                </table>

before

after

class=”” 自体を三項方程式で切り分けたいが上手くいかないのでclassの中身だけを条件分岐としています。
しかし、bootstrap万能です。

まずvoltのドキュメントを確認します。
https://themesberg.com/docs/volt-bootstrap-5-dashboard/getting-started/file-structure/

html内に書かれている @@include などはgulpの記法とのこと。
file-structureを読む限り、sassの編集はsrcフォルダのファイルを変更するように見える。

_head.html で読み込んでいるCSS

<!-- Fontawesome -->
<link type="text/css" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">

<!-- Sweet Alert -->
<link type="text/css" href="@@path/vendor/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">

<!-- Notyf -->
<link type="text/css" href="@@path/vendor/notyf/notyf.min.css" rel="stylesheet">

<!-- Volt CSS -->
<link type="text/css" href="@@path/css/volt.css" rel="stylesheet">

src/scss/volt/components/_body.scss

.search {
	.btn {
		width: 200px;
	}
}

一応効いてますね。
「src/scss/volt/」フォルダのscssファイルを編集すれば良いようです。

というか、日本語のドキュメントが殆ど無いんだが。。　日本人で使ってる人は殆どいないのかな。

pcの時はrow(横並び)にして、改行してspの時はmargin-topをつける
.mt-3 と .mt-md-0 をつければ、mtを切り分けられる。

<div class="row mt-3">
			<form class="d-flex col-md-4">
		        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
		        <button class="btn btn-outline-success" type="submit">Search</button>
		    </form>
		    <div class="col-md-3 mt-md-0 mt-3">
		    <select class="form-select" aria-label="Default">
		    	<option selected>Recomend</option>
		    	<option value="1">Low Price</option>
		    	<option value="2">High Price</option>
		    </select>
			</div>
		</div>

pc

sp

よっしゃーーー〜ーーー

<footer class="footer mt-4 py-3 bg-light">
    <div class="container text-center">
      <span class="text-muted">Demo Company &copy; All Right Reserved.</span>
    </div>
 </footer>

2行にしたい。

<footer class="footer mt-4 py-3 bg-light">
	<div class="text-end">
      <a href="">Privacy Policy</a>	<a href="">Terms</a>
    </div>
    <div class="text-center">
      <span class="text-muted">Demo co., &copy; All Right Reserved.</span>
    </div>
 </footer>

logoは .navbar-brand、右寄せは .float-end を使用する。
参考: 横の配置ユーティリティ

<nav class="navbar navbar-light bg-light">
	<div class="container-fluid">
		<a class="navbar-brand">Demo EDI Manager</a>
		<div class="float-end">
			hoge
		</div>
	</div>
</nav>

<nav class="navbar navbar-light bg-light">
	<div class="container-fluid">
		<a class="navbar-brand">Demo EDI Manager</a>
		<div class="float-end">
			<ul class="list-group list-group-horizontal">
				<li class="list-group-item">Order</li>
				<li class="list-group-item">Logout</li>
			</ul>
		</div>
	</div>
</nav>

### レスポンシブル対応

<nav class="navbar navbar-light navbar-expand-md bg-light">
  <a class="navbar-brand">Demo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#responsiveMenu" aria-controls="responsiveMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="responsiveMenu">
      <ul class="navbar-nav mr-auto">
          <li class="nav-item">
              <a class="nav-link" href="#">Order</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Logout</a> 
          </li>
      </ul>
  	</div>
</nav>

pc

sp

ん？　レスポンシブルでコーディングすると、responsiveMenuのli要素に対して .float-endが効かないように見えるがどうしたら良いんだ？

### justify-content-end
.float-end ではなく .justify-content-end にすると、PC版は右寄せになる。

  <div class="collapse navbar-collapse justify-content-end" id="responsiveMenu">
      <ul class="navbar-nav mr-auto">
          <li class="nav-item">
              <a class="nav-link" href="#">Order</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Logout</a> 
          </li>
      </ul>
  	</div>

なるほどー
fontawesomeを使って、アイコンを装飾します。

ほう、良い感じ。

### Bootstrap5 入門本
Bootstrapを多用されている場合はあった方が良いかも..

nav-tabsとnav-itemで作る

<ul class="nav nav-tabs">
		<li class="nav-item">
			<a class="nav-link active">タブ1</a>
		</li>
		<li class="nav-item">
			<a class="nav-link">タブ2</a>
		</li>
		<li class="nav-item">
			<a class="nav-link">タブ3</a>
		</li>
		<li class="nav-item">
			<a class="nav-link">タブ4</a>
		</li>
	</ul>

これでもうタブが出来る

	<ul class="nav nav-tabs">
		<li class="nav-item">
			<a href="#tab1" class="nav-link active" data-toggle="tab">タブ1</a>
		</li>
		<li class="nav-item">
			<a href="#tab2" class="nav-link" data-toggle="tab">タブ2</a>
		</li>
		<li class="nav-item">
			<a href="#tab3" class="nav-link" data-toggle="tab">タブ3</a>
		</li>
		<li class="nav-item">
			<a href="#tab4" class="nav-link" data-toggle="tab">タブ4</a>
		</li>
	</ul>
	<div class="tab-content">
		<div id="tab1" class="tab-pane active">
			タブ1のコンテンツが入ります
		</div>
		<div id="tab2" class="tab-pane">
			タブ2のコンテンツが入ります
		</div>
		<div id="tab3" class="tab-pane">
			タブ3のコンテンツが入ります
		</div>
		<div id="tab4" class="tab-pane">
			タブ4のコンテンツが入ります
		</div>
	</div>

おお、かなり凄え

### Bootstrap入門本
Bootstrapは、あんまり本を買って勉強するイメージはないけど、多用されている場合はあった方が良いかも..

公式サイトのサンプルでテストします。

<a href="/test.html">
		<div class="card" style="width: 18rem;">
            <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
            <div class="card-body">
                <h5 class="cart-title">Cart Title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        </a>

普通にaタグで囲うだけでOKです。

SPでtableを表示した際に、tableの横幅が固定されるので、セル内の文字数がtheaderのセルよりも長くなった場合、縦長のテーブルになってしまう。

PC

SP

-> tableをtable-responsiveで囲み、セルにtext-nowrapを入れる

<div class="table-responsive">
				<table class="table table-striped">
					<thead >
						<tr>
							<th scope="col" class="font-weight-normal">ID</th>
							<th scope="col" class="font-weight-normal">見積日</th>
							<th scope="col" class="font-weight-normal">件名</th>
							<th scope="col" class="font-weight-normal">金額合計</th>
							<th scope="col" class="font-weight-normal">詳細</th>
							<th scope="col" class="font-weight-normal">見積書</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td class="text-nowrap">2020年8月9日(日)</td>
							<td class="text-nowrap">高温ヘリウム検査装置製造</td>
							<td>200,000,000</td>
							<td class="text-nowrap"><button>詳細</button> <button>編集</button></td>
							<td class="text-nowrap"><button>ダウンロード</button></td>
						</tr>
					</tbody>	
				</table>
			</div>

横スクロール出来るようになりました。

件名など入力時にバリデーションで文字数制限をしておけば、横スクロールが長くなりすぎる事はないでしょう。

右に寄せたいメニュー(ログアウト)は、ul　navbar-nav mr-autoで作ったメニューからmr-autoを外して再度ul navbar-navを作る。
小技として、ログアウトはactiveを外して薄く表示させてみた。

<div class="collapse navbar-collapse" id="navbarCollapse">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item dropdown  active">
						<a class="nav-link dropdown-toggle" href="/estimate" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">見積管理</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="/estimate">見積一覧</a>
							<hr>
							<a class="dropdown-item" href="/estimate/input">見積登録</a>
						</div>
					</li>
					// 省略
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="">ログアウト</a>
					</li>
				</ul>
			</div>

pc

sp

まあまあいいんじゃないでしょうか。

まずヘッダメニューの雛形を作ります。

### classにcollapse navbar-collapseのみ

<div class="collapse navbar-collapse" id="navbarCollapse">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active">
						<a class="nav-link" href="/estimate">見積管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="/order">受注管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="/client">得意先管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link disabled" href="">その他</a>
					</li>
			</div>

続いて、ドロップダウンをつけていきます。

<div class="collapse navbar-collapse" id="navbarCollapse">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item dropdown active">
						<a class="nav-link dropdown-toggle" href="/estimate" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">見積管理</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="/estimate">見積一覧</a>
							<a class="dropdown-item" href="/estimate/input">見積登録</a>
						</div>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="/order">受注管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link" href="/client">得意先管理</a>
					</li>
					<li class="nav-item active">
						<a class="nav-link disabled" href="">その他</a>
					</li>
			</div>

悪くはないけど。悪くはないけど背景色とカラーを変えたい。(=悪い)

/src/scss/style.scss

.navbar {
	.navbar-nav {
		.dropdown-menu {
			background-color: #1e90ff;
		}
		.active {	
			a, a:focus, a:hover {
				background-color: #1e90ff;
				color: #fff;
			}
		}
	}
}

まあいいけど、操作性を考えると、区切り線を入れたい。
class=”divider”で上手くいかないので、hrで対応する。

<li class="nav-item dropdown active">
						<a class="nav-link dropdown-toggle" href="/estimate" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">見積管理</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="/estimate">見積一覧</a>
							<hr>
							<a class="dropdown-item" href="/estimate/input">見積登録</a>
						</div>
					</li>

.navbar {
	.navbar-nav {
		.dropdown-menu {
			background-color: #1e90ff;
		}
		.active {	
			a, a:focus, a:hover {
				background-color: #1e90ff;
				color: #fff;
			}
		}
		hr {
			margin-top: 5px;
			margin-bottom: 5px;
		}
	}
}

pc

sp

想像してたより綺麗。これで、見積管理以外のドロップダウンも作り込んでいきます。