ブックマーク / v4.bootstrap-guide.com (3)

  • グリッド~Bootstrap4移行ガイド

    レイアウト グリッド Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。 グリッド(Grid) v4.0.0設定変更 v4.2.1追加 12の列システム、5つのデフォルトレスポンス層、Sass変数とmixin、数十の定義済クラスにより、強力なモバイル・ファーストのFlexboxグリッドを使用して、すべての形状とサイズのレイアウトを構築する。 使い方(How it works) Bootstrapのグリッドシステムは、一連のコンテナ、行、列を使用して、コンテンツのレイアウトと配置をする。これはFlexboxで構築され、完全にレスポンシブになる。以下は、グリッドがどのように組み合わされるのかを示す例と詳細である。 Flexboxに慣れ親しんだり、馴染みがないのなら、背景、用語、ガイドライン、コードスニペットについては、こちらのCSS Tricks

    グリッド~Bootstrap4移行ガイド
    miraesu
    miraesu 2018/11/09
    わかりやすい!
  • リストグループ~Bootstrap4移行ガイド

    コンポーネント リストグループ Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。 リストグループ(List group) v4.0.0一部変更 v4.3.0一部追加 リストグループは、一連のコンテンツを表示するための柔軟で強力なコンポーネント。それらを修正して拡張して、その中のあらゆるコンテンツに対応。 基のリストグループ(Basic example) 最も基的なリストグループは、リストアイテムと適切なクラスを持つ順不同のリスト。それに続くオプションや必要に応じて独自のCSSを使って構築。 見

    リストグループ~Bootstrap4移行ガイド
    miraesu
    miraesu 2018/11/05
    ボタンのリスト
  • ナビゲーションバー~Bootstrap4移行ガイド

    Bootstrap3.xの設定例 赤背景が変更箇所 <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navber" aria-expanded="false"> <span class="sr-only">ナビゲーションの切替</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navba

    ナビゲーションバー~Bootstrap4移行ガイド
  • 1