新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 学習に必要なファイルを揃える (03:01) 無料公開中
- Twitter Bootstrapの紹介
- 学習に必要な知識＆ツール
- Twitter Bootstrapのダウンロード
- ひな形ファイルの作成
-
#02 Twitter Bootstrapを読み込もう (02:19) 無料公開中
- ダウンロードファイルの説明
- CSSの読み込み
- JavaScriptの読み込み
- jQueryの読み込み
-
#03 グリッドシステムを理解しよう (03:00) 無料公開中
- グリッドシステムの解説
- 段組レイアウトの作成
- ヘッダー、フッター領域の作成
-
#04 段組を入れ子にする (01:35) 無料公開中
- 段組の入れ子化
- 動作確認
-
#05 流動的なレイアウトを試す (01:13) 無料公開中
- fluid-layoutの設定
- 動作確認
-
#06 レスポンシブデザインを試す (02:31)
- レスポンシブデザインの解説
- レスポンシブデザインCSSの導入
- 動作確認
-
#07 テーブルのスタイリングをする (02:45)
- tableクラスの利用
- table-stripedクラスの利用
- table-borderedクラスの利用
- table-condensedクラスの利用
-
#08 フォームのスタイリングをする (1) (01:34)
- フォームの作成
- スタイリングの確認
-
#09 フォームのスタイリングをする (2) (02:41)
- form-horizontalクラスの利用
- 動作確認
-
#10 フォームのスタイリングをする (3) (01:57)
- フォームの横幅の指定
- エラーメッセージのスタイリング
-
#11 ボタンのスタイリングをする (02:15)
- btnクラスの利用
- ボタンの種類について
- ボタンの大きさについて
-
#12 アイコン付きボタンを作る (01:02)
- アイコンの付け方
-
#13 ボタングループを作る (01:08)
- ボタンのグループ化
- 動作確認
-
#14 ドロップダウン付きのボタンを作る (02:19)
- ドロップダウンの指定
- ドロップダウンメニューの作成
-
#15 タブメニューを作る (03:00)
- タブメニュー領域の作成
- タブメニューの作成
- タブの中身を作成
- タブのレイアウトを変更
-
#16 アラートメッセージを表示する (02:04)
- アラートメッセージの作成
- アラートメッセージの種類の説明
- アラートメッセージの消し方
-
#17 ミニラベルを表示する (01:07)
- ミニラベルの作成方法
- ミニラベルの種類について
-
#18 プログレスバーを表示する (02:05)
- プログレスバーの作成
- プログレスバーの種類について
- プログレスバーのアニメーションについて
-
#19 パンくずナビゲーションを表示する (01:27)
- パンくずナビゲーションの作り方
-
#20 ページナビゲーションを表示する (01:44)
- ページナビゲーションの作り方
-
#21 基本的なナビゲーションバーを作る (03:01)
- ナビゲーションバーの作り方
-
#22 ナビゲーションバーに検索を追加する (01:36)
- 検索メニューの作り方
-
#23 ドロップダウンメニューを作る (02:53)
- ドロップダウンメニューの作り方
-
#24 モーダルウィンドウを作る (1) (02:40)
- モーダル起動用のボタンを作成
- モーダルウィンドウの基本を作る
-
#25 モーダルウィンドウを作る (2) (01:28)
- モーダルウィンドウの消し方
-
#26 ツールチップを表示させる (02:18)
- ツールチップのマークアップ
- ツールチップの表示
-
#27 ポップオーバーを表示させる (01:17)
- ポップオーバーのマークアップ
- ポップオーバーの表示
-
#28 入力時に候補を表示する (02:10)
- typeaheadの実装
- 動作確認
