Bootstrapを使ったデザイン。最初にご紹介するのは「グリッドシステム」を使ったDesignです。

Bootstrapは、ご存じかも知れませんが以下の引用をごらん戴ければと思います。

Bootstrapは、ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。
タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されています。
GitHubで四番目に人気があり、アメリカ航空宇宙局やMSNBCなどに採用されている。
「特徴」
HTML5やCSS3では比較的サポートが不完全であるが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。
ウキペディア

Bootstrapのグリッドシステム

グリッドシステムを支える３つのClass

コンテナ（.container）
ロー（.row）
カラム（.col-*）

ブレイクポイントによる切り替え
Bootstrapを使ったサイト
Bootstrapアイコンサンプル
Bootstrap Table
- responsive Table hover
- 折り返し無しを確認する
画像の位置合わせ
- Floatユーティリティークラスを使用した配置例
  - スマホでの表示（例）
  - パソコンで表示幅を最小にした場合（Chrome）
BootstrapでFontAwesome Brands
Bootstrap5ブランドアイコン

ブレイクポイントによる切り替え

(max12Column)

　Bootstrap ５　

Bootstrapフレームワーク

主なアイコンフォントは Bootstrapのものです。(FontAwesomeではありません)

レスポンシブグリッドシステム

グリッド内のアイコンは、省略値サイズ、2rem、2,5remです。

レスポンシブグリッドシステム：ブラウザの表示幅を動かしてみるか、スマホ・タブレットなどで表示してみてください。

3カラムグリッド

※．テーブルではありません。

　自動折り返し

01 123456789･123456789･123456789･123456789･123456789･123456789･123456789･123456789･123456789･

３カラムグリッドは、以下の様に定義しています。
　　部分的なHTML

    <div class="col">01 <i class="bi bi-bootstrap-fill" style="color: #563d7c;"></i>123456789･123456789･123456789･123456789･123456789･123456789･123456789･123456789･123456789･</div>
    <div class="col">02 <i class="bi bi-bootstrap" style="font-size: 2rem;color: #563d7c;"></i></div>
    <div class="col">03 <i class="bi bi-alarm-fill" style="font-size: 2.5rem;color: #563d7c;"></i></div>

12カラムグリッド (max12Column)

　　自動折り返し

※．ブラウザ表示で横幅を縮小していくか、スマホの表示で12カラムグリッド表示が、テーブルとは異なる表示になることで、グリッド表示を確認戴けます。

01 123456789･123456789･123456789･123456789･

①Bootstrap5の２分割グリッド表示

2分割:　自動折り返し無し

以下の２分割表示グリッド~~は、折り返ししていない（特に指定していないが）為、コンテンツがグリッドからいずれも、はみ出しています。~~

col-sm-8は、col-smの8個分、col-sm-4は、col-smの4個分、つまり、

8+4で全部で12個分のColumnを（bootstrap.css）で、割り当てています。

col-sm-8 12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:

col-sm-4 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:

text-truncateクラスで長い文字列を省略記号表示指定

こちらは、Bootstrapのtext-truncateクラス指定で、グリッドからはみ出す部分は省略記号表示されています。

col-sm-8 12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:

col-sm-4 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:

①Bootstrap5の２分割グリッドのHTMLソースコード表示

以下が、実際のコンテンツ部分のHTMLコードです。
Classで定義しているものは、いずれも「bootstrap.min.css」のものです。
“container”,”row”,”col-sm-8″,”col-sm-4″,”text-truncate”,
この、”container“,”row“,”col*”が、グリッドシステムを支える3つのCSSクラスです。
　　HTML

  <p>2分割:　<i class="bi bi-check2-square" style="color: #ff563d;"></i> 自動折り返し無し</p>
  <div class="container">
    <div class="row">
    　<div class="col-sm-8">col-sm-8 12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:</div>
    　<div class="col-sm-4">col-sm-4 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
    </div>
  <p>text-truncateクラスで長い文字列を省略記号表示指定</p>
    <div class="row">
    　<div class="col-sm-8 text-truncate">col-sm-8 12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:12345678:</div>
    　<div class="col-sm-4 text-truncate">col-sm-4 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
    </div>
  </div>

②Bootstrap5の3分割グリッド表示

3分割:　自動折り返し無し

以下の３分割表示グリッドは、折り返ししていない為、
コンテンツがグリッドからいずれもはみ出しています。
また、１行(row)に収まらず、結果３分割目が２行目にはみ出してしまっています。

col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:

