Bootstrap3
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
&tag(Bootstrap3);
*目次 [#e6cbfae5]
#contents
*関連ページ [#n8bc65da]
*参考情報 [#c7e6ea87]
-[[Bootstrap3でさくっとWebサイトを作ってみよう | Designup...
*変更点 [#xc50e8d7]
-レスポンシブルを無効にしづらくなった。
*グリッド [#ia3fca41]
**グリッドシステムの基本 [#o38095dc]
-[[Twitter Bootstrapのcontainer、row、col(span)の正しい使...
-全体をセンタリングするためにcontainerを使う。
-rowはネガティブマージンを持ち始点をずらすもの。
-その中にcolが12個まで格納できる。
**グリッドを入れ子にする [#e4c1a648]
-入れ子にするときrowで囲む。その中は12から始まる。
#pre{{
<div class="container">
<div class="col-xs-6" style="background-color: #999...
<div class="col-xs-6" style="background-color: #bbb...
<div class="col-xs-8" style="background-color: #999...
<div class="col-xs-4" style="background-color: #bbb...
<div class="col-xs-8" style="background-color: #999...
<div class="row">
<div class="col-xs-6" style="background-color: #777;">...
<div class="col-xs-6" style="background-color: ...
</div>
</div>
<div class="col-xs-4" style="background-color: #bbb...
</div>
}}
-ネストサせたい場合、rowとcolをまとめて指定しないといけな...
*Form [#scdf2c1f]
**全般 [#c56a2e62]
***.form-controlを適用するのは？ [#ka1469e5]
-[[CSS · Bootstrap:http://getbootstrap.com/css/]]に...
-checkboxやradiobuttonに適用すると変になる。
**form-horizontal [#pb165a9e]
***ラベルとコントロールを同一行に配置する場合 [#t80ecd70]
-1行ごとにfrom-groupのdivで囲み、その中をcolで区切る。
-control-labelを指定するとラベルは右寄せになる。
-チェックボックスは外側をcheckboxのclass指定をしたdivで囲...
#pre{{
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 cont...
<div class="col-sm-10">
<input type="email" class="form-control" ...
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Rememb...
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="col-sm-2 control-...
<div class="col-sm-10">
<div class="checkbox">
<label><input id="confirm" type="chec...
</div>
</div>
</div>
</form>
}}
**form-inline [#z4708579]
***form-groupの幅を指定するには？ [#bb9ea656]
-[[jquery - input width in form-inline bootstrap 3 - Stac...
#pre{{
<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-co...
</div>
</div>
<div class="col-xs-6 col-md-1">
<input type="button" class="btn ...
</div>
</form>
</div>
</div>
}}
うまくいかない場合、 ですきまをかえるしかないかも。
**ボタングループ [#wfb1e87e]
***通常版 [#i7b8b906]
-[[Components · Bootstrap:http://getbootstrap.com/co...
-以下のようにすることでradioボタン風のボタンを実現できる。
#pre{{
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</but...
<button type="button" class="btn btn-default">Middle</b...
<button type="button" class="btn btn-default">Right</bu...
</div>
}}
***radioボタンのボタングループ化 [#af73c024]
-[[JavaScript · Bootstrap:http://getbootstrap.com/ja...
-bootstrap.jsと組み合わせる。
#pre{{
Copy
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Ch...
</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>
}}
終了行:
&tag(Bootstrap3);
*目次 [#e6cbfae5]
#contents
*関連ページ [#n8bc65da]
*参考情報 [#c7e6ea87]
-[[Bootstrap3でさくっとWebサイトを作ってみよう | Designup...
*変更点 [#xc50e8d7]
-レスポンシブルを無効にしづらくなった。
*グリッド [#ia3fca41]
**グリッドシステムの基本 [#o38095dc]
-[[Twitter Bootstrapのcontainer、row、col(span)の正しい使...
-全体をセンタリングするためにcontainerを使う。
-rowはネガティブマージンを持ち始点をずらすもの。
-その中にcolが12個まで格納できる。
**グリッドを入れ子にする [#e4c1a648]
-入れ子にするときrowで囲む。その中は12から始まる。
#pre{{
<div class="container">
<div class="col-xs-6" style="background-color: #999...
<div class="col-xs-6" style="background-color: #bbb...
<div class="col-xs-8" style="background-color: #999...
<div class="col-xs-4" style="background-color: #bbb...
<div class="col-xs-8" style="background-color: #999...
<div class="row">
<div class="col-xs-6" style="background-color: #777;">...
<div class="col-xs-6" style="background-color: ...
</div>
</div>
<div class="col-xs-4" style="background-color: #bbb...
</div>
}}
-ネストサせたい場合、rowとcolをまとめて指定しないといけな...
*Form [#scdf2c1f]
**全般 [#c56a2e62]
***.form-controlを適用するのは？ [#ka1469e5]
-[[CSS · Bootstrap:http://getbootstrap.com/css/]]に...
-checkboxやradiobuttonに適用すると変になる。
**form-horizontal [#pb165a9e]
***ラベルとコントロールを同一行に配置する場合 [#t80ecd70]
-1行ごとにfrom-groupのdivで囲み、その中をcolで区切る。
-control-labelを指定するとラベルは右寄せになる。
-チェックボックスは外側をcheckboxのclass指定をしたdivで囲...
#pre{{
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 cont...
<div class="col-sm-10">
<input type="email" class="form-control" ...
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Rememb...
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="col-sm-2 control-...
<div class="col-sm-10">
<div class="checkbox">
<label><input id="confirm" type="chec...
</div>
</div>
</div>
</form>
}}
**form-inline [#z4708579]
***form-groupの幅を指定するには？ [#bb9ea656]
-[[jquery - input width in form-inline bootstrap 3 - Stac...
#pre{{
<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-co...
</div>
</div>
<div class="col-xs-6 col-md-1">
<input type="button" class="btn ...
</div>
</form>
</div>
</div>
}}
うまくいかない場合、 ですきまをかえるしかないかも。
**ボタングループ [#wfb1e87e]
***通常版 [#i7b8b906]
-[[Components · Bootstrap:http://getbootstrap.com/co...
-以下のようにすることでradioボタン風のボタンを実現できる。
#pre{{
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</but...
<button type="button" class="btn btn-default">Middle</b...
<button type="button" class="btn btn-default">Right</bu...
</div>
}}
***radioボタンのボタングループ化 [#af73c024]
-[[JavaScript · Bootstrap:http://getbootstrap.com/ja...
-bootstrap.jsと組み合わせる。
#pre{{
Copy
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Ch...
</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>
}}
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
