[み]キレイなボタンをカンタンに作成できる「Twitter Bootstrap Button Generator」

Twitter Bootstrapってすごいですね。
ちょっとしかさわってませんが、カンタンにサイトをつくれちゃいます。
そこで、今回はTwitter Bootstrapをベースにしたボタンをカンタンに作成できるオンラインジェネレータを紹介します。

Twitter Bootstrap Button Generator

Twitter Bootstrap Button Generatorっていう名前が、そのまんますぎますね。
それで、Twitter Bootstrap自体カンタンにあつかえる代物でしたが、このジェネレーターはさらにカンタンにあつかうことができます。
ボタンをつくるだけなら、htmlとかCSSとかぜんぜん知らなくてもできちゃいます。

左側でいろいろ選ぶと、右側にリアルタイムでボタンとコードが生成されます。
こんなカンジです。

ただ、ポチポチ選ぶだけでボタンをつくれます。

ボタンをサイトに実装する方法

こちらもカンタンで、やることは次の2つです。

  • Bootstrapを読み込む
  • 生成されたコードをはりつける

では、いちおうBootstrapを読み込む方法ですが、
<head>内にこんなコード書けば大丈夫です。

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

これは、ルート直下にCSSフォルダがあって、そこにBootstrapのCSSファイルを入れてた場合です。
で、生成されたボタンのコードは、そのまんまはりつけるだけなんで問題ないと思いますが、念のため。
さっき画像で紹介したボタンのコードです。

<a href="#" class="btn btn-info"><i class="icon-white icon-thumbs-up"></i> これいいね</a>

これで、終わりです。

あ、まだでした。
アイコンを付けたボタンを表示するには、アイコンの画像ファイルもサーバーにあげないとダメです。
一番カンタンなのは、ルート直下にimgフォルダをつくって、そこにいれるとOKです。
おしまい。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup