「Bootstrap.cssのForms」のサンプル
「Bootstrap.cssのクラス名のサンプル:和訳」の「Forms」のサンプルページです。
- input、select、textareaのクラスには「form-control」を指定。
基本
各インプットタグたちのクラスに「form-control」を指定。
実際のソース
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
インライン表示
formタグのクラスに「form-inline」指定
実際のソース
<form class="form-inline"> <div class="form-group"> <label for="exampleInputEmail1">Email</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Pass</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
ラベル非表示
非表示にしたいlabelタグのクラスに「sr-only」指定
実際のソース
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail1">Email</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword1">Pass</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
ラベルとinputを横並び
formタグのクラスに「form-horizontal」指定して、各ラベル・inputたちにグリッドのクラス指定(「.col-sm-xx」ってヤツ)。ラベルには「.control-label」も指定する。
グリッドのクラス指定(「.col-sm-xx」ってヤツ)を使うときは親を「.row」にするんだけど「.form-horizontal」があるので「.row」は不要。
各ラベルに「.control-label」を指定することによってラベルを右揃えにして、inputの天地中央に配置してくれる。
実際のソース
<form class="form-horizontal"> <div class="form-group"> <label for="exampleInputEmail1" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="form-group"> <label for="exampleInputPassword1" class="col-sm-2 control-label">Pass</label> <div class="col-sm-10"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </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"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
チェックボックス、ラジオボタンの無効
無効にした箇所のマウスを重ねるとマウスカーソルが禁止を表すカーソルに変わる
無効にしたいチェックボックス、ラジオボタンの属性に「disabled」を指定して、親要素のクラスに「disabled」を指定。
実際のソース
<div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> Option two is disabled </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> <div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div>
チェックボックス、ラジオボタンのインライン表示
ラベルタグに「.xxx-inline」を指定。
実際のソース
<form> <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1">1</label> <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2">2</label> <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3">3</label> </form> <form> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">1</label> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">2</label> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">3</label> </form>
値の固定表示
例えば、IDはすでに持っていて、パスワードだけ入力させたいとき等。
「.form-control-static」を使う。※「type=hidden」の指定が無いので必要に応じて追加する。
実際のソース
<form> <div class="form-group"> <label>Email</label> <p class="form-control-static">email@example.com</p> </div> <div class="form-group"> <label for="inputPassword">Password</label> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </form>
すべて入力不可
fieldsetにdisabled属性追加。
実際のソース
<form> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">Disabled input</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"> </div> <div class="form-group"> <label for="disabledSelect">Disabled select menu</label> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </fieldset> </form>
input、selectのサイズ
大きいサイズ「.input-lg」、小さいサイズは「.input-sm」
実際のソース
<form> <div class="form-group"> <input class="form-control input-lg" type="text" placeholder=".input-lg"> </div> <div class="form-group"> <input class="form-control" type="text" placeholder="Default input"> </div> <div class="form-group"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> </div> </form> <form> <div class="form-group"> <select class="form-control input-lg"> <option>.input-lg</option> <option>○○○</option> </select> </div> <div class="form-group"> <select class="form-control"> <option>Default input</option> <option>○○○</option> </select> </div> <div class="form-group"> <select class="form-control input-sm"> <option>.input-sm</option> <option>○○○</option> </select> </div> </form>
labelも含めてinputのサイズ
「.form-horizontal」限定っぽい? 未調査。
実際のソース
<form class="form-horizontal"> <div class="form-group form-group-lg"> <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> <div class="col-sm-10"> <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"> </div> </div> <div class="form-group form-group-sm"> <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> <div class="col-sm-10"> <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"> </div> </div> </form>
inputの幅
「.row」の中で「.col-xs-○」を追加して、その中にinputタグを入れる。
実際のソース
<form> <div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div> </form>