Bootstrapの勉強

左カラム

本文の該当項目へ移動

#01 Bootstrapとは何か？
#02 開発の準備を整えよう
#03 Gridシステムを使ってみよう
#04 レスポンシブWebデザインを使おう
#05 tableのスタイリングをしよう
#06 formのスタイリングをしよう (1)
#07 formのスタイリングをしよう (2)
#08 Glyphiconsとボタンを使ってみよう
#09 dropdownメニューを使おう
#10 breadcrumb､pagination､pagerを使おう
#11 Navbarを使ってみよう
#12 Navbarをスマホ対応にしよう
#13 label､badge､alert､panel
#14 progress-barを使ってみよう
#15 Modalウィンドウを使ってみよう
#16 Tabメニューを使ってみよう
#17 tooltip､popoverを使おう
#18 カルーセルを使ってみよう

#01 Bootstrapとは何か？

*概要
- CSSフレームワーク

*公式サイト
- http://getbootstrap.com/

*知識
- HTML/CSS
- JavaScript/jQuery

*ツール
- テキストエディタ
- ブラウザ(Chrome)

#02 開発の準備を整えよう

Bootstrapのダウンロード

Getting Started > Download Bootstrap

zip展開　フォルダ構成・フォルダ名の確認

ひな形ファイル「Basic template」をコピペし.htmlファイル作成　フォルダ内トップに置く

ひな形を修正 lang="ja" リンク対応

#03 Gridシステムを使ってみよう

グリッドシステムで2カラム・3カラムが容易に設定できる。

グリッドは12分割なので、各カラムの合計が12になるように設定する。

<div class="row">
<div class="col-sm-3">left</div>
<div class="col-sm-6">center</div>
<div class="col-sm-3">right</div>
</div>

class="contatiner" を指定すると中央揃えにしてくれる。

#04 レスポンシブWebデザインを使おう

カラム分割をレスポンシブに対応させる方法

公式サイト CSS > Grid > Grid options

画面サイズごとにクラス分け　クラスごとにグリッドの合計12

.col-xs-　＜768px
.col-sm-　768px≦
.col-md-　992px≦
.col-lg-　1200px≦

非表示にしたい場合はクラス指定 hidden-** で可能

逆に表示したい場合はクラス指定 visible-** で可能

<div class="row">
<div class="col-sm-3 hidden-xs">left</div>
<div class="col-sm-6 col-xs-7">center</div>
<div class="col-sm-3 col-xs-5">right</div>
</div>

#05 tableのスタイリングをしよう

tableにクラス指定で簡単に装飾できます。

.table　行間に枠線をつける
.table-striped　偶数行の背景色変更
.table-bordered　全てに枠線をつける
.table-hover　マウスオーバーで背景色変更
.table-condensed　やや小さめになる

trにクラス指定で簡単に装飾できます。

.warning　行を強調表示(背景色)する

ID	Score
@satou	200
@suzuki	180
@tanaka	210
@watanabe	150

<table class="table table-striped table-bordered table-hover table-condensed">
 <thead>
  <tr><th>ID</th><th>Score</th></tr>
 </thead>
 <tbody>
  <tr><td>@satou</td><td>200</td></tr>
  <tr><td>@suzuki</td><td>180</td></tr>
  <tr><td>@tanaka</td><td>210</td></tr>
  <tr class="warning"><td>@watanabe</td><td>150</td></tr>
 </tbody>
</table>

#06 formのスタイリングをしよう (1)

クラス指定で簡単に装飾できます。

.form-group
.control-label
.form-control
.btn
.btn-primary
.help-block
.has-error

<form>
 <div class="form-group has-error">
  <label class="control-label" for="email">Email</label>
  <input type="text" id="email" class="form-control" placeholder"email">
  <span class="help-block">Error!</span>
 </div>
 <div class="form-group">
  <input type="submit" value="submit" class="btn btn-primary">
 </div>
</form>

#07 formのスタイリングをしよう (2)

クラス指定で簡単に装飾できます。

.form-inline　横並び
.sr-only　音声のみで画面上には表示しない

<form class="form-inline" style="margin-bottom:15px;">
 <div class="form-group">
  <label class="sr-only control-label" for="email">Email</label>
  <input type="text" id="email" class="form-control" placeholder"email">
 </div>
 <div class="form-group">
  <input type="submit" value="submit" class="btn btn-primary">
 </div>
</form>

.form-horizontal　縦並び
.col-**-*
.col-**-offset-*

<form class="form-horizontal" style="margin-bottom:15px;">
 <div class="form-group">
  <label class="control-label col-sm-2" for="name">Name</label>
  <div class="col-sm-4">
   <input type="text" id="name" class="form-control" placeholder"name">
  </div>
 </div>
 <div class="form-group">
  <label class="control-label col-sm-2" for="email">Email</label>
  <div class="col-sm-4">
   <input type="text" id="email" class="form-control" placeholder"email">
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-4">
   <input type="submit" value="submit" class="btn btn-primary">
  </div>
 </div>
</form>

#08 Glyphiconsとボタンを使ってみよう

Glyphicons

アイコンとボタンを簡単に装飾できます

アイコン　Components > Glyphicons

<i>タグにクラス指定 .glyphicon

使用したいアイコンのクラスを指定

camera

<p><i class="glyphicon glyphicon-camera"></i>camera</p>

Buttons

ボタン　CSS > Buttons

<button>タグにクラス指定 .btn

使用したいボタンのクラスを指定

<button class="btn btn-primary">Push</button>

ボタンを横並びにまとめるクラス指定 .btn-group

<div class="btn-group">
<button class="btn btn-primary">Push</button>
<button class="btn btn-success">Push</button>
<button class="btn btn-info">Push</button>
</div>

#09 dropdownメニューを使おう

