2020/4/6
まずは公式サイトのサンプルを移植した。今後勉強してく。
当サイトのWeb会議のデモはBootstrapをベースにしているので、
今後、Bootstrapで画面を制作してくことにしようかと思う。

Bootstrap公式サイトのサンプル

Bootstrap を始めるのに役立つ, 使い方のベストプラクティスを示した最新のコンポーネントおよびテンプレートです。

Album screenshot
Album

フォトギャラリーやポートフォリオに利用できるシンプルなワンページテンプレートです。

Pricing screenshot
Pricing

カスタムしたヘッダーとフッター, および Cards で作られた価格ページのサンプルです。

Checkout screenshot
Checkout

Form とそのバリデーションの特徴を知ることができるチェックアウトページです。

Product screenshot
Product

幅の広いグリッドと画像を利用した, プロダクトにフォーカスした商品ページです。

Cover screenshot
Cover

シンプルで美しいホームページのワンページテンプレートです。

Carousel screenshot
Carousel

navbar と carousel をカスタマイズし,さらにいくつかのコンポーネントを追加しています。

Blog screenshot
Blog

ヘッダ, ナビゲーション, コンテンツを含む雑誌のようなブログテンプレートです。

Dashboard screenshot
Dashboard

サイドバーとナビゲーションバーが固定された, 管理ツール向けダッシュボードのサンプルです。

Sign-in screenshot
Sign-in

シンプルなサインインフォームのレイアウト・デザインの例です。

Sticky footer screenshot
Sticky footer

コンテンツが短い場合でも, フッターを viewport の下側に配置する例です。

Sticky footer navbar screenshot
Sticky footer navbar

navbar を画面上に固定しつつ, フッターを viewport の下側に配置する例です。

Framework

Bootstrap が提供するコンポーネントの実装例です。

Starter template screenshot
Starter template

基本となる, コンパイルされた CSS と JavaScript です。

Grid screenshot
Grid

グリッドクラスやネストなど, グリッドレイアウトの実装例です。

Jumbotron screenshot
Jumbotron

navbar と基本的なグリッドカラムを用いた Jumbotron です。

Navbars

デフォルトの navbar コンポーネントがどのように動き,配置され,拡張されるかを示します。

Navbars screenshot
Navbars

navbar の全てのレスポンシブ設定およびコンテナ設定のデモンストレーションです。

Navbar static screenshot
Navbar static

ページ上に static に配置される, カスタマイズした navbar の例です。

Navbar fixed screenshot
Navbar fixed

画面の上に固定される, カスタマイズした navbar の例です。

Navbar bottom screenshot
Navbar bottom

画面の下に固定される, カスタマイズした navbar の例です。

Experiments

将来に対応した特徴や手法のサンプルです。

Floating labels screenshot
Floating labels

入力欄に floating labels を用いた, 美しくシンプルなフォームです。

Offcanvas screenshot
Offcanvas

画面幅に応じて, navbar がスライドする offcanvas メニューに変化する例です。