WordPressで、Bootstrap5始めました。

Bootstrap5デザイン
Bootstrap 5

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

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

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

ウキペディア

Bootstrapのグリッドシステム

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

  • コンテナ(.container)
  • ロー(.row)
  • カラム(.col-*)
スポンサーリンク

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

(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”;

スポンサーリンク

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;”>で

コメント

タイトルとURLをコピーしました