イントラマートにBootstrap4を組み込む方法
イントラマートの最新バージョン「intra-mart Accel Platform 2018 Spring(Skylark) 」にはデフォルトでBoostrapが組み込まれています。
でもリリースノートを見るとバージョンは「Bootstrap 2.0.2」とあるので、ちょっと古すぎますね。
ということでファイルを入れ替えると動作しなくなると困るので無理矢理「Bootstrap4」を読み込んでうまく表示できるか実験してみます。
ちなみにBoostrapとは以下の通りです。
BootstrapはウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。
イントラマートにBootstrap4を組み込む方法
イントラマートにはデフォルトでBoostrapが組み込まれています。
マニュアルの
https://www.intra-mart.jp/download/product/iap/im_ui/im_desi...にもあるように
画面を左右に分割するレイアウトの実用例では「Twitter の Bootstrap を利用します。」とあり、
<div class="container-fluid">
<div class="row-fluid">
<div class="span2" style="height:400px;">
<div>sidebar content</div>
</div>
<div class="span10" style="height:400px;">
<div>body content</div>
</div>
</div>
</div>
というサンプルが書かれています。
でも「Bootstrap 2.0.2」では少し古すぎるので、ここでは無理矢理「Bootstrap4」を読み込んでみます。
CDNからBootstrap4を組み込む
ダウンロードして、組み込むのは少し手間だったので、今回はCDNから読み込むことにします。
Contents Delivery Networkの略でインターネット上で、音楽・映画・電子書籍などのマルチメディアコンテンツやアプリケーションソフトのデータを、効率よく配信するための分散ネットワークのこと。
実際にソース上には１行追加するだけで「Bootstrap4」は読み込めます。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
これで「Bootstrap4」の読み込みは完了です。
実際にボタンを配置してみると
<button type="button" class="btn btn-default">Default</button><br> <button type="button" class="btn btn-primary">Primary</button><br> <button type="button" class="btn btn-success">Success</button><br> <button type="button" class="btn btn-info">Info</button><br> <button type="button" class="btn btn-warning">Warning</button><br> <button type="button" class="btn btn-danger">Danger</button><br> <button type="button" class="btn btn-link">Link</button><br>
無事にBootstrapのCSSが効いたボタンが表示されます。
まとめ
イントラマートに「Bootstrap4」を読み込むのは簡単ですが、デフォルトで読まれている「Bootstrap 2.0.2」との絡みがはっきりしないので、いろいろと試してみることが必要です。
以上、「イントラマートにBootstrap4を組み込む方法」でした。