Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみる その2

公開日: : 未分類 , , , , , ,

Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみるのコーナーです。

Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみる という記事で、Bootstrapってなんなの?ってことや、Bootstrapの始め方を勉強しました。

今回は、その2と題して、もう一歩先をまとめたいと思います。

 

ボタンスタイル

Bootstrapってなんなの?状態の初心者がBootstrapについて勉強してみる という記事で、

要するに、解釈したことを自分の言葉で書くと、

読み込んで使えば、それなりにきれいなWEBデザインで出来上がるよ

ってことなのでしょう。

とまとめました。

ってことは、角丸なボタンとかも簡単にできちゃうってことなんでしょうか?

答えはもちろんYESです。

角丸のボタンを作るって簡単そうな響きですが、いざやってみようとすると面倒なんですよね?


#button{
  width:200px;
  height:80px;
  font-size:40px;
  color:white;
  line-height:80px;
  text-align:center;
  background:red;
  border:solid 2px black;
  border-radius:15px;
}

引用:CSSのみで角丸のボタンを作成する方法

こんなに書かなければ行けなかったりします。

今はネットを探せば、こころやささしい人が掲載してくれているので、拝借すればいいのですが、これを一から自分で考えるとなるとくたびれちゃいますよね。

しかも、文字列の長さによって、widthを変えてほしいと言われたりするとそれだけでCSSがカオスになったりしちゃいますよね。

 

それ、Bootstrapでできるよ

そこで便りになるのが、Bootstrapです。

どうやら、いくつかおまじないをclass指定するだけでできちゃうそうです。

a要素、button要素のclassに対して「”btn btn-***”」(***はプロパティ名)を追加すると、ボタンのスタイルの指定ができます。

引用:HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (2/4) – @IT

やっべ、マジ簡単w

このおまじないもスタイル用に7種類、サイズ用に3種類あるようなので、これらを組み合わせることで、21種類のボタンができるということですね。

さすが、Bootstrap。

ここで、それずれの指定をまとめてみます。

ボタンのスタイル - Bootstrap

種類プロパティ名概要
スタイルbtn-default白地に黒文字のボタンを表示します
btn-primary青地に白文字のボタンを表示します
btn-success緑地に白文字のボタンを表示します
btn-info水色地に白文字のボタンを表示します
btn-warningオレンジ色地に白文字のボタンを表示します
btn-danger赤色地に白文字のボタンを表示します
btn-link白地に青文字のボタンを表示します
サイズbtn-lg大きいボタンを表示します
btn-sm小さいボタンを表示します
btn-xsより小さいボタンを表示します

先ほども書いた通り、スタイルとサイズは同居できるので、

<button type="button" class="btn btn-danger btn-large">Default</button>

って書き方でOKです。

 

やっべ、超絶簡単じゃん。

 

 

ad

関連記事

【ユークリッドラボ株式会社】Specteeの新バージョンをリリース

皆さんこんにちは。 スマートフォン向けのロケーションベース・リアルタ...

記事を読む

LPICレベル1合格を目指して その12

LPICレベル1の合格を目指して勉強をするコーナーです。その12になり...

記事を読む

LPICレベル1合格を目指して その15

LPICレベル1合格を目指して勉強をするコーナーです。今日はその15回...

記事を読む

no image

auの発表会を通過。来週はドコモの2014夏モデル発表会。

今日、auの2014年夏モデル発表会がありましたね。 ざーっと、...

記事を読む

ad

Message

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

PAGE TOP ↑