Bootstrap3

&tag(Bootstrap3);

目次†[edit]

目次
関連ページ
参考情報
変更点
グリッド
- グリッドシステムの基本
- グリッドを入れ子にする
Form

↑

参考情報†[edit]

Bootstrap3でさくっとWebサイトを作ってみよう | Designup // Bootstrap3の使用例

↑

変更点†[edit]

レスポンシブルを無効にしづらくなった。

↑

グリッド†[edit]

↑

グリッドシステムの基本†[edit]

Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお
全体をセンタリングするためにcontainerを使う。
rowはネガティブマージンを持ち始点をずらすもの。
その中にcolが12個まで格納できる。

↑

グリッドを入れ子にする†[edit]

入れ子にするときrowで囲む。その中は12から始まる。

    <div class="container">
      <div class="col-xs-6" style="background-color: #999;">列1</div>
      <div class="col-xs-6" style="background-color: #bbb;">列2</div>


      <div class="col-xs-8" style="background-color: #999;">列1</div>
      <div class="col-xs-4" style="background-color: #bbb;">列2</div>


      <div class="col-xs-8" style="background-color: #999;">
	<div class="row">
	  <div class="col-xs-6" style="background-color: #777;">列1-1</div>
          <div class="col-xs-6" style="background-color: #888;">列1-2</div>
	</div>
      </div>
      <div class="col-xs-4" style="background-color: #bbb;">列2</div>
    </div>

ネストサせたい場合、rowとcolをまとめて指定しないといけない。逆にいえばネストさせなくていいならばrowとcolはいらない。

↑

Form†[edit]

↑

全般†[edit]

↑

.form-controlを適用するのは？†[edit]

CSS · Bootstrapによると、 <input>、<textarea>、<select>あたりに適用するのが読みたい。
checkboxやradiobuttonに適用すると変になる。

↑

form-horizontal†[edit]

↑

ラベルとコントロールを同一行に配置する場合†[edit]

1行ごとにfrom-groupのdivで囲み、その中をcolで区切る。
control-labelを指定するとラベルは右寄せになる。

チェックボックスは外側をcheckboxのclass指定をしたdivで囲む。チェックボックス自体はlabelで囲まないと位置が揃わない?

    <form class="form-horizontal">
        <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
            </div>
        </div>       
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="confirm" class="col-sm-2 control-label">確認</label>
            <div class="col-sm-10">
                <div class="checkbox">
                    <label><input id="confirm" type="checkbox"> ※ラベルタグが無いと位置が揃わない？</label>
                </div>
            </div>
        </div>
    </form>

↑

form-inline†[edit]

↑

form-groupの幅を指定するには？†[edit]

jquery - input width in form-inline bootstrap 3 - Stack Overflowにあるように、container > row > form-inline > col > from-groupのように構成する？

<div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                <div class="col-xs-12 col-md-2"> 
                    <div class="form-group">  
                        <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search">  
                    </div>
                </div>
                    <div class="col-xs-6 col-md-1">
                        <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/>
                </div>
            </form>
        </div>
    </div>

うまくいかない場合、ですきまをかえるしかないかも。

↑

ボタングループ†[edit]

↑

通常版†[edit]

Components · Bootstrap

以下のようにすることでradioボタン風のボタンを実現できる。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

↑

radioボタンのボタングループ化†[edit]

JavaScript · Bootstrap

bootstrap.jsと組み合わせる。

Copy
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

↑