Bootstrapで使いそうなものをまとめてみた

(Bootstrapをダウンロードして使いたい人はこちら)

今回はBootstrap　正直Railsを触るまで知らなかった存在ですけど
普通のhtmlにも使えるとのことでダウンロードしないCDNというバージョンで初心者にも優しい感じで
自分があとで見直しても使えるようなものをまとめてみたいと思います
味噌はhtmlのみでCSSをなるべく使わないようにしようってこと
特にSassが使えないと記述が長くなっちゃうのでそれを防止する効果が期待される

更にBootstrapはレスポンシブデザインに対応していて勝手にスマホの画面の大きさなどに対応できるということ！！

これめっちゃ大事じゃないですか？
スマホ画面でレイアウトが崩れるのを確実にとは言い切れませんが対応してくれる
例えば横に長いヘッダーのリストがドロップダウンメニューになってくれる！
正直プロゲートでレスポンシブデザイン少し触りましたがCSSが苦手なのでこれはものすごい助かる！


今回使用するBootstrapCDNページ

今回はCDN版を使うので左のGetStartedを選択
そして少しスクロールしたテストテンプレートをそのままhtmlとしてコピーしてブラウザで表示してみましょう！

これを表示

え？？？って言いたくなるほどただのハローワールド......

しかしこれをチートシートを見ながらいじっていく

チートシートのコピーを改変したりして変化を見るのもします

まずはよく使うボタンを作っていく

(わかりやすいように並べてますけど使いたいのをプレビューで見て使いましょう)

コードはこんな感じ

実際の表示　classの「info」などが大事なポイントでクラス＝””内にinfoなど文字で色を指定して変えることができる

navバーもサンプルだと

白が基調のものが

少しカラーのクラスをいじって(ちょっと長いので見えるところだけ)

こんな感じに装飾できる

説明文付きのリストカードを作れたり

アイコン用の画像の切り抜きだってできる

<img class="rounded" 

src="/images/pathToYourImage.png" alt="Rounded image">

<img class="rounded-circle" 
src="/images/pathToYourImage.png" alt="Circle image">







文字列のバックグラウンドカラーの色指定までできるし
<div class="bg-primary text-white">Nullam id dolor 
　　　　　　　　id nibh ultricies vehicula ut id elit.</div>







ページの移動用のものを作れたり







もちろん万能ではないにしろ使えるとCSSまでいじることなくclassをいじるだけでできてしまう



CSSの加工が面倒だっていう人にはかなり使えるものだと思う

ボタンの形をCSSで加工するよりbootstrapで形を変えたりすることも可能で非常に便利

個人的にはテーブルがお気に入り



チートシートを見るのにも大して時間はかからないぜひみて使ってみてほしい