CSSフレームワーク Bootstrap入門 （単行本）

Bootstrapは、どんなデバイスでも見やすく表示する「レスポンシブデザイン」を強力にサポートするWeb開発用CSSフレームワークです。本書は、Bootstrap 4.0をベースに、レスポンシブデザインおよびBootstrapの基本レイアウト機能「グリッドデザイン」によるWebデザインについて解説します。また、Bootstrapの豊富なオリジナルGUIコンポーネントやユーティリティの使い方、さらにはjQueryによるスクリプト制御の方法なども紹介します。

【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/5405.html

Chapter 1 Bootstrapの基礎知識
1-1 Bootstrapとは何か
モバイル時代のWebデザインとは？
Bootstrapとは？
1-2 Bootstrapの利用
Bootstrapの3つの利用方法
利用方法（1） Bootstrapをダウンロード
Bootstrapを利用する
利用方法（2） CDN
利用方法（3） npm
JavaScriptコンポーネントに必要な3つのライブラリ
（1）Bootstrap本体スクリプト
（2）jQueryについて
（3）Popper.jsについて
JavaScript利用時の基本コード
Sassについて
Sassファイルのコンパイル

Chapter 2 グリッドレイアウト
2-1 グリッドレイアウトの基本
グリッドレイアウトとは何か
グリッドレイアウトの基本タグ構成
グリッドレイアウトの基本コード
Webサイトの基本構成
サンプルを作成する
列数と画面サイズ
グリッドレイアウトを試す
複数の幅指定
2-2 グリッドレイアウトを更に使いこなす
可変コンテナについて
コンテナのネスト
自動調整とauto
余白列の利用
両端に配置するml/mr
コンテンツの位置揃え
no-guttersによる余白取り消し
並び順の変更

Chapter 3 コンテンツの基本デザイン
3-1 コンテンツの基本要素
見出しについて
コンテンツとコードの記述
テキストの装飾
リストの表示
定義リスト
テーブル
ヘッダーのデザイン設定
ストライプ・テーブル（table-striped）
マウスのホバーで選択するtable-hoverクラス
小さめのテーブル表示をするtable-smクラス
レスポンシブ・テーブル（table-responsive）
イメージの表示（img-fluidおよびimg-thumbnail）
3-2 スタイル・ユーティリティ
スタイル・ユーティリティとは？
色のクラスの基本
背景色の設定（bg）
テーブルのカラー指定（table）
ボーダーの指定
ボーダーの色指定
角を丸める（rounded）
インライン（d-inline）とブロック（d-block）
フロート表示（float）
フレックスによる整列（flex）
間隔の調整（marginとpadding）
サイズの調整（widthとheight）
テキストの位置揃え

Chapter 4 フォームの基本
4-1 フォームの利用
フォームのスタイルについて
Bootstrapのクラスを指定する
ラベルとヒント
form-controlクラスについて
チェックボックスとラジオボタン
コントロールのサイズ指定
ボタンサイズの指定
フォームを利用不可にする
4-2 フォームのレイアウト
グリッドレイアウトとフォーム
フォームのグリッド表示
form-rowによるrow設定
ボタンのブロック化
インライン表示について
コラム幅の指定
インプットグループ（input-group）について
4-3 カスタムフォーム
カスタムフォームとは？
カスタムコントロールを使う

Chapter 5 オリジナルGUIの利用
5-1 ボタンコンポーネント
プッシュボタンのスタイル
アウトラインボタン
リンクとボタン
アクティブと非アクティブ
ボタンの丸みを変える
トグルボタン
ボタングループ
チェックボックスのグループ表示
ラジオボタンのグループ化
ボタンの垂直表示
5-2 ドロップダウン、プログレスバー、バッジ
ドロップダウンメニュー
ドロップダウンメニューを作成する
メニュー項目について
スプリットボタン
プログレスバー
アニメーション表示
マルチバー表示
バッジについて
ピルバッジについて
5-3 リストグループ
リストグループとは？
ボタンやリンクをグループ化する
アクションの設定（list-group-item-action）
アクティブおよびディスエーブル
項目の色指定
コンテンツリストグループ
コンテンツの切り替え表示