ドロップダウンメニューを簡単に装飾できます

.dropdown-toggle
data-toggle="dropdown"
span .caret
ul .dropdown-menu
li .divider

<div class="btn-group">
 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
 <ul class="dropdown-menu">
  <li><a href="">Action</a></li>
  <li><a href="">Action</a></li>
  <li class="divider"></li>
  <li><a href="">Action</a></li>
 </ul>
</div>

ボタンとキャレットの分離

<div class="btn-group">
 <button class="btn btn-primary">Action</button>
 <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a href="">Action</a></li>
   <li><a href="">Action</a></li>
   <li class="divider"></li>
   <li><a href="">Action</a></li>
  </ul>
</div>

#10 breadcrumb､pagination､pagerを使おう

breadcrumb

パンくずリストの設置・装飾

ul .breadcrumb
li .active

<ul class="breadcrumb">
 <li><a href="">HOME</a></li>
 <li><a href="">Users</a></li>
 <li class="active">@suzuki</li>
</ul>

pagination

ページングの設置・装飾

ul .pagination
li .disabled
li .active

<ul class="pagination">
 <li class="disabled"><a href="">&laquo;</a></li>
 <li class="active"><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li><a href="">3</a></li>
 <li><a href="">&raquo;</a></li>
</ul>

pager

ページャーの設置・装飾

ul .pager
li .previous
li .next

<ul class="pager">
 <li class="previous"><a href="">前へ</a></li>
 <li class="next"><a href="">次へ</a></li>
</ul>

#11 Navbarを使ってみよう

ナビゲーションバーの設置・装飾

nav .navbar
nav .navbar-default
div .navbar-header
a .navbar-brand
ul .navbar-nav
ul .navbar-right
nav nav .navbar-inverse
nav navbar-fixed-top

<nav class="navbar navbar-default">
 <div class="navbar-header">
  <a href="" class="navbar-brand">HOME</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="">Link1</a></li>
  <li><a href="">Link2</a></li>
 </ul>
 <ul class="nav navbar-nav navbar-right">
  <li><a href="">Link3</a></li>
 </ul>
</nav>

#12 Navbarをスマホ対応にしよう

ナビゲーションバーの設置・装飾

#13 label､badge､alert､panelを使おう

label

ラベルを貼ります

span .label
.label-primary

Product A NEW!

<p>Product A <span class="label label-primary">NEW!</span></p>

badge

バッジを貼ります

span .badge

Inbox 5

Inbox

<p>Inbox <span class="badge">5</span></p>
<p>Inbox <span class="badge"></span></p>

alert

アラートを設定します

div .alert .alert-info
button .close data-dismiss="alert"

重要なお知らせ

<div class="alert alert-info">
 <button class="close" data-dismiss="alert">&times;</button>
 重要なお知らせ
</div>

panel

パネルを設定します

div .panel .panel-primary
div .panel-heading
div .panel-body

#14 progress-barを使ってみよう

プログレスバーの設定・装飾

div .progress
div .progress-bar .progress-bar-primary
style="width:**%"

<div class="progress">
<div class="progress-bar progress-bar-primary" style="width:60%"></div>
</div>

div .progress-striped active
div .prrogress-bar-info

<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>

progress-bar-info
progress-bar-primary
progress-bar-warning

<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width:40%"></div>
<div class="progress-bar progress-bar-primary" style="width:30%"></div>
<div class="progress-bar progress-bar-warning" style="width:20%"></div>
</div>

#15 Modalウィンドウを使ってみよう

モーダルウィンドウの設定・装飾

a data-toggle="modal" href="#"
div .modal .fade id="#"
div .modal-dialog
div .modal-content
div .modal-header
div .modal-title
div .modal-body
div .modal-footer

Show me

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Show me</a>
<div class="modal fade" id="myModal">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">My Modal</h4>
   </div>
   <div class="modal-body">
    説明です
   </div>
   <div class="modal-footer">
    <button class="btn btn-primary">OK</button>
  </div>
 </div>
</div>

#16 Tabメニューを使ってみよう

タブメニューの設定・装飾

ul .nav .nav-tabs
a href="#" data-toggle="tab"
div .tab-content
div .tab-pane id="#"

Home
about

ほーむの内容

あばうとの内容

<ul class="nav nav-tabs" style="margin-bottom:15px;">
 <li class="active"><a href="#home_tab" data-toggle="tab">Home</a></li>
 <li><a href="#about_tab" data-toggle="tab">about</a></li>
 </ul>
<div class="tab-content">
 <div class="tab-pane active" id="home_tab">ほーむの内容</div>
 <div class="tab-pane" id="about_tab">あばうとの内容</div>
</div>

#17 tooltip､popoverを使おう

tooltip

ツールチップの設定

a href="#" data-tobble="tooltip"
a title=""

ツールチップ

<p><a href="#" data-tobble="tooltip" title="説明">ツールチップ</a></p>

JavaScript/jQueryを使用します

<script>
 $(function(){
  $("[data-toggle=tooltip]").tooltip({
   placement: 'bottom'
 });
</script>

popover

ポップオーバーの設定

a href="#" data-toggle="popover"
a title="" data-content=""

ポップオーバー

<p><a href="#" data-toggle="popover" title="説明" data-content="さらに説明">ポップオーバー</a></p>

JavaScript/jQueryを使用します

<script>
 $(function(){
  $("[data-toggle=popover]").popover();
 });
</script>

#18 カルーセルを使ってみよう

カルーセルの設定

Webアクセシビリティ的には好ましくない

JavaScript > Carousel サンプルコードのコピペ

imgフォルダの作成と画像の用意

サンプルコードの修正

Indicators
Wrapper for slides

コードを画像分複製または削除

各画像に情報を対応させる

右カラム

ドットインストールへのリンク