Bootstrap3.x.で何かやるときの最低限のメモ

  • 226
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

簡単なデモや管理画面を作るレベルで利用する最低限のBootstrapの知識のメモ。
フロントエンドを作るのはここが参考になります。

やりたいこと

Bootstrapって、テイストそのままでいいので、さくっと作りたい!と思っても、何かとCSSいじることになり、標準のまま使えないことが多いです。ここでは、オリジナルのCSSには一切手を入れず、基本的な画面をレイアウトしてみます。

・オリジナルのCSSに一切手をいれない。
・いじる場合は、inline styleで少しいじる。
・オリジナルのCSSは、ほとんど使わない(10行以下)。

ひな形

なにも無ければ基本CDN派。たまにネット未接続環境で「はっ」とすることがあるが、問題ない。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
test
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

レイアウト

単純なようで意外と奥が深い。

containerとrow

Gridの分割とかは、お決まりなのでどうでもいい。どちらかというとその「外側」の挙動が気になる。
まずは、何もbootstrapの要素は使わず。それでも、リセット系は効いてます。

<body>

    <!-- header -->
    <div id="header" style="background-color:#ff0000">header</div>
    <!-- content -->
    <div id="header" style="background-color:#00ff00">content</div>
    <!-- footer -->
    <div id="header" style="background-color:#0000ff">footer</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>

これは、こうなる(全体に伸びる)。

boot1

次にこれ。全体をContainerで包んでみる。そして、contentを分割したいので、class=rowを追加。

<div class="container">

    <!-- header -->
    <div id="header" style="background-color:#ff0000">header</div>

    <!-- content -->
    <div class="row" style="background-color:#00ff00">
        <div class="col-md-3">left</div>
        <div class="col-md-6">center</div>
        <div class="col-md-3">right</div>
    </div>

    <!-- footer -->
    <div id="header" style="background-color:#0000ff">footer</div>

</div>

これは、こうなる(センタリングされるが、class=rowの有無で凸凹に)。

boot2

class=rowを追加したところが、ちょっと幅広になる(というか、そっちが標準の970px)。なんで?CSSを調べる気にもならんが、.rowに

・margin-left:-15px;
・margin-right:-15px;

が適用されるみたい。で、結局全体で30px伸びる。これを防ぐには、(というか、全体をこれに合わせるためには)、

・header,footerの内容をrowに入れる。
・header,center,footer要素に個別にclass="container"を定義する。

しかないようだ。全体を大きなrowで囲むのもありか?と思ったが、baseが970pxにはなるもの、入れ子のrowはmargin分だけ、伸びる。

全体をどうしても1つのcontainerで囲みたい場合は、
それぞれの要素にrowを入れる。

<div class="container">

    <!-- header -->
    <div class="row">
    <div id="header" style="background-color:#ff0000">header</div>
    </div>

    <!-- content -->
    <div class="row" style="background-color:#00ff00">
        <div class="col-md-3">left</div>
        <div class="col-md-6">center</div>
        <div class="col-md-3">right</div>
    </div>

    <!-- footer -->
    <div class="row">
    <div id="header" style="background-color:#0000ff">footer</div>
    </div>

</div>

となる。

boot3

これでやっと落ち着いた。

Navbar(メインメニュー)

では、TOPメニュー(Navbar)を追加する。特に難しいことは何もないが、navbar-fixed-topでメニューを固定にしたときに、下の要素の上にpadding:60px 0 0 0しないと、バーに埋もれてしまう。

header要素はもういらないので、消して、Navbarとし、left,center,rightに色つけた。
navbarを黒ベースにするときは、navbar-inverseとする。

<div class="container">

    <!-- navbar -->
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top">

            <div class="navbar-header">
                <a href="" class="navbar-brand">Home</a>
            </div>

            <ul class="nav navbar-nav">
                <li class="active"><a href="">menu1</a></li>
                <li><a href="">menu2</a></li>
                <li><a href="">menu3</a></li>
                <li><a href="">menu4</a></li>
            </ul>

        </nav>
    </div>

    <!-- content -->
    <div class="row" style="padding:60px 0 0 0">
        <div class="col-md-3" style="background-color:#f0f000">left</div>
        <div class="col-md-6" style="background-color:#0ff000">center</div>
        <div class="col-md-3" style="background-color:#00f0f0">right</div>
    </div>

    <!-- footer -->
    <div class="row">
    <div id="header" style="background-color:#0000ff">footer</div>
    </div>

</div>

こうなる。navbarの高さは50pxのようなので、必要に応じて、marginを入れるか、paddingする。

