Bootstrapを使ったデザイン。最初にご紹介するのは「グリッドシステム」を使ったDesignです。
Bootstrapは、ご存じかも知れませんが以下の引用をごらん戴ければと思います。
Bootstrapは、ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークです。
ウキペディア
タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして用意されています。
GitHubで四番目に人気があり、アメリカ航空宇宙局やMSNBCなどに採用されている。
「特徴」
HTML5やCSS3では比較的サポートが不完全であるが、主要なWebブラウザとの互換性がある。WebサイトやWebアプリケーションの基本情報がすべてのデバイスやブラウザで利用できるよう、部分的な互換性という概念を用いている。たとえば、角丸、グラデーション、ボックスシャドウなどのCSS3で導入された機能は古いWebブラウザでサポートされていないが、Bootstrapで使用される。
Bootstrapのグリッドシステム
グリッドシステムを支える３つのClass
- コンテナ（.container）
- ロー（.row）
- カラム（.col-*）
ブレイクポイントによる切り替え
(max12Column)
Bootstrap ５
Bootstrapフレームワーク
主なアイコンフォントは Bootstrapのものです。(FontAwesomeではありません)
レスポンシブ グリッドシステム
グリッド内のアイコンは、省略値サイズ、2rem、2,5remです。
レスポンシブ グリッドシステム：ブラウザの表示幅を動かしてみるか、スマホ・タブレットなどで表示してみてください。
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カラムグリッド表示が、テーブルとは異なる表示になることで、グリッド表示を確認戴けます。
①Bootstrap5の２分割グリッド表示
2分割: 自動折り返し無し
以下の２分割表示グリッドは、折り返ししていない（特に指定していないが）為、コンテンツがグリッドからいずれも、はみ出しています。
col-sm-8は、col-smの8個分、col-sm-4は、col-smの4個分、つまり、
8+4で全部で12個分のColumnを（bootstrap.css）で、割り当てています。
text-truncateクラスで長い文字列を省略記号表示指定
こちらは、Bootstrapのtext-truncateクラス指定で、グリッドからはみ出す部分は省略記号表示 されています。
①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)に収まらず、結果３分割目が２行目にはみ出してしまっています。
text-truncateクラス指定で長い文字列を省略記号表示
こちらは、Bootstrapのtext-truncateクラス指定で、
グリッドからはみ出す部分は省略記号表示 されています。
更に、省略記号表示で1行(row)内に収まっています。
②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>
ネスト：第二階層
ネスト:不連続文字(自動折り返し)
ネスト:アイコン文字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 ５が内包されています。）
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;”>で
コメント