text-truncateクラス指定で長い文字列を省略記号表示
こちらは、Bootstrapのtext-truncateクラス指定で、
グリッドからはみ出す部分は省略記号表示されています。
更に、省略記号表示で1行(row)内に収まっています。

col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:

②Bootstrap5の3分割グリッドHTMLソースコード表示

Class＝”col-sm”も、「bootstrap.min.css」のものです。
　　HTML

  
  <p>Max3分割:自動折り返し無し	</p>
  <div class="container">
  　<div class="row">
  　　<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
  　　<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
  　　<div class="col-sm">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
  　</div>

  <p>text-truncateクラス指定で長い文字列を省略記号表示</p>
    <div class="row">
      <div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
      <div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
      <div class="col-sm text-truncate">col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:</div>
    </div>
  </div>

コンテンツ以外のHTMLソースコードを表示しておきます。

　　HTML

  <!doctype html>
  <html lang="ja">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
  <title></title>
  </head>
  
  <body class="body">
  <h1></h1>
  <h2></h2>
  <h3></h3>
  

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
  </html>

ネスト：第二階層

第一階層: col-sm-9

第二階層:col-8とcol-sm-6

第二階層:col-4とcol-sm-6

第一階層: col-sm-3

ネスト:不連続文字(自動折り返し)

123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789

ネスト:アイコン文字2.2em

ネスト:svg画像256

SVG画像：width=”256″ height=”256″では、場合によっては枠をはみ出してしまう。下の場合、＜div class=”col-sm-3″＞ではみ出し
さらに、ブラウザで表示枠を縮めていくと、＜div class=”col-8 col-sm-6″＞や＜div class=”col-4 col-sm-6″＞でも枠から図形部分がはみ出す。

Avtive クラス:<i class=”bi bi-activity”></i> css: content:”\F66B”;

Bootstrapを使ったサイト

Bootstrapを使った具体的なサイトはこちらからどうぞ！

タップで電話がすぐできるスマホ最適サイト制作横浜

来店型地域ビジネスに最適なホームページをご提供。スマホ最適サイトが選ばれる理由①分かりやすい②使いやすい③見やすい④利用者のベネフィットがある⑤利便性がある⑥利用者が見つけやすい⑦安心できる・安心して個人情報を入れられる。ライバルを表示しないGoogleマップ。タップでスグに電話できる、どこのページでもページのどこにい...

このサイトはConcrete CMS v８に内包されたBootstrap 3を使っています。
（尚、Concrete CMS v９からは、Bootstrap ５が内包されています。）

Bootstrapアイコンサンプル

v1.8.0：フリー、高品質、オープンソース、そして1500以上のアイコンを持つアイコンライブラリです。
SVG や SVG スプライト、Web フォントなど多様な方法で利用できます。
Bootstrapと合わせても、合わせなくても使えます。

Bootstrapアイコン　”activity“は、です。
.svg記述では、 <svg xmlns=”http://www.w3.org/2000/svg” width=”16″ height=”16″ fill=”currentColor” class=”bi bi-activity” viewBox=”0 0 16 16″><path fill-rule=”evenodd” d=”M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z”/></svg> です。
class記述では、 <class=”bi bi-activity”> </i> です。
cssでは、 content: “\F66B”; と記述しています。

以下、アイコンの一部ご紹介します。<div class=”row” style=”font-size: 2em;color: #7952b3;”>で

Bootstrap Table

responsive Table hover

Table-hoverクラスを使用して、マウスオーバー表示をしています。

	見出しセル1	見出しセル2	見出しセル3
v1	データ1セル	データ2セル	データ3セル
v2	データ1セル	データ2セル	データ3セル
v3	データ1セル	データ2セル	データ3セル

div class=”container”
div class=”table-responsive”
table class=”table table-hover table-dark”
th scope=”col” class=”text-nowrap“
td class=”text-nowrap“

※.text-nowrap クラスを設定する理由
　レスポンシブ対応テーブルがWebブラウザによって動作（振る舞い）が異なる為

Firefoxでは、text-nowrapは不要で（セル内のテキストは折り返され期待通りの動作になりますが）、他のブラウザでは、text-nowrapを指定してテキストの折り返しを禁止しないと期待した動作にならない為です。

折り返し無しを確認する

以下は折り返し無しを確認する為のresponsive Table です。

responsive dark table
0	見出し	見出し2	見出し3
1	1	2	3
2	123	１２３４５６	ー
3	abc	ａｂｃｄｅｆｇｈｉ	ABCDEFGHIJKLMNOPQRSTUVWXYZ

