bootstrap

bootstrapで文字を格好よくする

文字色を変更する

文字色の変更例一覧

ふつうに表示
text-muted
text-primary
text-success
text-info
text-warning
text-danger

  <span>ふつうに表示</span>
  <span class="text-muted">text-muted</span>
  <span class="text-primary">text-primary</span>
  <span class="text-success">text-success</span>
  <span class="text-info">text-info</span>
  <span class="text-warning">text-warning</span>
  <span class="text-danger">text-danger</span>

文字の背景色を変更する

文字背景色の変更例一覧

ふつうに表示
text-muted
text-primary
text-success
text-info
text-warning
text-danger

  <span>ふつうに表示</span>
  <span class="bg-muted">bg-muted</span>
  <span class="bg-primary">bg-primary</span>
  <span class="bg-success">bg-success</span>
  <span class="bg-info">bg-info</span>
  <span class="bg-warning">bg-warning</span>
  <span class="bg-danger">bg-danger</span>

文字の右寄せ、中央寄せ、左寄せする

文字の右寄せ、中央寄せ、左寄せ例一覧

左寄せ

中央

右寄せ

  <p class="text-left bg-primary">左寄せ</p>
  <p class="text-center bg-success">中央</p>
  <p class="text-right bg-danger">右寄せ</p>

アラート、メッセージを表示させる

アラート例一覧

alert-success

alert-info

alert-warning

alert-danger

  <div class="alert alert-success" role="alert">alert-success</div>
  <div class="alert alert-info" role="alert">alert-info</div>
  <div class="alert alert-warning" role="alert">alert-warning</div>
  <div class="alert alert-danger" role="alert">alert-danger</div>

ラベルを表示させる

ラベル例一覧

Default Primary Success Info Warning Danger

  <span class="label label-default">Default</span>
  <span class="label label-primary">Primary</span>
  <span class="label label-success">Success</span>
  <span class="label label-info">Info</span>
  <span class="label label-warning">Warning</span>
  <span class="label label-danger">Danger</span>

関連記事

スポンサーリンク

スポンサーリンク