「Bootstrap ComponentsのInput groups」のサンプル

「BootstrapのComponentsのサンプル：和訳」の「Input groups」のサンプルページです。

基本

テキストフィールドの横に文字を足すようなヤツ。

「.input-group」で囲む。
足したい文字のクラスを「input-group-addon」にする

実際のソース


<form data-example-id="simple-input-groups">
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  </div>
  
  <br>
  
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2">@example.com</span>
  </div>
  
  <br>
  
  <div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-addon">.00</span>
  </div>
  
  <br>
  
  <label for="basic-url">Your vanity URL</label>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
  </div>
</form>

サイズ変更

「input-group」を「input-group input-group-○○」にする。
大・小と指定なしの3種。

実際のソース


<form data-example-id="input-group-sizing">
  <div class="input-group input-group-lg">
    <span class="input-group-addon" id="sizing-addon1">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
  </div>
  
  <br>
  
  <div class="input-group">
    <span class="input-group-addon" id="sizing-addon2">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
  </div>
  
  <br>
  
  <div class="input-group input-group-sm">
    <span class="input-group-addon" id="sizing-addon3">@</span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
  </div>
</form>

チェックボックス・ラジオボタンとの組合せ

利用シーンが思いつかないので未調査

実際のソース


<form data-example-id="input-group-with-checkbox-radio">
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </span>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
  </div>
  
  <br />
  
  <div class="input-group">
    <span class="input-group-addon">
      <input type="radio" aria-label="Radio button for following text input">
    </span>
    <input type="text" class="form-control" aria-label="Text input with radio button">
  </div>
</form>

ボタンとの組合せ

「input-group-addon」としていたトコを「input-group-btn」としてボタンをいれる。

実際のソース


<form data-example-id="input-group-with-button">
  <div class="input-group">
     <span class="input-group-btn">
       <button class="btn btn-default" type="button">Go!</button>
     </span>
     <input type="text" class="form-control" placeholder="Search for...">
  </div>
  
  <br />
  
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for...">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
    </span>
  </div>
</form>

ドロップダウンとの組合せ

bottostrapのJSが必要。
ココはセレクトタグを使うのが正しいんじゃないのか？

テキストフィールドがあって、ドロップダウンから別のページへ遷移させるっていう利用シーンが思いつかないので未調査

実際のソース


<form data-example-id="input-group-dropdowns">
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
  </div>
  
  <br />
  
  <div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with dropdown button">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</form>

ドロップダウンとの組合せ：区切り線あり

bottostrapのJSが必要。
「ドロップダウンとの組合せ」同様、利用シーンが思いつかないので未調査
※「ドロップダウンとの組合せ」との違いは「Action」と「」の間に区切り線があるか無いか。

実際のソース


<form data-example-id="input-group-segmented-buttons">
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default">Action</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
  </div>
  
  <br />
  
  <div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default">Action</button>
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</form>

複数のボタンとの組合せ

追加したいボタンたちを「.input-group-btn」で囲む。

実際のソース


<form data-example-id="input-group-multiple-buttons">
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default" aria-label="Bold"><span class="glyphicon glyphicon-bold"></span></button>
      <button type="button" class="btn btn-default" aria-label="Italic"><span class="glyphicon glyphicon-italic"></span></button>
    </div>
    <input type="text" class="form-control" aria-label="Text input with multiple buttons">
  </div>
  
  <br />
  
  <div class="input-group">
    <input type="text" class="form-control" aria-label="Text input with multiple buttons">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default" aria-label="Help"><span class="glyphicon glyphicon-question-sign"></span></button>
      <button type="button" class="btn btn-default">Action</button>
    </div>
  </div>
</form>

基本

サイズ変更

チェックボックス・ラジオボタンとの組合せ

ボタンとの組合せ

ドロップダウンとの組合せ

ドロップダウンとの組合せ：区切り線あり

複数のボタンとの組合せ

関連ページ