twitterbootstrapでスマホサイトを作る例

Question

今、スマホサイトをつくろうと思い、twitterbootstrapを利用し始めました。
簡単につくれるという事で使ってみましたが、全くうまく行きません。。

まず、ページのヘッダ部分に画像を配置してみましたが、classにcol-xs-12を指定し、cssの方でも下記のような指定をしているのに、画像がはみ出ます。

<div class="container" id="header">
  <div class="row-fluid">
    <div class="col-xs-12">
      <img src="img/header.png">
      <p>練習用のヘッダです</p>
    </div>
  </div>
</div>

img {
  max-width: 100%;
  height:auto;
}

また、画像とテキストが並んだリストビューのようなものも作ってみましたが、画像が大きくなりすぎたり、テキストが画像の下に周りこんでしまったりと、うまくいきません。。

<div class="container" id="contents">
  <div class="row-fluid">
    <div class="col-xs-12">
      <ul id="content">
        <li>
          <a href="#">
            <img style="float: left" src="img/test1.png">
            <p class="fontSize12">画像のタイトル</p>
            <p class="fontSize10">更新日時: 2014/01/02 10:00:00</p>
          </a>
        </li>
      </ul>
    </div>

    <div class="col-xs-12" id="footer" style="clear: both">
      <h3>Copyright 2015, テスト</h3>
    </div>
  </div>

</div>

スマホサイトを実際に作ってみたソースコードの例が乗っているサイトなどがあればご教示頂きたいです。
もう何がなんだかわからなくなってきてしまいました。。。。

Answer 1

こんにちは。

アプリのランディングページのために用意された、レスポンシブWebデザインのBootstrapテンプレートです。さまざまな要素が使われていますので、試しにさわってみてください。

![イメージ説明]WIDTH:393
紹介ページはこちら（リンク）です。

おおきな画像のあつかい方については、こちら（リンク）をごらんいただければと思います。
![イメージ説明]WIDTH:600

以上、ご参考いただければ幸いです。

Comments

[coffee]

ありがとうございます。
こちらも使ってみようと思います！

[退会済みユーザー]

coffeeさん、コメント（返信）をいただきありがとうございます。
ぜひ使ってみてください。

Answer 2

縮小しても問題がなければimg-responsiveクラスを使ってみてください。
表示領域に合わせて自動的に画像サイズが調整されます。
<img src="img/header.png" class="img-responsive">