Bootstrap導入

はじめに

自宅WebサイトにBootstrapを導入した。以前の構成だと、スマートホンやタブレットでの参照ははっきりいってダメダメ。 Googleからも「モバイルデバイスからのアクセスが考慮されてない」という警告が。

そこでBootstrapを導入して、モバイルデバイスからのアクセスも便利にしてみた。

Bootstrapとは

私の理解では、Bootstrapというのは、

  • 画面サイズに応じてメニューやコンテンツの配置が変わるレスポンシブデザインが可能
  • グリッドシステムによってコンテンツやメニューの配置が楽にできる
  • PCとモバイルデバイスの両方に対応した画面ができる

導入するだけでそこそこかっこいいWebサイトができそう。

ここのサイトはRDという形式で記述されたコンテンツをHTMLに変換している。 HTMLヘッダなどの生成をRD Toolで生成してるので、このあたりをいじれば全ページでBootstrap対応可能だ。

Bootstrap導入の方法

Bootstrapを導入するだけなら結構簡単。

  • HTTPヘッダに以下の記述を追加。bootstrap.min.cssがBootstrap本体で、残りの.jsはJavaScriptのライブラリの読み込み。jqueyも使ってるのがわかる。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>

これでBootstrapが導入されて、<h1>などの見出しや<pre>などを使ったコードの表示がそれっぽくなる。

2カラム表示

コンテンツとサイドバーの2カラム構成にしようと思ったら、グリッドシステムをうまく使えばいい。

2カラム構成

上記のように、コンテンツとSidebar の幅の比率を9:3にするなら、Bootstrapの流儀に従い、以下のように記述すればいい。

  <div id="main" class="container">
    <div class="row" >
      <div class="col-xl-9 col-md-12" id="maincontents" >
        ここにコンテンツ
      </div>
      <div class="col-xl-3 col-md-12" >
        ここにサイドバー
      </div>
    </div>
  </div>
  
  • 一番外側をclass="container"の<div>で囲む
  • 1行分をclass="row"の<div>で囲む
  • 各列をclass="col-#{size}-#{col数}"の<div>で分割する
  • sizeは画面の幅を示すラベルで、狭い→広いの順で、xs,sm,md,lg,xlの表記になる。要はその画面幅の時に何グリッド使うかを指定する。

col-md-12の方は画面が小さくなってきたら全幅占有させて、縦2列に並べるというもの。

2カラム構成幅狭

1つのカラム内をさらに分割させたいときは、<div class="col-xx">の内側に<div class="row">を入れ子にして、その内側をclass="col-xx"で分割すればいい

この辺りは以下のサイトで勉強させてもらいました。

Navibar表示

BootstrapのNavibarもつけてみよう。メニューの構造はこんな感じ。 Navibar

このメニュー構造は以下のようなHTMLで記述されている。

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3 mb-3">
    <a class="navbar-brand" href="/index.html">Home</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" 
       aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <ul class="navbar-nav">
        <li class="nav-item"> 
           <a class="nav-link active" href="/mysvr/index.html">自宅サーバ</a> 
        </li>
        <li class="nav-item"> 
           <a class="nav-link active" href="/mysvr/domain.html">ドメイン取得</a> 
        </li>
        <li class="nav-item dropdown active">
          <a class="nav-link dropdown-toggle" href="#" id="menulink_8"
            role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
            ESXi Section
          </a>
          <div class="dropdown-menu" aria-labelledby="menulink_8">
            <a class="dropdown-item" href="/vmware/index.html">ESXi Section</a> 
            <a class="dropdown-item" href="/vmware/esxi_introduction.html">VMware ESXiの紹介</a> 
            <a class="dropdown-item" href="/vmware/esxi_pcselect.html">VMware ESXi用のハードの選定</a> 
            <a class="dropdown-item" href="/vmware/gpu_passthrough.html">グラボのパススルー</a> 
          </div>
        </li>
        <li class="nav-item dropdown active">
          <a class="nav-link dropdown-toggle" href="#" id="menulink_9"
            role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
            Others
          </a>
          <div class="dropdown-menu" aria-labelledby="menulink_9">
            <a class="dropdown-item" href="/excel_images/">ExcelでWeb挿絵</a> 
            <a class="dropdown-item" href="/samba_LDAP/">Samba+LDAPによるPDC構築</a> 
            <a class="dropdown-item" href="/mysvr/domain.html">自宅サーバ用ドメイン取得</a> 
            <a class="dropdown-item" href="/mysvr/https.html">自宅WebサーバのHTTPS化</a> 
          </div>
        </li>
      </ul>
    </div>
  </nav>  
  
  • 基本、<li>でVavibarのメニュー見出しを定義
  • サブメニューを用意する場合はclass="dropdown" を指定
  • 内側にclass="dropdown-menu"を指定した<div>を用意し、その中に<a class="dropdown-item">を並べる
  • 親メニューと子メニューの関係をidとaria-labelledbyで紐づけ

これを手書きで作成するのはむつかしいので、Rubyスクリプトで生成している。

NavibarとSidebarの読み込み

基本NavibarやSidebarはいくつかのページで同じ内容なのに各HTMLファイルに直接記述するのはちょっといや。 共通ファイルとして保存しておき、各HTMLから動的に読み込む方法はないものかと探したら、JavaScriptで読み込む方法があるみたい。

jQueryが必要なんだけど、Bootstrap用に読み込み済なので以下のようなコードでできそう。

  <script type="text/javascript">$(function() {$("#navibar").load("/navibar/humcomsec_navi.html");});</script>
  <script type="text/javascript">$(function() {$("#mysidebar").load("/navibar/humcom_sidebar.html");});</script>
  </head>
  <body>
    <div><div id="navibar" /></div>
  
  • $("#navibar").load("/navibar/humcomsec_navi.html") というコードでid="navibar"の要素を/navibar/humcomsec_navi.htmlで置き換えるというもの。
  • 各ページのセクション(分類)に応じて、読み込むナビ用HTMLファイルを書き換えている
  • このようなNavibarはたぶん邪道で、本来は全ページ共通の構造のNavibarを用意するようのが正解のような気がする。複数階層のNavibarのメニューが難しそうなので、セクションごとにメニュー構造を変えている
  • Sidebarも同じような方法で各ページに組み込んでる