====== Bootstrap 4 ====== ===== 概要 ===== Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発された。\\ 前バージョンのBootstrap 3から3年の開発期間を経て、2018/01/18にBootstrap 4が正式にリリースされた。\\ また、2018/04/09にはBootstrap 4.1がリリースされた。 * [[https://qiita.com/suguruguruguru/items/20fe111ee5a2f694ed3e|Bootstrap 4が全然盛り上がってないから試した → 思ったより良かった]] * [[https://suguruguruguru.github.io/bootstrap4-experience/|Bootstrap4 かわいい説]] * [[https://www.infoq.com/jp/news/2018/02/bootstrap-4-released|Bootstrap 4がリリース、しかしその必要性に疑問も]] * [[https://tech.speee.jp/entry/2018/05/10/113200|続・今更聞けない Bootstrap 4 のレイアウトシステム with Flexbox]] ==== レスポンシブ ==== Bootstrap 4では、完全なレスポンシブ対応(Fully responsive)となり、Bootstrap 3にあった未適用オプションは提供されなくなっています。 ==== マテリアルデザイン ==== Bootstrap 4は、Googleが提唱しているデザインのガイドラインであるマテリアルデザインに準拠することを目的に作られたCSSフレームワークとなっている。 * [[https://saruwakakun.com/html-css/material|【2018年版】マテリアルデザインとは？作り方とガイドラインまとめ]] * [[https://www.slideshare.net/akioyonekura1/materialdesign-49393726|マテリアルデザイン - SlideShare]]] * [[https://qiita.com/Tamiiy/items/d12d64b831fbcbabadbe|[Material Design] UI設計をおさらいしたい人のためのリンク集]] === マテリアルデザインとフラットデザインの違いは？ === [[https://saruwakakun.com/html-css/material/vs-flat|マテリアルデザインとフラットデザインの違いは？特徴や長所を比較]] * フラットデザイン：とにかく平面的な表現。影は使わない。2012年頃〜普及。ガイドラインは無い。 * マテリアルデザイン：現実世界の触れられる感覚を再現。影を使って層の重なりを表現する。Googleが2014年にガイドラインを発表した。 ===== レイアウト ===== ==== グリッド ==== サイトの横幅を均等に分けるガイドラインを「グリッド」と呼びます。Bootstrapでは12本のグリッドが存在します。\\ グリッドに沿って表示物を配置しておけば、パソコンやスマホなど画面幅が異なってもレイアウトを組み替えやすくなります。 * [[http://websae.net/twitter-bootstrap-grid-system-21060224/|Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする]] * [[https://qiita.com/tonkotsuboy_com/items/a23ef99041880a698e9f|Bootstrap 4のグリッドシステムの基本を学ぼう]] * [[http://cccabinet.jpn.org/bootstrap4/layout/grid|グリッド～Bootstrap4移行ガイド]] ==== フォーム部品配置 ==== * [[http://namihira.hatenablog.com/entry/2015/06/20/222057|Bootstrapでform要素内にselect要素を置くときの実装メモ]] * [[https://qiita.com/uedatakeshi/items/ef8682956f956040bfce|Bootstrapでフォーム部品を横一行に表示したい]] ==== クラス ==== * [[https://webnetamemo.com/coding/bootstrap4/201710065870|Bootstrap4に用意されているクラス]] * [[https://webnetamemo.com/coding/bootstrap4/201711026071|Bootstrap4に用意されているクラス【color編】]] ==== ツール ==== * [[https://html-color-codes.info/japanese/|HTMLカラーチャート]] * [[https://tabletag.net/ja/|Table Tag Generator]] * [[https://blog.htmlhifive.com/2016/02/12/bootstrap-easy-view-creator/|Bootstrapの画面を手軽に作れるツールまとめ]] ===== 参照 ===== * [[http://www.tohoho-web.com/ex/bootstrap.html|とほほのBootstrap入門]] * [[https://qiita.com/yaju/items/2cbe5e5914c5be08820a|Bootstrap 4でDatetimePickerを使いたい]]