T.Takahashi bootstrapで文字を格好よくする 2017-06-23T02:36:24Z
０；ゼロからはじめる！

【最終更新日：2017/06/23】 bootstrap

bootstrapで文字を格好よくする


文字色を変更する

文字色の変更例一覧
ふつうに表示
text-muted
text-primary
text-success
text-info
text-warning
text-danger
?
ソース表示
1
2
3
4
5
6
7
8
<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
?
ソース表示
1
2
3
4
5
6
7
8
<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>

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

文字の右寄せ、中央寄せ、左寄せ例一覧
左寄せ
中央
右寄せ
?
ソース表示
1
2
3
4
<p class="text-left bg-primary">左寄せ</p>
<p class="text-center bg-success">中央</p>
<p class="text-right bg-danger">右寄せ</p>

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

アラート例一覧
?
ソース表示
1
2
3
4
5
<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
?
ソース表示
1
2
3
4
5
6
7
<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>

関連記事


スポンサーリンク

0 件のコメント :

コメントを投稿