Bootstrapでホームページを作ってみて気がついたメモ

公開日： 2013/07/08 : 最終更新日：2013/12/30 WEBDESIGN Bootstrap

簡単にレスポンシブデザインできる Bootstrap を使ってみて、気がついた点をメモしています。実際にホームページを作りながらの疑問と解決の記録です。ただし、あらためてBootstrap についての紹介はしていません。

メニューの均等割

まずはメインメニューの均等割で悩みました。出来れば上に日本語で下に英語の２段で作りたいけど挫折。マニュアルを読んでも英語なので細かい点が不明です。数時間サイトを巡って均等割はサンプルで発見しました。

Justified nav
http://twitter.github.io/bootstrap/getting-started.html#examples

しかしこのサンプルには問題があります。iPhoneなどで見るとメニューが画面から飛び出してしまい正常に機能しません。

画面が広い時は問題ありません。画面を狭くすると文字が右側にはみ出します。

なんとか解決策を探しましたが日本語の情報は見当たらず断念。仕方ないので画面幅によって「Starter template」の上部の黒い帯のメニューと切り替えるようにしてみました。

Starter template
http://twitter.github.io/bootstrap/getting-started.html#examples

仕組みは簡単です。「Responsive utility classes」の表を参考に、画面幅が広い場合（Desktop/Tablet）に表示したい部分を

で、狭い幅の場合（phone）を

で囲って併記してみました。

<body>
<div class="visible-phone">
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <!--/.nav-collapse --> 
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="masthead hidden-phone">
    <h3 class="muted">Project name</h3>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">

「Starter template」を動かすにはJavaScriptの設定を確認しておく必要があります。「jQuery」を読み込んでから「bootstrap.js」へのリンクも確認してみてください。ソース最下段を以下のように書き換えて動くことを確認しました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="./js/bootstrap.js"></script>

CSS 関係にも若干不具合があったので親子関係を指定して迂回してみました。