トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Tag: Bootstrap3

目次

関連ページ

参考情報

変更点

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

グリッド

グリッドシステムの基本

グリッドを入れ子にする

  • 入れ子にするとき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

全般

.form-controlを適用するのは?

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

form-horizontal

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

  • 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

form-groupの幅を指定するには?

  • 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> 
    

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

ボタングループ

通常版

  • 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ボタンのボタングループ化

  • 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>
    
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-04-13 (水) 16:46:29 (855d)