bootstrap

Bootstrap要素集まとめ③ | 画像、カルーセル、モーダル、参考サイト

Pocket
LINEで送る

画像

画像のレスポンシブ対応

imgタグに.img-fluidをclass指定することで、max-width:100%; height:auto;が反映されます。

Understrapでは投稿ページに配置した画像は何もしなくてもmax-width:100%; height:auto;になっています。

figure

画像にキャプションを付ける場合はfigure.figureおよびfigcaption.figure-captionを使います。

<figure class="figure">
  <img src="http://ponsyon.com/images/thumb_kids_illust.jpg" class="figure-img img-fluid" alt="">
  <figcaption class="figure-caption text-center">キャプション</figcaption>
</figure>
キャプション

左に寄りますね・・・。強引ですがfigurediv.text-centerで囲むことで中央寄せにしました。

<div class="text-center">
  <figure class="figure">
    <img src="http://ponsyon.com/images/thumb_kids_illust.jpg" class="figure-img img-fluid" alt="">
    <figcaption class="figure-caption">キャプション</figcaption>
  </figure>
</div>

キャプション

カルーセルスライダー

なんとBootstrapではslick.jsを使わなくてもカルーセルスライダーを実装できます。しかも複数種類&レスポンシブ対応!

一般的なカルーセルスライダー

下にインジケータの付いたカルーセルスライダー

テーマ(understrap)の影響なのか、このサイトでは見本の位置にインジケーターがこなかったため、CSSで微調整しています。

バリエーション:テキストが付いたり、フェード切り替えだったり

Bootstrap4でのカルーセルスライダーの種類や実装方法について詳しくは下記サイトを参照してください。

モーダルウインドウ

なんとモーダルウインドウも特別なjsを必要とすることなく簡単に実装できます。ここではシンプルなものを参考に置いておきます。


詳細は下記サイトをご確認ください。

参考になるサイト

Bootstrap – 世界で最も人気のあるフロントエンドのコンポーネントライブラリ

公式サイト! いつの間にか日本語ページもできていました。

Bootstrap4移行ガイド

公式サイトに準拠する圧倒的情報量(翻訳調じゃないので読みやすいのです)。

Bootstrap 4 Cheat Sheet

各要素をコードとプレビューを同時に確認できる。

Titan

無料HTML/CSSテンプレート。ページレイアウトからナビ周りのパーツレイアウトなど、美しいデザインのテンプレートが揃っている。
※いつの間にか有料になってました。

Pocket
LINEで送る

back to top