カテゴリー: bootstrap4

P136

rowやcolあっても大丈夫

<div class="container bg-info">
<div class="row justify-content-center">
	<div class="col-11 d-flex justify-content-center align-items-stretch flex-wrap">
	  <div class="item bg-warning m-2 p-3">吉田</div>
	  <div class="item bg-warning m-2 p-3">高橋</div>
	  <div class="item bg-warning m-2 p-3">佐藤佐藤佐藤佐藤佐藤佐藤佐藤佐藤佐藤佐藤佐藤</div>
	<div class="item bg-warning m-2 p-3">吉田</div>
	<div class="item bg-warning m-2 p-3">高橋</div>
	<div class="item bg-warning m-2 p-3">佐藤</div>
	<div class="item bg-warning m-2 p-3">吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田吉田</div>
	<div class="item bg-warning m-2 p-3">高橋</div>
	<div class="item bg-warning m-2 p-3">佐藤</div>
	</div>
</div>	
</div>	

https://qumeru.com/magazine/238

D/webコンテンツツール/parallax/

ダウンロードしたら、BootstrapにおいてJSなどの読み込みをしているscript属性の一番下にこのファイルを追記しておきます。

<script src="各々のパス/parallax.js-1.5.0/parallax.min.js"></script>

Bootstrapを使用する時点でjQueryは読み込んでいると思うので、改めて記述する必要はありません。もし読み込んでいない場合はjQueryも読み込んでおきます。

パララックスのプラグインとjQueryをDLする

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="各々のパス/to/parallax.min.js"></script>

new-chance/building/

paginationにタブを連動させて　自社ページの建築実例写真集のコンテンツを作成。

※本来タブの機能なので、開きたいコンテンツの下方にタブ+ページネーションを設置しちゃうと、下方のコンテンツ付近が表示されてみきれてしまう。タブなので、見せたいコンテンツの上に設置することが本来の使い方。下に設置した場合はアンカー使っても上部へは移管できないので設置には注意。上に置く以外はこの方法はとらない方が良い。

ＰＳ　結局　建築実例写真集はこの方法は不採用にした。ページネーションをクリックしたらサムネイルの上のあたりにアンカーが行くようにとのことになったので普通のページネーションにアンカー付けた方法に変更した。

全体をtab-content でラッピング

p294    p245

<div class=”tab-content “>

<div class=”tab-pane fade show active” id=”page1“>
<div class=”col-lg-10 offset-lg-1″>
<div class=”row “>

<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page2/IMG_0015.JPG” data-lightbox=”group1″><img src=”../image/building/page2/IMG_0015s.JPG” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>

<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page2/IMG_0081.JPG” data-lightbox=”group1″><img src=”../image/building/page2/IMG_0081s.JPG” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>

※　classにnav を付けないとリンクが通らないので追加する。
　　data-toggle=”tab”　も必要

<div class=”col-12 text-center pn my-5″>
<ul class=”nav  pagination pagination-sm justify-content-center”>
<li class=”page-item active“><a href=”#page1” class=”page-link” data-toggle=”tab”>1</a></li>
<li class=”page-item”><a href=”#page2″ class=”page-link” data-toggle=”tab”>2</a></li>
<li class=”page-item”><a href=”#page3″ class=”page-link” data-toggle=”tab”>3</a></li>
<li class=”page-item”><a href=”#page4″ class=”page-link” data-
</ul>
</div>

</div>

</div>

</div>

<div class=”tab-pane fade ” id=”page2“>

<div class=”col-lg-10 offset-lg-1″>
<div class=”row”>

<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page1/IMG_0001.JPG” data-lightbox=”group1″><img src=”../image/building/page1/IMG_0001s.jpg” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>

<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page1/IMG_0078.JPG” data-lightbox=”group1″><img src=”../image/building/page1/IMG_0078s.JPG” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>

<div class=”col-lg-3 col-md-4 col-6 mb-4 imgBox”>
<a href=”../image/building/page1/IMG_0110.JPG” data-lightbox=”group1″><img src=”../image/building/page1/IMG_0110s.JPG” class=”img-fluid mx-auto d-block ” alt=””/></a>
</div>

<div class=”col-12 text-center pn my-5″>
<ul class=”nav  pagination pagination-sm justify-content-center”>
<li class=”page-item”><a href=”#page1” class=”page-link” data-toggle=”tab”>1</a></li>
<li class=”page-item active“><a href=”#page2” class=”page-link” data-toggle=”tab”>2</a></li>

</ul>
</div>

</div>

</div>

</div>

</div>

https://www.saaria.info/archives/2095

モーダルウィンドウの標準仕様ではヘッダーのタイトルが左寄せ、フッターのボタンが右寄せになっています。flexで配置されていますので、単純にtext-alignで指定しても思った通りになりません。

まずはタイトルですが、justify-contentがspace-betweenになっているので、class=”modal-header”の要素直下に<p></p>を追加し、要素を3つにすることで2番目のタイトルを中央寄せにします。

その上で、下記CSSを追記して右端の閉じるボタンを調整します。

.modal-header .close{
  padding: 0;
  margin: 0;
}

次はボタンです。こちらは単純に中央配置指定するだけなので、下記CSSを追記します。

.modal-footer{
  justify-content : center;
}

https://cccabinet.jpn.org/bootstrap4/components/carousel

https://homupedia.com/bootstrap4-carousel.html

中尾清月堂　清月ページ　seigetsu/

スマホ用の画像と大きい画像の表示非表示方法

<div class=”col-lg-10 col-12 order-2 order-lg-1″>

<img src=”../image/seigetsu/item8.jpg”
class=”img-fluid d-md-block   d-none mx-auto “
alt=”選び抜かれた素材を活かせるように、今日も朝から焼き続けます。”/>

<img src=”../image/seigetsu/item8sp.jpg”
class=”img-fluid  d-md-none d-block mx-auto ” 　
alt=”選び抜かれた素材を活かせるように、今日も朝から焼き続けます。”/>

</div>

※lg の指定してある時は d-lg-none　d-lg-blockなどと包含している要素に合わせる事

new-tanaka

bootstrap4というか、 <script src=”js/jquery-3.3.1.slim.min.js”></script>
<script src=”js/bootstrap.bundle.min.js”></script>

を読み込ませる前にスムーススクロールのjqueryを読み込ませるとコンフリクト起こすので順番は先にbootstrap系のjsを読み込ませてから

<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>

を読み込ませる