JetTheme で Bootstrap を学んでみよう

2023年01月18日  2023年03月11日
JetTheme Bootstrap5

ブートストラップ（bootstrap）とは、もともとは「Twitter」に始まったようだ。



ウェブサイトやWebアプリケーションを作成するフロントエンド
Webアプリケーションフレームワークである。
タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素や
JavaScript用拡張などが、HTMLおよびCSSベースのデザインテンプレートとして
用意されている。



「Jettheme（V2.9）」には、「Bootstrap v5.1.3」が読み込まれている


<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' media='print' onload='if(media!=&quot;all&quot;)media=&quot;all&quot;' rel='stylesheet'/><noscript><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'/></noscript>

こちらは、英語版のページようなんですが、、、

Introduction

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

日本語版だと、若干ヴァージョンが違う、「bootstrap@5.0.2」のようです。

はじめに

はじめに

世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

getbootstrap.jp




モバイルとＰＣで表示する画像を変えてみよう




【Breakpoints (ブレイクポイント)】を理解しよう


デバイスやビューポートのサイズによって制御するために使用する。

※デフォルトのブレークポイントは、６種類

ブレークポイント




【表示ユーティリティ（Display property）】と組み合わせる


表示ユーティリティ

・非表示（要素自体を隠す）：d-none、d-sm-none

・ブロック表示：d-block、d-sm-block

を使用して制御する。




ＰＣ・タブレット（≧576px）に画像を表示してみよう


<div class="d-none d-sm-block">ＰＣ表示</div>
ＰＣ表示

<div class="d-none d-sm-block" style="clear: both;"><a href="https://…" style="display: block; padding: 1em 0; text-align: center; "><img loading="lazy" alt="" border="0" width="400" data-original-height="399" data-original-width="599" src="https://…"/></a></div>



モバイル（＜576px）にだけ画像を表示してみよう


<div class="d-block d-sm-none">モバイル表示</div>
モバイル表示


<div class="d-block d-sm-none" style="clear: both;"><a href="https://…" style="display: block; padding: 1em 0; text-align: center; "><img loading="lazy" alt="" border="0" width="400" data-original-height="399" data-original-width="599" src="https://…"/></a></div>

いつものように画像を挿入して、classを書き換えました。

さてさて、、上手くいってるでしょうか？！（笑）



これって、３段階表示もいけますねぇ。。2023.1.19 追記



ＰＣ（≧768px）に画像を表示してみよう


<div class="d-none d-sm-none d-md-block">ＰＣ表示</div>
ＰＣ表示



（＞768px）タブレット（≧576px）に画像を表示してみよう


<div class="d-none d-sm-block d-md-none">タブレット表示</div>
タブレット表示



モバイル（＜576px）に画像を表示してみよう


<div class="d-block d-sm-none d-md-none">モバイル表示</div>
モバイル表示


これは、なかなか、面白いですねぇ。。ぜひ、お試しあれ♪♪




コードの表示を折り返してみよう




【テキストユーティリティ（Text）】を使ってみる


・テキストの折り返し　テキストを .text-wrap クラスで囲む。


<div class="d-none d-sm-block" style="clear: both;"><a href="https://…" style="display: block; padding: 1em 0; text-align: center; "><img loading="lazy" alt="" border="0" width="400" data-original-height="399" data-original-width="599" src="https://…"/></a></div>
 
<div class="d-block d-sm-none" style="clear: both;"><a href="https://…" style="display: block; padding: 1em 0; text-align: center; "><img loading="lazy" alt="" border="0" width="400" data-original-height="399" data-original-width="599" src="https://…"/></a></div>
＜pre＞タブに追記、、＜pre class="text-wrap" style="width:100%"＞

すると、折り返し表示になった。。


どちらの方が見やすいでしょうか？全体が見えたほうがいい場合もあるかも。





追記


ディバイスが「パソコン」か「スマフォ」かって、どうやって判定するんだろう？

昔、「If」で判定していたよーな気がするっと、調べてはみたが、、

JavaScriptで「UserAgent」を判定する？が、「UserAgent廃止」とか出てくる。

そもそも、昨今のテンプレートは、対応されてて気にすることもないのかもしれない。

実は、バーナーを貼りたかったんですが、レスポンシブじゃなかったわけです。


コードの折り返し表示に関しても「CSS」でできるかと思って色々やったんですが、

上手く効かなかったんですわ。。どうも、４カ所ぐらい、

「text-nowrap（折り返さない）」が入ってて、ちょっと触れない感じ。


うむ、、「Bootstrap」を制すものは、「JetTheme」を制す？！（謎）



Next Post Previous Post