Chapter 6 複雑なコンテンツの構築
6-1 フィギュアとカード
フィギュア（図表）
円形イメージ
カードについて
タイトルとリンク
イメージカード
カードヘッダーとカードフッター
カードのカラー化
ボーダーのカラー化
イメージオーバーレイ
カードグループ
カードデッキ
カードコラム
6-2 ジャンボトロン、スタティックポップオーバー、
メディアオブジェクト
ジャンボトロンとは？
DisplayとLead
角の丸みとcontainer
スタティックポップオーバー
メディアオブジェクト
カラーを指定する
'<ul>や<ol>によるリスト化
メディアオブジェクトの階層化
メディアの整列
6-3 カルーセル
カルーセルとは？
イメージをスライドショーする
操作用コントローラを追加する
インジケーターの表示
イメージにキャプションを付ける

Chapter 7 ナビゲーション
7-1 Navコンポーネント
Navコンポーネントとは？
垂直リスト
タブ表示について（nav-tabs）
ピル型ボタン（nav-pills）
幅いっぱいに表示する（nav-fill）
フレックスによる整列調整
7-2 NavBar
NavBarとは？
項目を折りたたむ
インラインフォーム
バーを固定する
エクスターナルコンテンツ
7-3 パンくずリストとページネーション
パンくずリストとは？
カラーと上下の固定表示
ページネーション
アクティブとディスエーブル
ページネーションのサイズ
位置揃えについて
7-4 スクロールスパイ
スクロールスパイとは？
スクロールスパイの適用条件
スクロールスパイを利用する
横にリストを配置する
階層ナビゲーションの利用

Chapter 8 アラートとモーダルダイアログ
8-1 アラートとモーダルの基本
アラートの表示
アラートコンテンツ用のクラス
アラートを閉じる
モーダルダイアログの表示
ダイアログの基本設計
プッシュボタンでダイアログを呼び出す
ダイアログを呼び出す
アラートをモーダル表示する
ポップオーバーをモーダル表示する
8-2 ツールチップ、ポップオーバー、コラプス
消えるインターフェイス
ツールチップを表示する
ボタンにツールチップを表示する
ポップオーバーを表示する
コラプスについて
複数コンテンツの表示
アコーディオン
アコーディオンを使ってみる

Chapter 9 スクリプトによる操作（1）
9-1 基本フォームのスクリプト利用
プッシュボタンの利用
BootstrapはjQueryが基本
ボタンカラーを操作する
コントロールをダイナミックに生成する
activeとdisabled
バリデーションについて
チェックボックスの選択状態（prop）
プログレスバーの操作
ツールチップの設定
9-2 ポップオーバー、アラート、モーダルダイアログ
ポップオーバー
フォーカスによる非表示
HTMLを利用したポップオーバーの表示
<div>タグをアラートにする
アラートを閉じる
アラートを生成する
モーダルダイアログの表示
ダイアログの入力値を利用する
完全なモーダルにするには？

Chapter 10 スクリプトによる操作（2）
10-1 独自GUIのスクリプト利用
カルーセル
手動で移動する
スライドイベントについて
コラプス
コラプスを生成する
ジャンボトロン
リストグループの項目追加
リストグループの項目の並び順操作
10-2 Navs、NavBar、スクロールスパイ
Navのタブ表示を切り替える
タブの切替イベント
NavBarの項目追加
NavBarでのコラプスの項目展開イベント
スクロールスパイの項目追加
スクロールのイベント

Appendix スタイルのカスタマイズについて
SCSSによるBootstrapクラスのカスタマイズ
style.scssからBootstrapをインポートする
Mixinを利用する
_border-radius.scssを変更する
独自Mixinを定義する
独自Mixin利用のクラスを定義する
独自クラス定義によるカスタマイズ
独自のボタンコンポーネントクラスを作る