boot4

サイドメニュー

サイドメニューは「これ!」という作り方がありません。サイドバー用のグリッドの中で適当にメニューを作るしかないのですが、折角なのでBootstrapの要素で対応したいものです。
縦メニューは、class="nav nav-pills nav-stacked"で作れるのですが、味気ないので、ここではpanelで囲ってみます。
普通にpanelを使うと、menuにpaddingがかかった感じになるので、bodyを定義せず、そのままul,liを記述します。
glyphicon等を利用していろどりを添えます。

以下、contentのところだけ抜粋、

<div class="container">

    <!-- content -->
    <div class="row" style="padding:60px 0 0 0">
        <!-- left -->
        <div class="col-md-3">
            <!-- パネルで囲む -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    Menu
                </div>
                <!-- 敢えてbodyを作らないことで、メニューを詰める -->
                <!-- <div class="panel-body"> -->
                <ul class="nav nav-pills nav-stacked">
                    <li><a href=""><i class="glyphicon glyphicon-pencil"></i> submenu1</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-download"></i> submenu2</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-leaf"></i> submenu3</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-folder-open"></i> submenu4</a></li>
                </ul> 
                <!-- </div> -->
            </div>
        </div>

        <!-- center -->
        <div class="col-md-6" style="background-color:#0ff000">
            center
        </div>

        <!-- right -->
        <div class="col-md-3" style="background-color:#00f0f0">
            right
        </div>
    </div>

</div>

boot5

だいぶ、それっぽくなってきました。もうちょっと、Navbarとの差があってもいいかも(80pxとか)。

全体を整える

ここで、3カラムから2カラムへ変更します。また、footerはheader同様、センタリングせず、左右に伸びた状態がいいと思うのでそうします。

・right要素を削除。
・centerをmainに。

それから、Bootstrapには、footer用のスタイルはないので、そこは、cssで書くことにします。

あと、page-headerを使いますが、marginとpaddingが少し多いので、インラインで引き算します(オリジナルは触りたくないので)。あと、contentのmargin-topを80pxとした。

<div class="container">

    <!-- navbar -->
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top">

            <div class="navbar-header">
                <a href="" class="navbar-brand">Home</a>
            </div>

            <ul class="nav navbar-nav">
                <li class="active"><a href="">menu1</a></li>
                <li><a href="">menu2</a></li>
                <li><a href="">menu3</a></li>
                <li><a href="">menu4</a></li>
            </ul>

        </nav>
    </div>

    <!-- content -->
    <div class="row" style="padding:80px 0 0 0">

        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Menu
                </div>
                <!-- <div class="panel-body"> -->
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href=""><i class="glyphicon glyphicon-pencil"></i> submenu1</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-download"></i> submenu2</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-leaf"></i> submenu3</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-folder-open"></i> submenu4</a></li>
                </ul> 
                <!-- </div> -->
            </div>
        </div>

        <!-- main -->
        <div class="col-md-9">
            <!-- apply custom style -->
            <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
            <h1><small>menu1->submenu1</small></h1>
            </div>
        </div>

    </div>

</div>

<!-- footer -->
<div id="footer">copy left everything free.</div>

あと、ここに来て、無念のオリジナルCSS。。。(無念)。


#footer{
    background-color: #aaa;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color : #fff;
    margin-top:30px;
}

ポイントとしては、

・fooderは、containerから外に出し、幅制限やセンタリングの制限を受けなくしています。
・page-headerは標準でtop40のmarginがありますが多いので取っています(引き算)。
・あと、page-headerのh1をsmallタグでくくっています。

あと、paddingも9pxありますが、0に設定しています。
bootstrapはマージンが多く取られていることがおおいのですが、「引き算」すればCSS自体をいじらなくていいので便利です。

boot6

だいぶそれっぽい。

テーブルコンテンツ

ダミーのテーブルを挿入して雰囲気をみます(mainだけ抜粋)。

        <!-- main -->
        <div class="col-md-9">
            <!-- apply custom style -->
            <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
            <h1><small>menu1->submenu1</small></h1>
            </div>
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>name</th>
                        <th>email</th>
                        <th>tel</th>
                        <th>opration</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>01</td><td>hoge foo</td><td>hoge@foo.com</td><td>03-1234-5678</td>
                        <td>
                            <a href="" class="btn btn-primary btn-xs">詳細</a>
                            <a href="" class="btn btn-primary btn-xs">編集</a>
                            <a href="" class="btn btn-primary btn-xs">削除</a>
                        </td>
                    </tr>
                    <!-- 繰り返し(省略)-->

                </tbody>
            </table>
        </div>

boot7

まあ、後は好みで微調整のレベルでしょうか。パンくずリストとかは、パーツにあるので、そっち使いましょう。

Form

次は、Formのレイアウトのおさらい。何も考えず普通に書けばこうなる(contentだけ抜粋)。
なお、この書き方は一貫性が無いので、飛ばしてもらっても構わない。

class="horizontal"とかを使わないのであれば、control-labelとかの記述はいらないみたい。

<!-- main -->
        <div class="col-md-9">
            <!-- apply custom style -->
            <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
            <h1><small>menu1->submenu1</small></h1>
            </div>

            <form method="post" action"">

                <!-- name -->
                <div class="form-group">
                    <label>名前</label>
                    <input type="text" name="name" class="form-control" placeholder="名前を入力して下さい"> 
                </div>

                <!-- email -->
                <div class="form-group">
                    <label>E-Mail</label>
                    <input type="text" name="email" class="form-control" placeholder="E-Mailを入力して下さい"> 
                </div>

                <!-- area -->
                <div class="form-group">
                    <label>お住まいのエリア</label>
                    <select name="area" class="form-control">
                        <option value="関東">関東</option>
                        <option value="関西">関西</option>
                    </select>
                </div>

                <!-- gender -->
                <p><b>性別</b></p>
                <div class="radio">
                    <label>
                        <input type="radio" name="gender" value="1" id="man"></label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="gender" value="2" id="woman"></label>
                </div>

                <!-- known by -->
                <p><b>何で知りましたか?</b></p>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="knownby" value="web" id="web">
                        Web
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="knownby" value="magazine" id="magazine">
                        雑誌
                    </label>
                </div>


                <!-- comment -->
                <div class="form-group">
                    <label>コメント</label>
                    <textarea class="form-control" rows=3 placeholder="100文字までです。"></textarea>
                </div>

                <!-- submit -->
                <button type="submit" class="btn btn-primary">Submit</button>

            </form>

        </div>

そして、こうレンダリングされる。

boot8

まあ、内々なら十分使えるレベルか。
bootstrapのややこしいのは、class="horizontal"の時のマークアップと、普段のマークアップが違うこと。何で?

次は、応用というか、本流。記述量は多いが、記述に一貫性があるので、こちらが結局早いかな。

<!-- main -->
        <div class="col-md-9">
            <!-- apply custom style -->
            <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
            <h1><small>menu1->submenu1</small></h1>
            </div>

            <form method="post" action="" class="form-horizontal">

                <!-- name -->
                <div class="form-group">
                    <label class="col-md-2 control-label">名前</label>
                    <div class="col-sm-5">
                        <input type="text" name="name" class="form-control" placeholder="名前を入力して下さい"> 
                        <p class="help-block">メールは入れてね。</p>
                    </div>
                </div>

                <!-- email -->
                <div class="form-group">
                    <label class="col-md-2 control-label">E-Mail</label>
                    <div class="col-md-5">
                        <input type="text" name="email" class="form-control" placeholder="E-Mailを入力して下さい"> 
                    </div>
                </div>

                <!-- select -->
                <div class="form-group">
                    <label class="col-md-2 control-label">エリア</label>
                    <div class="col-md-5">
                        <select name="area" class="form-control">
                            <option value="関東">関東</option>
                            <option value="関西">関西</option>
                        </select>
                    </div>
                </div>


                <!-- gender -->
                <div class="form-group">
                    <label class="col-md-2 control-label">性別</label>
                    <div class="col-md-5">
                        <div class="radio">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="1" id="man"></label>
                        </div>
                        <div class="radio">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="2" id="woman"></label>
                        </div>
                    </div>
                </div>

                <!-- known by -->
                <div class="form-group">
                    <label class="col-md-2 control-label">何で知った?</label>
                    <div class="col-md-5">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="knownby" value="web" id="web">Web
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="knownby" value="magazine" id="magazine">雑誌
                            </label>
                        </div>
                    </div>
                </div>


                <!-- comment -->
                <div class="form-group">
                    <label class="col-md-2 control-label">コメント</label>
                    <div class="col-md-5">
                        <textarea class="form-control" rows=3 placeholder="100文字までです。"></textarea>
                    </div>
                </div>

                <!-- submit -->
                <div class="col-md-offset-2">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>

            </form>

        </div>

boot9

まあこんな感じ。radiobuttonとかでclass="radio-inline"としても、横並びにならない。なんで?
→たぶんradio-inlineを入れる位置がおかしい。<radio>にいれれば動くと思う。

