# 配下ページ
$lsx()

# 方針
- Bootstrap 3 の拡張だった Agile Admin は外す
- まずプレーンな Bootstrap 4 のコードで大きな崩れがないようにコーディング
    - [Bootstrap4 グリッド](https://cccabinet.jpn.org/bootstrap4/layout/grid)
    - [Bootstrap4 フォーム](https://cccabinet.jpn.org/bootstrap4/components/forms)
    - [Bootstrap4 カード](https://cccabinet.jpn.org/bootstrap4/components/card)
- SCSS で Agile Admin に寄せたデザインに変更
- react-bootstrap は廃止、state管理を要するコンポーネントは reactstrap を使用する
- 共通の部品が多いため、変更箇所を[ココ](https://dev.growi.org/%E9%96%8B%E7%99%BA%E6%97%A5%E8%A8%98/bootstrap4%E5%8C%96/%E6%B1%8E%E7%94%A8%E7%9A%84%E3%81%AA%E5%A4%89%E6%9B%B4%E7%82%B9)に追加していく。追加された部品は、追加した人がデザイン調整済みと認識し、それ以外の人はスタイル調整しないようにする
- bootstrap4 で使われてるマジックナンバーがあればそれを優先して使用する
    - https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
    - growi用に値を変えたければ`_override-bootstrap-variables.scss` で上書きする
- Sidebar に関しては
    - [@atlaskit/global-navigation](https://atlaskit.atlassian.com/packages/core/global-navigation) を用いる
        - こんなの入れたいよね
            - bookmark/star
            - 最近更新されたページ
            - タグ


# 具体的な変更
- チェックボックスをスイッチに変更すべきとこは変更する
- panel, well→ card( `.card` )に変更
    - `.well` は `.card.well` で再現
- グリッドシステムのv3→v4変更箇所の修正
    - 具体的には[ここ](https://dev.growi.org/%E9%96%8B%E7%99%BA%E6%97%A5%E8%A8%98/bootstrap4%E5%8C%96/%E6%B1%8E%E7%94%A8%E7%9A%84%E3%81%AA%E5%A4%89%E6%9B%B4%E7%82%B9#grid)
- lebel → badge
- dropdown-toggle の caret を消したいとき
    - `.dropdown { .dropdown-toggle.dropdown-toggle-no-caret } `


---

## Page Navigation

- Canonical URL: https://dev.growi.org/開発日記/bootstrap4化
- Permalink: https://dev.growi.org/5e14092061c1a10048c26e7f
- Parent: [開発日記](/5cfa266ab3aeb7003eefc6ca.md)
- Children: 5 total
  - [admin配下ページ](/5e140da461c1a10048c26e85.md)
  - [agile-adminに関する注意点](/5e4b80a868584d00488b5c92.md)
  - [フォームのレスポンシブ対応](/5ea006de8cbaec0048e04734.md)
  - [棚卸しMTG](/5e86ffa4c5b3f400482f183f.md)
  - [汎用的な変更点](/5e142eaf61c1a10048c26ea8.md)
- Total descendants: 8
- Siblings: 49 of 58 total (9 more not shown; see the page list API below for the full listing)
  - [ 半角英数字や記号が一定数使われている文面をコピペしようとすると貼ることができない問題調査まとめ](/642251c0e653a16ac93a20e8.md)
  - [#998 カラー修正](/5d0b203bc37d14003ee54e02.md)
  - [Bulk Export](/652642ebd10a2d606278a0ce.md)
  - [CSS Variables 化とテーマプラグイン化で変わったこと](/63c969d5a27caf68eb6028f4.md)
  - [Componentの責務](/5e208d98ab221600492ee901.md)
  - [ConfigManager のタイプチェック](/6790e6327ae1d64019d48f36.md)
  - [Enhanced Access Token と 部分的管理者権限の進捗](/67e26dca87d8507933ff0717.md)
  - [Frontmatter を使用したスライド表示](/64e5647fc5a8e43a6dcd61c7.md)
  - [GROWI で使用できる Markdwn の構文について](/67160fed359210c58fe3ad6b.md)
  - [GW-4885 画像を大量に添付した場合のメモリを計測する](/5fffebb2f1464d004850a4f9.md)
  - [Installer画面にアクセスするためのコメントアウト](/5e6b0b18b4782f00481624c4.md)
  - [Next化に伴う、staticSWRの扱いについて](/6361038968e91266d4bf91a6.md)
  - [Next化に伴うスケルトンの実装について](/62eb26bffea29673c64b96dc.md)
  - [PID 1 問題の修正](/61029bf3c9ca5100517c16d3.md)
  - [SearchPage の遷移について](/6479e9f6086e3c27ea5ab938.md)
  - [Trashページ PageList](/5f7eb2480135a7004988e956.md)
  - [USER_PUBLIC_FIELDSを使っている場所の洗い出し](/604ff8f15ea133004833501d.md)
  - [User Management(ryuichi-e, akira-s, kaori-t)](/5e590edc49a26300487b67a5.md)
  - [[External Group]Keycloak sync の動作確認方法](/652f48992846ed55c70cec6e.md)
  - [[GC-5921]SES と S3 バケットの設定値の分離](/5f3fa9c89182290049297ff6.md)
  - [add-tag-label](/5f999e309d9ead0049f0ab7b.md)
  - [api rate lmitの調整](/62c529c4246cf8007dc3bf61.md)
  - [grantがnullのときに青枠が表示される #944](/5cdced197600b9003f8f1b08.md)
  - [growi本体のi18n対応](/62a71cddb1519362cc2761cc.md)
  - [hackmdの機構をpackages配下に移動](/63463b7ce126be013af78b59.md)
  - [locize 対応について](/65014d0ea3498dcb94e90800.md)
  - [peerDependencies](/623c134e396c70e3174d7f95.md)
  - [phpMyAdmin を GAE(flexible) で立てる](/60f55fbfb9b25c00515b5939.md)
  - [remark化メモ](/5f883d716897f900485b6a5a.md)
  - [tag昨日のバグ確認](/5cd3e7ac091bdc00486b2f53.md)
  - [v7 Sidebar Create Page](/652deb0f8978c8bdb9d87f26.md)
  - [ある特定のモーダル上でラジオボタンが動かない](/5fc7462b79cb6e00493cc7f8.md)
  - [コメントの再編集](/5d22f013e5fe0d0048537ac0.md)
  - [タグ一覧の動作確認](/5cd4f831a9c533004829928d.md)
  - [チェックボックス](/62a71cddb1519362cc2761ca.md)
  - [テスト用keycloak&saml構築](/5e4cfa39a2bdcf0048d69eb9.md)
  - [テーブルエディターの視認性が低下する](/5e1d5b74aa8d320048fe3d05.md)
  - [デザインルール](/5f2d05acf18a1e004888ea71.md)
  - [ファイルアップロードの apiv3 化と SWR について](/65095a9ec610d9b92cfd85a3.md)
  - [ページネーションの上限値の仕様変更](/5f7429e8cf5add004959ed78.md)
  - [ページリスト洗い出し](/5f64878ad2483d00480ed118.md)
  - [ページ削除機能の動作確認](/5ecaf7ffe917da0048ebd166.md)
  - [ページ機能の動作確認](/5ecb6057e917da0048ebd1a0.md)
  - [マイグレーションで重複登録によるエラーの解消法](/5e9900f40da6800048dbd4ea.md)
  - [モーダルないのautoFocus](/5fdb136b984b4b00482c5748.md)
  - [モーダルないのautoFocus(react-bootstrap-typeahead)](/5fdb135c984b4b00482c5744.md)
  - [ユーザー画像キャッシュの改善に伴うプラグインの修正の動作確認](/5f169621ec75070048deecce.md)
  - [リンク編集モーダル動作確認](/5f06c3c7cc16010049b88978.md)
  - [ログイン画面のReact化の動作確認](/5eaa9168bee8030048256e44.md)
- Last updated: 2020-04-20T06:51:28.418Z by akira-s
- Full page listing (all children regardless of count): https://dev.growi.org/_api/v3/page-listing/children?id=5e14092061c1a10048c26e7f