　表示幅が狭くなると、横スクロールバーが現れます。
スマホで見るか、パソコン表示でブラウザの幅を狭くすることで確認できます。
table-borderedクラスで縦の罫線を追加しています。
caption要素で、Tableの説明書きを追加しています。
(また、caption-topクラスを追加してテーブルの上部にキャプションを表示させています。)

画像の位置合わせ

Floatユーティリティークラスを使用した配置例

画像の間で文書表現する為には、範囲内に収まる文字数での記載が必要です。

画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。画像の間で文書表現をするために必要なこと。

左右のBootstrap画像は.svgで、 width=”200″ height=”200″で表示サイズを指定しています。

但し、レスポンシブ対応ですので、表示幅が狭くなると、画像の間の文書は、画像の外（下）にはみ出されて表示されます。　※　➡　注01

主なcodeは、以下の様な内容です。


  <div class="container">
    <div class="clearfix">
      <p>画像の間で文書表現をするために必要なこと。・・・・・</p>  
      <img src="/img/b1-200x200.svg" class="float-start" alt="左揃え画像">
      <img src="/img/b2-200x200.svg" class="float-end"   alt="右揃え画像">
      <p>画像の間で文書表現をするために必要なこと。・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・。</p>
    </div>
  </div>

<style>
  .clearfix::after {
    display: block;
    clear: both;
    content: "";
  }
  .float-start {
    float: left !important;
  }
  .float-end {
    float: right !important;
  }
  .float-none {
    float: none !important;
  }
</style>

　※ 注01

スマホでの表示（例）

パソコンで表示幅を最小にした場合（Chrome）

BootstrapでFontAwesome Brands

以下は、Bootstrap5のcontainer、row、col-1クラスで定義した”Font Awesom 5 Brands”アイコン（抜粋）です。UniCode:e*の部分は、v5.15.1より表示できます。

Fontawesom5アイコン

定義は、＜i class=”fab fa-＊”＞＜/i＞です。（＊は、大体アイコン名です。）

f08c

f0e1

f09b

f092

f082

f09a

f39e

f099

f081

e07b

f392

f167

f431

f19a

f411

f17a

f3ca

f457

f0d2

f231

f16d

e055

f179

f3c0

f266

f4e4

f3b8

f269

e007

e078

f282

f268

f836

f293

f294

f267

WordPressで、Bootstrap５始めました。

Bootstrapのグリッドシステム

ブレイクポイントによる切り替え

(max12Column)

Bootstrap ５

レスポンシブグリッドシステム

3カラムグリッド

12カラムグリッド (max12Column)

①Bootstrap5の２分割グリッド表示

①Bootstrap5の２分割グリッドのHTMLソースコード表示

②Bootstrap5の3分割グリッド表示

②Bootstrap5の3分割グリッドHTMLソースコード表示

コンテンツ以外のHTMLソースコードを表示しておきます。

ネスト：第二階層

ネスト:不連続文字(自動折り返し)

ネスト:アイコン文字2.2em

ネスト:svg画像256

Bootstrapを使ったサイト

Bootstrapアイコンサンプル

Bootstrap Table

responsive Table hover

折り返し無しを確認する

画像の位置合わせ

Floatユーティリティークラスを使用した配置例

スマホでの表示（例）

パソコンで表示幅を最小にした場合（Chrome）

BootstrapでFontAwesome Brands

Bootstrap5ブランドアイコン

コメント

Bootstrapのグリッドシステム

ブレイクポイントによる切り替え

(max12Column)

Bootstrap ５

レスポンシブ グリッドシステム

3カラム グリッド

12カラム グリッド (max12Column)

①Bootstrap5の２分割グリッド表示

①Bootstrap5の２分割グリッドのHTMLソースコード表示

②Bootstrap5の3分割グリッド表示

②Bootstrap5の3分割グリッドHTMLソースコード表示

コンテンツ以外のHTMLソースコードを表示しておきます。

ネスト：第二階層

ネスト:不連続文字(自動折り返し)

ネスト:アイコン文字2.2em

ネスト:svg画像256

Bootstrapを使ったサイト

Bootstrapアイコンサンプル

Bootstrap Table

responsive Table hover

折り返し無しを確認する

画像の位置合わせ

Floatユーティリティークラスを使用した配置例

スマホでの表示（例）

パソコンで表示幅を最小にした場合（Chrome）

BootstrapでFontAwesome Brands

Bootstrap5ブランドアイコン

コメント

　Bootstrap ５　

レスポンシブグリッドシステム

3カラムグリッド

12カラムグリッド (max12Column)