Example with nested nav

Item 1

全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。全角５００文字以内。

Item 2

Item 3

Item 4

リンク無し
Hoverで表示
Tooltips
Slider-Pro
クリックで画像を拡大
画像を縦横センター
画像を程よくfloat
カラム画像をスマホの時小さく
見出し
リスト
テキスト
テーブル
モーダル
タブ
アラート
オリジナルカラー
カード

カラムレイアウト

Tooltips

要Bootstrap4.5

Balloon（吹き出し）表示

「hover A」

hover A

見出し3

本文本文本文本文本文本文

見出し4

本文本文本文本文本文本文

「hover B」

hover B

見出し3

本文本文本文本文本文本文

見出し4

本文本文本文本文本文本文

MODALを使用したHOVERMENU

HOVERでmodal（小）表示

参考サイト

Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Detailed documentation and more examples you can find in our Bootstrap Modal Docs

クリックして画像を表示

画像を表示する

Slider-Pro

スライダー01

スライダー02

スライダー03

スライダー04

スライダー05

スライダー06

スライダー07

スライダー08

スライダー09

スライダー10

スライダー11

スライダー12

クリックで画像を拡大

要a-blog cms のJS

画像を縦横センター

divの高さを300px
画像の高さを200%に指定

divの高さを無指定
（デフォルトの280px CSSで指定）

divの高さを100pxに指定

画像を程よくfloat

キャプション

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

カラム画像をスマホの時小さく

スマホの時50%、デスクトップの時100%

スマホの時75%、デスクトップの時100%

見出し

H1

H2

H3

H4

H5

Heading-01Heading-01

Heading-01

Heading-02Heading-02

Heading-03Heading-03

Heading-04Heading-04

テキスト

リード文

カスタムフォームのチェックボックスやラジオボタンで複数の background-image を管理するための CSS を変更しました。以前は .custom-control-indicator 要素に背景色やグラデーション, SVG アイコンがありました。背景色のグラデーションを変更するたびに, すべてを置き換えなければなりませんでした。今後は塗りつぶすための .custom-control-label::before とアイコン用の .custom-control-label::after に分離しています。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

タブレット以上、デスクトップ以下で表示。それ以外では非表示

標準テーブル

Table=table table-striped
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

scroll-hint.js テーブル


【cssファイルととjsファイルを読み込む】
scroll-hint.css
scroll-hint.min.js

【Scriptを記述】
window.addEventListener('DOMContentLoaded', function(){
new ScrollHint('.js-scrollable');
});

【tableを「div class="js-scrollable"」で囲む】

	林	土屋	伊集院	■■■■	【氏名】面談･模擬面接（オンラインのみ）	【氏名】面談･模擬面接（オンラインのみ）	【氏名】面談･模擬面接（オンラインのみ）
08:00 ～ 08:30	〇
09:00 ～ 09:30	〇	〇	〇	〇	〇	〇	〇
10:00 ～ 10:30
12:00 ～ 12:30	〇	〇	〇	〇	〇	〇	〇
20:00 ～ 20:30	〇	〇	〇	〇	〇	〇	〇
	テスト8	テスト9
08:00 ～ 08:30
09:00 ～ 09:30	〇
10:00 ～ 10:30		〇
12:00 ～ 12:30	〇	〇
20:00 ～ 20:30	〇	〇

レスポンシブテーブル

Table=table Table-Common Table-Responsive / Caption=Caption-01 bg-Red-Dark
#	First
1	Mark
2	Jacob
3	Larry

レスポンシブテーブル

Class=Table-Common Table-Responsive（レスポンシブテーブル）
社名
代表者名
所在地

非レスポンシブテーブル

Table=table Table-Common / Caption=Caption-01
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

非レスポンシブテーブル1

Table=table table-borderless / Caption=Caption-01 bg-Green-Dark
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

非レスポンシブテーブル

列に装飾を付ける例
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

非レスポンシブテーブル

最左列だけ残してスクロールのテスト（作りかけ）
###############	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

非レスポンシブテーブル

Class=Table-Common（非レスポンシブテーブル）
社名
代表者名
所在地

Flexboxでレスポンシブテーブル

項目

地域

価格

評価

項目

商品1

地域

愛知

価格

1,000円

評価

〇

Flexboxの確認

商品2

岐阜

1,200円

◎

bg-Red-Dark text-white

MODAL小

MODAL大

タブ

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus maxime aut ea impedit voluptates aperiam dolor laborum officiis autem aspernatur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, alias, repudiandae sunt illo consequatur aperiam doloribus nesciunt ut deserunt ipsa est tempora nihil. Totam eveniet aperiam debitis fugit ipsa doloremque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio sequi dolorem suscipit assumenda molestiae voluptatem qui consequuntur magni? Deleniti, corporis.

Alert（Bootstrap標準）

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Alert（オリジナルカラー）

bg-Beige

bg-Black-Dark text-white / text-white-75 / text-white-50 / text-white-25 /

bg-Black-Light

bg-Blue-Dark text-white-50

bg-Blue-Light

bg-BlueGray

bg-Gray-Light text-black-100 / text-black-75 / text-black-50 / text-black-25

bg-Green-Dark text-white

bg-Green-Light

bg-Red-Dark text-white

bg-Red-Light

text-white / text-white-75 / text-white-50 / text-white-25 /

オリジナルカード

カード1

hoverで画像が拡大するパターン

詳細はこちら〉

カード2

「js-biggerlinkを指定していないので拡大しない」

詳細はこちら〉