Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

簡単なデモや管理画面を作るレベルで利用する最低限の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で既存のスタイルを少しいじるのが一番良い。

zaburo
こんにちは。自分用のメモをだらだら公開しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした