Bootstrap4 テンプレート ver1

2019/09/20

以前、Bootstrap4のスターターテンプレートを作成しました。

Bootstrap4 スターターテンプレート

このスターターテンプレートに中身を少し入れてBootstrap4のテンプレートを作成しました。

Bootstrap4 テンプレートver1(デモサイト)

今回はBootstrap4 テンプレートver1についてエントリーします。

 

ポイント

  1. スクロールすると上からニョキっとメニューが降りてくる
  2. Webフォント
  3. ジャンボトロンに背景画像の設置
  4. Sticky footer
  5. navbar の一部の nav-item を右寄せ

スクロールすると上からニョキっとメニューが降りてくる

以下のサイトを参考にさせていただきました。

OKU LOG

jQueryのバージョンが3.3.1だと動かなくなったので3.2.1にしました。

 

Webフォント

グローバルメニューにはFont Awesome5を使っています。

Font Awesome5 について

 

ジャンボトロンに背景画像の設置

ブラウザの表示領域を変えても必ず画像の中心が表示されるように設定。


.jumbotron {
    background:url("{{asset('assets/images/tpl/main.png')}}") center no-repeat;
    background-size: cover;
}

 

  • ・background:url(main.png) → 背景画像を指定
  • ・center → 領域に対し、背景画像を縦横中央寄せで配置
  • ・no-repeat → 背景画像を繰り返し表示しない
  • ・background-size:cover → 縦横比を保持したまま、領域を覆うように背景画像を拡大縮小

 

Sticky footer

「Sticky footer」はメインコンテンツ部分の情報量が少なく、高さが足りない場合でも画面最下部にフッターを配置できるというものです。

Bootstrap3では「sticky-footer.css」を別途CSSを読み込んでいました。

Bootstrap4では以下のような記述でOKです。


<!-- フッタ -->
<footer class="footer mt-auto py-3">
    <div class="container">
        <span class="text-muted">ここには固定フッタのコンテンツを配置。</span>
    </div>
</footer>

 

 

navbar の一部の nav-item を右寄せ

Bootstrap の Navbar で、『お問い合わせ』ボタンだけ右に置きたいケースです。

左右で二つの<ul class="navbar-nav"></ul>に分けて、左のほうにmr-autoクラスを付与するだけです。


        <div class="collapse navbar-collapse" id="navbar-header">
            <!-- nav-item 左寄せ -->
            <!-- この下の行に mr-auto クラスを付与するだけ -->
            <ul class="navbar-nav mr-auto">　
                <li class="nav-item"><a class="nav-link active text-white" href="#"><i class="fas fa-home mr-1"></i>HOME</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="fab fa-github mr-1"></i>GITHUB</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="fas fa-comments mr-1"></i>コミュニティ</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="far fa-newspaper mr-1"></i>ニュース</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="fas fa-book mr-1"></i>書籍</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="fab fa-twitter mr-1"></i>TWITTER(JP)</a></li>
            </ul>
            <!-- nav-item 右寄せ -->
            <ul class="navbar-nav nav nav-pills">
                <li class="nav-item"><a class="nav-link active text-white bg-danger active" href="#">お問い合わせ</a></li>
            </ul>
        </div>

 

 

ソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template Site ver1</title>

    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!--Font Awesome5-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <!--自作CSS -->
    <link rel="stylesheet" href="{{ asset('/assets/css/tpl.css') }}">
    <style type="text/css">
        <!--
        /*ここに調整CSS記述*/
        .jumbotron {
            background:url("{{asset('assets/images/tpl/main.png')}}") center no-repeat;
            background-size: cover;
        }
        -->
    </style>
</head>
<body>
<div class="jumbotron jumbotron-fluid mb-0">
    <div class="container">
        <h1 class="display-4 text-white">Laravel</h1>
        <p class="lead text-white">ウェブ職人のためのPHPフレームワーク</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">もっと学ぼう</a>
    </div>
