Bootstrapとは - Bootstrapのチュートリアル

このレッスンでは Bootstrap の 公式サイトを見ながら その機能について簡単に ご紹介します。 今開いてるのが Bootstrap の公式サイトです。 ドメインは getbootstrap.com おそらく bootstrap.com は 先に取られてしまったのでしょう。 get がつきますので ご注意ください。 そして Bootstrap を始める時には この［Download］からスタートします。 現在このコースは最新版である バージョン 4.0.0 の beta.3 を使っています。 beta の最終段階ですけど 公式リリースの時には 仕様が少し変わっているかもしれません。 このサイトの中には Documentation、 Examples といったものがあるんですが この Examples、 例をちょっと見てみましょう。 Bootstrap の強力な機能として Grids のレイアウトというのがあります。 このようにグリッドでカラムが３つ、 あとこの行は全部 別々になっていると思うんですけど Bootstrap は基本的にレスポンシブの 設計になっています。 ですから今のところは全部 ５行とも同じように見えるんですけど 幅を狭くしてみると 一番下が１行ずつ３行の設定に変わりました。 さらに狭くすると、今度は その上も行の設定になり どんどん狭くしていくと 下から順に１行になります。 一番上は狭くしても相変わらず ３カラムのままといった感じになっています。 それからもう１つ例を見てみましょう。 ナビゲーションバーが 色々と用意されていまして この Navbars なんですけど 少しずつレイアウトが違いますね。 こちらもやはりレスポンシブです。 一番上は初めから ハンバーガーアイコンがでているんですけど これも狭くしていくと こちらハンバーガーアイコンがでてきました。 ということはクリックすると メニューが表示される。 さらに狭くすると また順々に この辺りまでハンバーガーアイコンで メニューを開け閉めするようになっています。 こちらもどんどん狭くしていくと １個だけ最後まで強情を張っている ナビゲーションバーがあるんですけど 他はハンバーガーアイコンに なってしまいました。 あとは Documentation ですね。 今は例はどういうふうなことができるという ようなことをお見せするだけなんですけど Documentation の方はその例とともに どんなコードを使うのか ということが示されています。 例えばレイアウトで ここに Grid とありますね。 今さっきご紹介した Grid なんですけど その Grid にはどんなものがあるかと そしてそれに対してどういうコードを書けば いいのかということが示されています。 ですから、このコードですね。 これをコピーして HTML ドキュメントにペーストすれば 上のような こういうカラムの 設定ができるということですね。 ですから実際に例を見ながら ドキュメントにコピーして そして自分でコードを書き換えてみて どうなるかということを試すことができます。 あともうちょっと見てみましょう。 Content の Table といったものがあります。 Table の中には まずごく基本的なテーブル、 それからカラーの設定ができたりとか あとはポインタを合わせると ハイライトする。 こういうコードも実際に 下に書いてありますから これをコピーして非常に短いコードですね。 そして実際に試してみるということが できるわけです。 このレッスンでは Bootstrap の 公式サイトを見ながら その機能について簡単に ご説明をしました。