bootstrap

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

Update:

画像

画像のレスポンシブ対応

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

このブログで使用しているWordPressの親テーマUnderstrapでは投稿ページに配置した画像は何もしなくてもmax-width:100%; height:auto;になっています。

figure

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

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

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

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

あるいはfigure自体に.d-blockと.text-centerを付加すると、

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

この方法でも中央寄せになりました。

カルーセルスライダー

なんとBootstrapではslick.jsを使わなくてもカルーセルスライダーを実装できます。しかも複数種類＆レスポンシブ対応！
特にアレンジを求められてないなら、Bootstrapのカルーセルスライダーでもいいかも。

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

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

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

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

First slide

Illustrator

美しいベクターアートとイラストレーションを作成

Second slide

XD

UI/UXのデザイン、プロトタイプ、共有

Third slide

Dreamweaver

Webサイトを短時間でコーディング

Fourth slide

Photoshop

画像補正から加工、Webデザインまで対応のプロフェッショナル画像編集ツール



前へ



次へ

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

Carousel
Carousel(カルーセル)は,画像やスライドをよこにスライドさせて複数表示させるコンポーネントです。カルーセルの使い方の例を示します。カルーセルの使い方の例を示します。

モーダルウインドウ

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


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

Modal
Modal(モーダル)では, JavaScript modal プラグインを使用して, ライトボックス, 通知, カスタムダイアログを作成できます。モーダルの使い方の例を示します。

参考になるサイト

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

はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

公式サイト！ いつの間にか日本語ページもできていました。
TOPページではBootstrap5推しですが、ver4のページも残されています。

Bootstrap 4 Cheat Sheet

https://hackerthemes.com/bootstrap-cheatsheet/

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

Titan

Titan - One page / Multi page HTML5 Bootstrap Multipurpose Template
Yes, It’s free. Seriously. Today, ThemeWagon has over 150 web templates that are free. How many of them have cutting-edge, modern design? Honestly, most of them have error-prone codes, old-fashioned design. After analyzing the web design trend of past five years, we have crafted Titan; with better UX, rigorous testing and embedded documentation for you …

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

関連記事: