Tag: bootstrap Tag: javascript

a:1403 t:1 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




練習




メモ

img-responsiveの画像の中央揃え

center-block を追加指定すると中央揃えになる。




書籍

最新は4ですが、中古で3を購入しました。

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド