Bootstrap3

Tag: Bootstrap3

目次†

関連ページ†

参考情報†

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

変更点†

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

グリッド†

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

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

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

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

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件