イントラマートにBootstrap4を組み込む方法

イントラマートの最新バージョン「intra-mart Accel Platform 2018 Spring(Skylark) 」にはデフォルトでBoostrapが組み込まれています。

でもリリースノートを見るとバージョンは「Bootstrap 2.0.2」とあるので、ちょっと古すぎますね。

ということでファイルを入れ替えると動作しなくなると困るので無理矢理「Bootstrap4」を読み込んでうまく表示できるか実験してみます。

ちなみにBoostrapとは以下の通りです。

Boostrapとは

BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

イントラマートにBootstrap4を組み込む方法

イントラマートにはデフォルトでBoostrapが組み込まれています。

マニュアルの


にもあるように
画面を左右に分割するレイアウトの実用例では「Twitter の Bootstrap を利用します。」とあり、

というサンプルが書かれています。

でも「Bootstrap 2.0.2」では少し古すぎるので、ここでは無理矢理「Bootstrap4」を読み込んでみます。

CDNからBootstrap4を組み込む

ダウンロードして、組み込むのは少し手間だったので、今回はCDNから読み込むことにします。

CDNとは

Contents Delivery Networkの略でインターネット上で、音楽・映画・電子書籍などのマルチメディアコンテンツやアプリケーションソフトのデータを、効率よく配信するための分散ネットワークのこと。

実際にソース上には1行追加するだけで「Bootstrap4」は読み込めます。

これで「Bootstrap4」の読み込みは完了です。

実際にボタンを配置してみると

無事にBootstrapのCSSが効いたボタンが表示されます。

まとめ

イントラマートに「Bootstrap4」を読み込むのは簡単ですが、デフォルトで読まれている「Bootstrap 2.0.2」との絡みがはっきりしないので、いろいろと試してみることが必要です。

以上、「イントラマートにBootstrap4を組み込む方法」でした。