Bootstrap 3

Bootstrap ＞ 3系

リリース

　状態:- 　閲覧数:3,355 　投稿日:2013-07-28 　更新日:2014-11-26
・2013/7/27、「Bootstrap 3 RC1」が正式リリースされた
・ついにキタか！
・結構、楽しみにしてたんだよ！

サービス名称変更
・「Twitter Bootstrap」 → 「Bootstrap」

情報チェック


Bootstrap3移行ガイド
・CSS編
・Components編1

Glyphicons ／ 2系からの変更点

　閲覧数:667　投稿日:2014-11-26　更新日:2014-11-26

変更点


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

2.使用タグ変更
・<i> → <span>
<span class="glyphicon glyphicon-search"></span>


注意点


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

フォーム ／ 2系からの変更点

　閲覧数:563　投稿日:2014-11-26　更新日:2014-11-26

変更点


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


Bootstrap3 × HTML5タグ

　閲覧数:499　投稿日:2015-10-12　更新日:2019-09-29

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タグ部分は最適化されていると思うので、無闇に触らない方がよいと思われ

Bootstrap 2.0 → 3.1.1



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Bootstrap 3 82
2 Bootstrap 4 73
3 Bootstrap v2.3.1 67
4 さよならBootstrap 58
5 Group Tabs 57
6 「Bootstrap v2.3.1」不具合 56
7 Bootstrap 2.0 → 3.1.1 56
8 Twitter Bootstrap 1.4 50
9 Twitter Bootstrap 2.0 50
10 Bookmarks clean up 48
11 JavaScript in Bootstrap 47
12 Bookmark Sentry 46
13 Bootstrap３系 テーマ ／ テンプレート 46
14 Bootstrap4系 テーマ ／ テンプレート 46
15 Tor Browser 45
16 Bootstrapをどこまで理解するか？ 45
17 Potrace 44
18 History Disabler 44
19 「Bootstrapデザイン」✕「グラフ」 44
20 「Twitter Bootstrap」✕「フォーム」 43
2025/3/10 19:24 更新
週間人気ページランキング ／ 3-3 → 3-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
2 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 6
2 RGB ⇔ Lab | 色変換(色) 6
3 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 5
3 このエントリーの結論 ／ 変更するまで ／変更後 5
3 鉄道会社毎のカラーコード | カラーコード(色) 5
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
4 色モデルイメージ図 | 色変換(色) 3
4 24ビットカラーにおけるHLS要素範囲 ／ 最小値 ～ 最大値 3
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
5 G'MIC | GIMP 系(ソフトウェア) 2
5 16進数カラーコード ／ 2進数 2
5 「bgcolor」「background-color」「background」の違い | CSS 2
5 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 2
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 2
    5 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 2
    5 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 2
    6 「OOCSS」とは別の考え方？ | 命名規則(コーディングルール) 1
    6 効果を打ち消すスタイルシート | CSS 1
    6 2系(Bootstrap) カテゴリー 1
    2025/3/10 1:01 更新