Bootstrap、Font Awesomeの導入方法
こんにちわ!研修員の佐藤です。
僕が課題で使ったBootstrapとFont Awesomeの簡単な説明をします。
BootstrapはPC、タブレット、スマートフォンに対応したレスポンシブなサイトを作れ、スタイリッシュなページを作るのに便利なツールです。
Font Awesomeはいろいろな種類のアイコンを使うのに便利なツールです。
ではさっそく紹介していきます!
まずは準備で<head>~</head>の間に下記の「<link rel="~」から始まる二行を入れます。
● Bootstrap
・入力フォームの変え方
表示画面がこちら入力フォーム
← デフォルト入力フォーム
← Bootstrap入力フォーム
inputタグに「class="form-control"」を追加してみました。
コードの「<div class="container">」「<div class="row">」「<div class="col-xs-2">」はbootstrapのグリッドシステムというもので、同じページをスマホや大画面のPCで見た時にそれぞれの画面に対応したレイアウトにしてくれる便利な機能です。
「class="form-control"」を追加してやるだけだと、画面いっぱいに入力フォームが伸びてしまうので、今回は幅を指定してやるために使いました。
・テーブルの変え方
表示画面がこちらテーブル
■デフォルトテーブル
amazon android apple アンカー 銀行 双眼鏡 自転車 バイク 自動車
■Bootstrapテーブル
amazon android apple アンカー 銀行 双眼鏡 自転車 バイク 自動車
tableタグに 「class="table table-bordered" 」を追加してみます。
デフォルトのテーブルは比較しやすいようbootstrapのテーブルと同じにするためwidthとheightを入れていますが、bootstrapは先程のグリッドシステムでその幅にあったテーブルのwidthを自動で設定してくれます。
widthとheightを入れてやれば違いはパッとしませんがbootstrapにはデフォルトにはない機能が存在します!
・ストライプ
tableタグに「class="table table-bordered table-striped"」を追加してやります。
表示画面がこちら■Bootstrapテーブル ストライプ
amazon android apple アンカー 銀行 双眼鏡 自転車 バイク 自動車
行毎に背景の色を自動で変えてくれて横を間違えず見ることが出来ます!
・ホバー
tableタグに「class="table table-bordered table-hover"」を追加してやります。
表示画面がこちら■Bootstrapテーブル ホバー
amazon android apple アンカー 銀行 双眼鏡 自転車 バイク 自動車
カーソルをあわせた行のみ背景の色を自動で変えてくれます!
・ボタンの変え方
buttonタグに 「class="btn"」 を追加します。後ろに「btn-primary」を追加してやることでボタンの色を青色に変えることができます。
他の色の種類は
青:btn-primary
白:btn-default
赤:btn-danger
緑:btn-success
水色:btn-info
橙:btn-warning
があります。
表示画面がこちらボタン
ボタンの色
●Font Awesome
ここ(http://fontawesome.io/icons/)で使いたいアイコンをクリックして、
赤い矢印の一行をコピーして自分のコードに張り付ければ完成です!
表示画面がこちらFont Awesomeのアイコン
amazon android apple アンカー 銀行 双眼鏡 自転車 バイク 自動車
このようにいつものコードにちょっと手を加えるだけで見栄えが断然変わります!
これらを使ってより見やすいウェブページを作ってみてはいかがでしょうか?