WordPressで、Bootstrap5始めました。

Bootstrap5 css :デザイン
Bootstrap 5
記事内に広告が含まれています。

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

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

Thank you for reading this post, don't forget to subscribe!

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

ウキペディア

Bootstrapのグリッドシステム

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

  • コンテナ(.container)
  • ロー(.row)
  • カラム(.col-*)
PR広告

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

(max12Column)

Bootstrap

 Bootstrap 5 

Bootstrapフレームワーク

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

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

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

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

3カラム グリッド

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

  自動折り返し

01 123456789・123456789・123456789・123456789・123456789・123456789・123456789・123456789・123456789・
02
03

3カラムグリッドは、以下の様に定義しています。
  部分的な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・
02
03
04
05
06
07
08
09
10
11
12

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

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

以下の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:
Bootstrap

①Bootstrap5の2分割グリッドの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分割:  自動折り返し無し

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

col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:
col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:
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:
col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:
col-sm 1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:1234:
Bootstrap

②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>
Bootstrap

コンテンツ以外の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
123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
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”;

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

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

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

PR広告

Bootstrapを使ったサイト

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

このサイトConcrete CMS vに内包されたBootstrap 3を使っています。
(尚、Concrete CMS vからは、Bootstrap 5が内包されています。)

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 123456
3 abc abcdefghi 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

スマホでの表示(例)

bootstrap
Bootstrap Design

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

パソコン表示例(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

Bootstrap5ブランドアイコン

以下は、Bootstrap5でのブランドアイコンです。ブランドではFontAwesom5より数が少なく見えますが、他のアイコンではFontAwesom5と比べ別の種類のアイコンが数多くあります。
アイコンのバージョンは、@1.8.0 + @1.10.5です。(1.8.0だけだと表示されないものがあります。)
Bootstrap5アイコン
定義は、<i class=”bi bi-*”></i>です。(*は、大体アイコン名です。)

f472

F3ED

F344

F5EF

F6CC

F300

F62B

F669

F65E

F65D

F757

F663

F437

F65B

F660

F8CC

F74A

F74C

F7D6

F7D5

F7D4

F1A6

F1A8

F682

F7D7

コメント