</div><!-- /.jumbotron -->

<header>
    <nav class="navbar navbar-expand-md navbar-light bg-info">
        <!-- ロゴ -->
        <a class="navbar-brand text-white" href="#">Laravel</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header" aria-expanded="false" aria-label="ナビゲーションの切替">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-header">
            <!-- nav-item 左寄せ -->
            <!-- この下の行に mr-auto クラスを付与するだけ -->
            <ul class="navbar-nav mr-auto">　
                <li class="nav-item"><a class="nav-link active text-white" href="#"><i class="fas fa-home mr-1"></i>HOME</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="fab fa-github mr-1"></i>GITHUB</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="fas fa-comments mr-1"></i>コミュニティ</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="far fa-newspaper mr-1"></i>ニュース</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="fas fa-book mr-1"></i>書籍</a></li>
                <li class="nav-item"><a class="nav-link text-white" href="#"><i class="fab fa-twitter mr-1"></i>TWITTER(JP)</a></li>
            </ul>
            <!-- nav-item 右寄せ -->
            <ul class="navbar-nav nav nav-pills">
                <li class="nav-item"><a class="nav-link active text-white bg-danger active" href="#">お問い合わせ</a></li>
            </ul>
        </div>
    </nav>
</header>

    <section id="sec01">
        <div class="container">
            <h1>タイトル</h1>
            <p>ココにサイトの文章が入ります。</p>
        </div><!-- /.container -->
    </section>

    <section id="sec02">
        <div class="container">
            <h1>タイトル</h1>
            <p>ココにサイトの文章が入ります。</p>
        </div><!-- /.container -->
    </section>

    <section id="sec03">
        <div class="container">
            <h1>タイトル</h1>
            <p>ココにサイトの文章が入ります。</p>
        </div><!-- /.container -->
    </section>

<!-- フッタ -->
<footer class="footer mt-auto py-3">
    <div class="container">
        <span class="text-muted">ここには固定フッタのコンテンツを配置。</span>
    </div>
</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
{{--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>--}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--このバージョンでないとニョキっと出るメニューが出ない-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>
    // ニョキっと出るメニュー
    $(function() {
        var headNav = $("header");
        //scrollだけだと読み込み時困るのでloadも追加
        $(window).on('load scroll', function () {
            //現在の位置が500px以上かつ、クラスfixedが付与されていない時
            if($(this).scrollTop() > 500 && headNav.hasClass('fixed') == false) {
                //headerの高さ分上に設定
                headNav.css({"top": '-100px'});
                //クラスfixedを付与
                headNav.addClass('fixed');
                //位置を0に設定し、アニメーションのスピードを指定
                headNav.animate({"top": 0},600);
            }
            //現在の位置が300px以下かつ、クラスfixedが付与されている時にfixedを外す
            else if($(this).scrollTop() < 300 && headNav.hasClass('fixed') == true){
                headNav.removeClass('fixed');
            }
        });
    });
</script>
</body>
</html>

 

 

CSS

/* ---------------------------
Bootstrap4 テンプレート
tpl.css
--------------------------- */

header{
    background: #155263;
    position: relative;
    width: 100%;
}
.fixed{
    position: fixed;
    top: 0;
    left: 0;
}
.fixed .g-nav-menu li{
    line-height: 40px;
}
section{
    display: table;
    width: 100%;
    height: 400px;
    /*text-align: center;*/
    padding-top: 30px;
}
section p{
    display: table-cell;
    vertical-align: middle;
    color: #fff;
}
#sec01{
    background: #FF6F3C;
    color: #fff;
}
#sec02{
    background: #FF9A3C;
    color: #fff;
}
#sec03{
    background: #FFC93C;
    color: #fff;
}
.footer {
    background-color: #f5f5f5;
}

 

以上です。

本庄マサノリ
本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。

>> Twitter をフォローする

 

-Bootstrap4 テンプレート, 周辺知識