あと、エラーメッセージ等はpタグでclass="help-block"で記述する。

画像一覧

Bootstrap使ってるとあまり使いませんが、ECサイトのような写真の羅列。これは、簡単(contentだけ抜粋)。

    <!-- content -->
    <div class="row" style="padding:80px 0 0 0">

        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Menu
                </div>
                <!-- <div class="panel-body"> -->
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href=""><i class="glyphicon glyphicon-pencil"></i> submenu1</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-download"></i> submenu2</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-leaf"></i> submenu3</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-folder-open"></i> submenu4</a></li>
                </ul> 
                <!-- </div> -->
            </div>
        </div>

        <!-- main -->
        <div class="col-md-9">
            <!-- apply custom style -->
            <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
            <h1><small>menu1->submenu1</small></h1>
            </div>

            <div class="row">

                <!-- この単位を繰り返す -->
                <div class="col-md-4">
                    <div class="thumbnail" style="text-align:center;padding-top:10px;">
                        <a href="">
                            <img src="150x150.jpg">
                        </a>
                        <div class="caption">
                            <p><b>Caption</b></p>
                            <p>this is a caption.</p>
                            <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
                        </div>
                    </div>
                </div>
                <!-- ここまで -->
                <!-- 繰り返し -->

            </div><!-- end row -->

        </div><!-- end main -->

    </div><!-- end content -->

これは、こんな感じになる。

boot10

最後なのでソース全体

これは画像リスト版。上記は、各contentが違うだけ。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="base.css" rel="stylesheet">
</head>
<body>

<div class="container">

    <!-- navbar -->
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top">

            <div class="navbar-header">
                <a href="" class="navbar-brand">Home</a>
            </div>

            <ul class="nav navbar-nav">
                <li class="active"><a href="">menu1</a></li>
                <li><a href="">menu2</a></li>
                <li><a href="">menu3</a></li>
                <li><a href="">menu4</a></li>
            </ul>

        </nav>
    </div>

    <!-- content -->
    <div class="row" style="padding:80px 0 0 0">

        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Menu
                </div>
                <!-- <div class="panel-body"> -->
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href=""><i class="glyphicon glyphicon-pencil"></i> submenu1</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-download"></i> submenu2</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-leaf"></i> submenu3</a></li>
                    <li><a href=""><i class="glyphicon glyphicon-folder-open"></i> submenu4</a></li>
                </ul> 
                <!-- </div> -->
            </div>
        </div>

        <!-- main -->
        <div class="col-md-9">
            <!-- apply custom style -->
            <div class="page-header" style="margin-top:-30px;padding-bottom:0px;">
            <h1><small>menu1->submenu1</small></h1>
            </div>

            <div class="row">

                <!-- この単位を繰り返す -->
                <div class="col-md-4">
                    <div class="thumbnail" style="text-align:center;padding-top:10px;">
                        <a href="">
                            <img src="150x150.jpg">
                        </a>
                        <div class="caption">
                            <p><b>Caption</b></p>
                            <p>this is a caption.</p>
                            <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
                        </div>
                    </div>
                </div>
                <!-- ここまで -->
                <!-- 繰り返し -->

            </div><!-- end row -->

        </div><!-- end main -->

    </div><!-- end content -->

</div>

<!-- footer -->
<div id="footer">copy left everything free.</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

それとCSS。一応10行以内。

#footer{
    background-color: #aaa;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color : #fff;
    margin-top:30px;
}

レスポンシブを無効にする

管理画面では、レスポンシブ対応いらないことがある。

ここを参考に、その通りやればいい。ただ、適用したCSSで変なbackgraoud-colorやborderがついたので、inline sytleで上書きした。
Gridを使っている場合は、col-xs-Xにするのだけど、そこに変なスタイルがついていた。

                <!-- この単位を繰り返す -->
                <div class="col-xs-4" style="background-color:#fff;border:none">
                    <div class="thumbnail" style="text-align:center;padding-top:10px;">
                        <a href="">
                            <img src="150x150.jpg">
                        </a>
                        <div class="caption">
                            <p><b>Caption</b></p>
                            <p>this is a caption.</p>
                            <p style="margin-bottom:0px"><a href="" class="btn btn-primary">to cart</a></p>
                        </div>
                    </div>
                </div>
                <!-- ここまで -->

まとめ

Bootstrapをなるべくカスタマイズせずに利用するためには、inline styleで既存のスタイルを少しいじるのが一番良い。