GattsCOM

ブログ

BLOG

  1. Home
  2. Blog

Bootstrap、Font Awesomeの導入方法

こんにちわ!研修員の佐藤です。

僕が課題で使ったBootstrapとFont Awesomeの簡単な説明をします。

BootstrapはPC、タブレット、スマートフォンに対応したレスポンシブなサイトを作れ、スタイリッシュなページを作るのに便利なツールです。

Font Awesomeはいろいろな種類のアイコンを使うのに便利なツールです。

ではさっそく紹介していきます!

まずは準備で<head>~</head>の間に下記の「<link rel="~」から始まる二行を入れます。



● Bootstrap
 ・入力フォームの変え方

入力フォーム



← デフォルト入力フォーム


← Bootstrap入力フォーム
表示画面がこちら

Bootstrap、Font Awesomeの導入方法のイメージ

 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
アンカー 銀行 双眼鏡
自転車 バイク 自動車
表示画面がこちら

Bootstrap、Font Awesomeの導入方法のイメージ


 tableタグに 「class="table table-bordered" 」を追加してみます。

 デフォルトのテーブルは比較しやすいようbootstrapのテーブルと同じにするためwidthとheightを入れていますが、bootstrapは先程のグリッドシステムでその幅にあったテーブルのwidthを自動で設定してくれます。

 widthとheightを入れてやれば違いはパッとしませんがbootstrapにはデフォルトにはない機能が存在します!

 ・ストライプ
  tableタグに「class="table table-bordered table-striped"」を追加してやります。

■Bootstrapテーブル ストライプ
amazon android apple
アンカー 銀行 双眼鏡
自転車 バイク 自動車
表示画面がこちら

Bootstrap、Font Awesomeの導入方法のイメージ

  行毎に背景の色を自動で変えてくれて横を間違えず見ることが出来ます!

 ・ホバー
  tableタグに「class="table table-bordered table-hover"」を追加してやります。

■Bootstrapテーブル ホバー
amazon android apple
アンカー 銀行 双眼鏡
自転車 バイク 自動車
表示画面がこちら

Bootstrap、Font Awesomeの導入方法のイメージ

  カーソルをあわせた行のみ背景の色を自動で変えてくれます!


・ボタンの変え方
 buttonタグに 「class="btn"」 を追加します。後ろに「btn-primary」を追加してやることでボタンの色を青色に変えることができます。
 他の色の種類は

 青:btn-primary
 白:btn-default
 赤:btn-danger
 緑:btn-success
 水色:btn-info
 橙:btn-warning

 があります。

ボタン




ボタンの色


表示画面がこちら

Bootstrap、Font Awesomeの導入方法のイメージ

●Font Awesome

ここhttp://fontawesome.io/icons/)で使いたいアイコンをクリックして、

Bootstrap、Font Awesomeの導入方法のイメージ

赤い矢印の一行をコピーして自分のコードに張り付ければ完成です!

Font Awesomeのアイコン

amazon android apple
アンカー 銀行 双眼鏡
自転車 バイク 自動車
表示画面がこちら

Bootstrap、Font Awesomeの導入方法のイメージ

このようにいつものコードにちょっと手を加えるだけで見栄えが断然変わります!

これらを使ってより見やすいウェブページを作ってみてはいかがでしょうか?