サイト移転しました → GLOSSY

  • 最終更新日:
  • 投稿者: @signpostme

Bootstrap 2.3.2 コピーして貼るだけの個人的な便利コードまとめ

最近Twitter社が提供しているCSSフレームワーク「Bootstrap」を多用しているのですが、サンプルコードを公式サイトから確認するのが面倒になったのでこの記事にまとめることにしました。個人向けですが、良かったらご利用ください。

スクリーンショット 2013-08-16 20.39.22個人的によく使用するコードを掲載

アイコンやボタンの装飾など、個人的に Bootstarpを利用するときに使っているコードをコピペで使えるようにこの記事にまとめることにしました。公式サイトからコピーすれば早いのですが、それすらも面倒だと感じてしまった自分はだらしないです…。

 

しかし、Bootstrapを知らないという方も本体をダンロードして以下のコードをコピペすれば使えるようになるので挑戦してみては!

 

 

 

Bootstrap 本体のダウンロード

Bootstarp 2.3.2 公式サイト

 

 

 

Bootstarp 本体の読み込みコード

<link href="css/bootstrap.min.css" rel="stylesheet" />

 

 

 

 ボタンの装飾パターン

ボタン1

 
<p class="btn"><a href="#">ボタン1</a></p>
 
 

ボタン2

 
<p class="btn btn-inverse"><a href="#">ボタン2</a></p>
 
 

ボタン3

 
<p class="btn btn-primary"><a href="#">ボタン3</a></p>

 

 

大きなボタン

 
<p class="btn btn-large"><a href="#">大きなボタン</a></p>

 

 

btn-small … 小さなボタン

 

btn-mini … ミニサイズボタン

 

disabled … 押せないボタン

 

 

 

アイコンのパターン・設定


 
<i class="icon-home"></i>
 
 

 
<i class="icon-search"></i>
 
 

 
<i class="icon-time"></i>
 
 

 
<i class="icon-tag"></i>
 
 

 
<i class="icon-remove-sign"></i>
 
 

 
<i class="icon-arrow-down"></i>
 
 

 
<i class="icon-folder-open"></i>
 
 
icon-white … アイコンの色を白色に
 
 
 

随時更新予定

気が向いたら更新していきます。
 

新着記事を見る

TOP