こんばんは
今年も半分終わってしまいました・・・
時間の流れは早いですね
さて、今回はアプリケーションレイアウトに追加された「Bootstrap」について
色々検証してみたいと思います
※あくまで一例ですので参考程度にしてください！
早速、新規にDBを作成してください。
１）XPageプロパティを開いて、アプリケーションのテーマを「Bootstrap3」に変更します。
※Bootstrapはレスポンシブデザイン対応なので、モバイルテーマもすべて「Bootstrap3」にしてみました。
保存して閉じます。
２）新規XPageを作成してください。名前は何でもよいです。
XPageが出来上がりましたら、
拡張ライブラリからアプリケーションレイアウトを追加してください。
３）追加すると、どのレイアウト選ぶ？的なことを聞かれます。
そんな事急に言われてもわからないので、
とりあえず「Responsive Bootstrap Configuration」を選択します。
４）オプション何か設定しとく？的なことを聞かれますが、
心の準備が出来ていないのでこのまま「終了」を選択します。
５）出来上がったようです
一度保存して、XPageを閉じます。
６）やはりもう一つのBootstrapテーマも気になるので作成したいと思います。
５で作成したXPageをコピーします。
コピーしたXPageを開いてすべてのプロパティを選択します。
基本＞configurationに「bootstrapResponsiveConfiguration」が設定されているので
マイナスボタンで削除、プラスボタンをクリックすると上記イメージのように
表示されますので「simpleResponsiveConfiguration」を選択します。
変更出来たら保存しておきます。
では早速、色々といじってみましょう
＜bootstrapResponsiveConfiguration＞
どこにどのように表示されるかということで色々設定をいじってみるとよいかもしれません。
少し幅を狭めてみました。
左にあったメニューバーも上に動き、レスポンシブ出来ています。
ハンバーガーメニュー（右上）が表示されました。
もう少し縮めてみました。
ナビゲーションバーのテキスト「IBM Champion for ICS 2017」のエリアが
リンクの邪魔してますね・・・
もっと縮めてみました。
もっと折り返されてリンクが見えなくなってしまいましたorz
ハンバーガーメニュー内は問題なく表示されました。
＜simpleResponsiveConfiguration＞
こちらはすべてのプロパティ以外にも各項目の設定箇所があるので便利です。
oneUIの時と感覚は同じです。
早速縮めてみました。
問題なくレスポンシブされています。
さらに縮めてみました。
先ほどとは違い、テキストがあってもリンクは隠れていませんでした。
ハンバーガーメニューも問題なく表示されました。
bootstrapResponsiveConfiguration
simpleResponsiveConfiguration
どちらのプロパティにも「invertedNavbar」があり、こちらの値をtrueにすると・・・
ナビゲーションバーが黒に変わります
他にも、アプリケーションテーマとの組み合わせで色々と出来るかもしれません。
引き続き、アプリケーションレイアウトのBootstrapについて調べていきたいと思います
今日はこの辺で・・・
あでゅー