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を購入しました。