Web制作

Bootstrapで良く使うけど忘れがちなCSSスタイルまとめ

Written by o-saka
Bootstrapで良く使うCSSスタイルまとめ

Bootstrapで良く使うけど忘れがちなCSSスタイルのまとめです。

画像レスポンシンブ

[html]
<img src="#" alt="" class="img-responsive">
[/html]

グリッドシステム

[html]
//スマートフォン(~767px)
<div class="col-xs-12">
//タブレット(768px〜991px)
<div class="col-sm-12">
//PC(992px〜1119px)
<div class="col-md-12">
//大画面PC(1200px~)
<div class="col-lg-12">
[/html]

リスト左寄せ

[html]
<ul class="list-inline">
<li>...</li>
</ul>
[/html]

テーブル

[html]
<table class="table>
...
</table>
[/html]

リンクボタン

[html]
<a class="btn btn-default" href="#">Default</a>
<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-success" href="#">Success</a>
<a class="btn btn-info" href="#">Info</a>
<a class="btn btn-warning" href="#">Warning</a>
<a class="btn btn-danger" href="#">Danger</a>
<a class="btn btn-link" href="#">Link</a>
[/html]

アイコン

[html]
<span class="glyphicon glyphicon-star"></span>
[/html]

アイコン一覧はこちら

 

この記事を書いた人

o-saka(@abiko41)

フリーランスでWEB作ったりロゴ作ったりしてます。
お仕事のご依頼等は下記フォームより承っております 。お気軽にお問い合わせください。

お問い合わせ