refirio.org

Bootstrap

Bootstrap - 世界で最も人気のあるフロントエンドフレームワーク https://getbootstrap.jp/ はじめに - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/getting-started/introduction/ Examples - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/examples/ サンプル - Bootstrap 4.3 - 日本語リファレンス https://getbootstrap.jp/docs/4.3/examples/ Bootstrap Themes Built & Curated by the Bootstrap Team. https://themes.getbootstrap.com/ 一般的な企業サイト、デザイン重視のサイトには向かいかもしれないが、 整然としたサイトや、管理画面などの作成に使うのは有効。 最初に公式ドキュメントの内容をざっと確認し、何ができるのかを把握しておくと作業がスムーズ。 ■基本 Webデザイン初心者でもできる、Bootstrapの使い方超入門（1/4 ページ） - ＠IT https://www.atmarkit.co.jp/ait/articles/1403/19/news034.html デザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademyマガジン https://techacademy.jp/magazine/6270 Bootstrapのよく使うクラスまとめておいた！！！！ - Qiita https://qiita.com/nakanishi03/items/c80a16b9b9796c25f890 v5では左指定がl（left）からs（start）に、右指定がr（right）からe（end）に変更されているので注意。 Spacing(スペーシング) - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/utilities/spacing/ デバイス毎に表示・非表示を切り替え「d-*-block」「d-*-none」 | Qumeruマガジン https://qumeru.com/magazine/356 Flexユーティリティ〜Bootstrap5設置ガイド https://bootstrap-guide.com/utilities/flex Flex (フレックス) - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/utilities/flex/ Images (イメージ) - Bootstrap v5.0 https://getbootstrap.jp/docs/5.0/content/images/ ■アイコン イラストレーション・アイコン素材｜デジタル庁 https://www.digital.go.jp/policies/servicedesign/designsystem/Illustration_Icons/ 400点超の無料イラスト素材、デジ庁が配布　商用利用OK　自治体や企業のWeb・アプリ開発向け - ITmedia NEWS https://www.itmedia.co.jp/news/articles/2306/27/news179.html Bootstrap Icons - Bootstrap 向けのオープンソース SVG アイコンライブラリ https://icons.getbootstrap.jp/ Bootstrapアイコン〜Bootstrap5設置ガイド https://bootstrap-guide.com/extend/icons/bootstrap-icons アイコン - とほほのBootstrap 5入門 https://www.tohoho-web.com/bootstrap5/icons.html 【初心者の方向け】Bootstrap Iconsの使い方 - くりぷろメディア-クリエイター・プログラマーを目指している人のためのメディア https://crepro-media.com/pickup/bootstrapicon/ アイコンを表示するには、外部ファイルの bootstrap-icons.css を読み込み、class でアイコンを指定して読み込む。 具体的には以下のようにしてCSSファイルを読み込んでおき、 以下のようにしてアイコンを呼び出す。 ただしこの場合、都度外部ネットワークから素材を読み込むことになる。 ローカル開発時に表示できない可能性があるし、表示速度にも影響がある。 これが問題になるようなら、以下に記載する別の方法で表示する。 あらかじめSVGファイルとしてダウンロードし、img タグで表示する方法もある。 ただしこの場合、SVGファイルの色を指定することができない。（JavaScriptなどから制御する方法はあるみたい。） あらかじめSVGのコードを含めておき、必要なものをIDで呼び出す方法もある。 ただしこの場合、使用したいアイコンが大量にあると、無駄に表示が重くなる可能性はある。 ■タブ Bootstrap 5入門 - タブUIの作り方 - ICS MEDIA https://ics.media/entry/190826/ ■メニュー Bootstrapのハンバーガーメニューをカスタマイズする方法！ | Qumeruマガジン https://qumeru.com/magazine/562 Bootstrap 5入門 - タブUIの作り方 - ICS MEDIA https://ics.media/entry/190826/ ■ダイアログ ※未検証。 Modal - Bootstrap 4.2 - 日本語リファレンス https://getbootstrap.jp/docs/4.2/components/modal/ とほほのBootstrap 4入門 - モーダル - とほほのWWW入門 http://www.tohoho-web.com/bootstrap/modal.html