極めて簡単に Bootstrap を使ってみる

管理画面などで「デザイン工数かけるほどではないけど、完全なノンデザイン HTML も如何なものか・・・」といったときに、割合と重宝します。
「わずかな記載で、ある程度それっぽく見える」が重要なポイント。
深く突っ込むと色々できると思うのですが、それは各自で調べて下さい m(_ _)m

インストール

http://getbootstrap.com/からダウンロードにいくと、zipファイルが落とせるかと思います。

zip ファイルを解凍すると、css、js の２つのディレクトリ(およびその中身のファイル)が出てくると思いますので、DocumentRoot などに設置します。
Linux の場合「wget して unzip して」って手順でもよいかと思います。

前提としての HTML

大体、こんな感じかと思います。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="row">
      上部のヘッダ各種
    </div>
    <div class="row">
      本体コンテンツ各種
    </div>
  </div>
  <!-- /container -->
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

以下、基本的には「本体コンテンツ各種」の中にHTMLを書く前提で色々と書いていきたいと思います。

便利な道具：テーブル

<table class="table table-striped">

と書くと、テーブルがストライプな感じで、テーブル行が交互に色付きます。
また

<table class="table table-hover">

と書くと、マウスオーバーしている行の色が変わります(もしかしたら、tbody が必須、かもしれませんのでご注意ください)。

便利な道具：form の入力用ギミック

「formを全画面でだだっ広くはしたくない」場合は、

<form class="col-md-4" action="...

といった書き方をすると、ある程度サイズを抑えられます。col-md-4 の数字のところは、１～１２までの任意の数値を入れてください。
４を入れると、大体「左寄せ1/3くらいの幅」になります。

通常の test input は、例えば

<label>ラベル名</label><input class="form-control" type="text" name="name" value="" placeholder="ガイド用文字列">

と書くと

「ラベル名」改行「入力場所」というフォーマットになる
プレースホルダテキストがいい感じに表示される
その input 要素がアクティブになった時に、ふちが少し青くなる

といった効果があります。

また、ごくごくごく簡単な validate として、アトリビュート値に「required」を入れると「必須要素」になって、未入力チェックくらいは自動でやってくれます。

<label>ラベル名</label><input required class="form-control" type="text" name="name" value="" placeholder="ガイド用文字列">

ラジオボタンの場合

<div class="radio">
  <label><input type="radio" name="hoge" value="t1">Cookie</label>
  <label><input type="radio" name="hoge" value="t2">URLパラメタ</label>
</div>

という風に、全体を「div class="radio"」で囲むときれいな感じになりました。
未チェックですが、checkbox も同じような感じみたいです。

便利な道具：リンク用ボタン

「class="btn btn-default"」等のクラスが、Aエレメントだろうが button エレメントだろうが使えるので、ちょっとした実装に重宝します。
btn-default の部分は、デフォルト以外にもあります。

文字色

文字色も、class で色々と用意されているので、ちょっとした「エラー表示」などには使いやすいかと思います。
例えば、こんな風に使っていました。

<div class="alert alert-danger">登録内容にエラーがありました<br><br>
  <?php echo $error; ?>
</div>

まとめ

「細かいデザイン」の調整は、また色々とあるかと思うのですが。
その辺のセンスは筆者には無いのでね。この辺までで。

とりあえずわずかな手間で、ある程度のデザインがほしいなんていうときに、細かく便利と思います。

あと、レスポンシブデザイン対応なので、ちゃんと色々組むと、色々なことができるようです。

仲間募集中

弊社ではエンジニアを募集中です。インフラからアプリ、ユーザサポートまで幅広く業務を行ってます。
https://www.nittsu-infosys.com/recruit/2019/index.html

Bootstrap の使い方のようなもの