Bootstrap 3

変更点

1.画像廃止
・画像 → webフォント

2.使用タグ変更
・<i> → <span>

<span class="glyphicon glyphicon-search"></span>

---

注意点

アイコンが文字化けするときは？
・fontsディレクトリ以下が適切に配置されていない
※画像とは異なりエラーとして表示されないので見つけづらい

変更点

input type="text"
・class="form-control"付与

<input type="text" class="form-control">

Bootstrap3 × HTML5タグ

Bootstrap3

実際によく使用するHTML5テンプレート

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>

    <script src="js/prefixfree.min.js"></script>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style></style>

    <script></script>

  </head>

  <body>

    ★★

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

Bootstrap3の固定ナビゲーション

・navタグをheaderタグで囲み、カスタマイズしようとするもうまくいかず苦しむ(z-index等で)
・固定navタグ部分は最適化されていると思うので、無闇に触らない方がよいと思われ