Tag: bootstrap Tag: javascript
a:1861 t:2 y:0
bootstrap
基本的なclass
文字の色
text-* : *の部分は muted, primary, success, info, warning, danger
背景色
bg-*: *の部分は、primary, success, info, warning, danger
アラート
- 背景色と文字色の同系色で設定が行われる。
alert-* : *の部分は、 success, info, warning, danger
ラベル
label-* : *の部分は、default, primary, success, info, warning, danger
ボタン
btn-* : *の部分は、default, primary, success, info, warning, danger
例 <button type="button" class="btn btn-success">Success</button>
ボタンサイズ
btn-* : *の部分は、lg、 sm、 xsで大、小、極小。サイズを指定しないと普通。
ボタンのその他
btn-block でブロック指定。ブロックに合わせた幅広いボタンとなる。
disabledで押せない無効なボタンとして表示。
インラインテキスト要素
| <mark> | 重要なテキスト |
| <del> | 削除されたテキスト |
| <s> | 取り消されたテキスト |
| <ins> | 挿入されたテキスト |
| <u> | 下線 |
| <small> | 小さな文字 |
| <strong> | 強調文字(太字) |
| <em> | 強調(斜体など) |
テキストの配置
<p class="text-left">左寄せ</p>
| text-left | 左寄せ |
| text-center | 中央揃え |
| text-right | 右寄せ |
| text-justify | 両端揃え |
| text-nowrap | 改行禁止 |
クィックフロート (メッセージの左端、右端配置)
<div> <div class="pull-left">左端配置</div> <div class="pull-right">右端配置</div> </div>
上だと配置が下に寄る。次の様に、親要素でclearfix クラスを指定すると綺麗に配置される。（下に余白が入る)
<div class="clearfix"> <div class="pull-left">左端配置</div> <div class="pull-right">右端配置</div> </div>
リンク
とほほのBootstrap入門
Bootstrap 3 Tutorial
StartBootstrap
Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】
1日でマスターして作るBootstrap（ブートストラップ）ウェブサイト
Bootstrap 3.0入門 (全18回) - ドットインストール
グリッドシステム - Bootstrap3
- visible,hiddenなどによる表示の切り替えなども…
- http://bootstrap3-guide.com/base/grid.html
練習
メモ
img-responsiveの画像の中央揃え
center-block を追加指定すると中央揃えになる。
書籍
最新は4ですが、中古で3を購入しました。