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

2018-07-13イントラマート

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

イントラマートとは
株式会社NTTデータイントラマート社が開発・販売している、Webアプリケーションシステムのシステム共通基盤(統合型フレームワーク)で、国内の著名企業を中心に6,000社以上に導入されています。 イントラマートを導入することにより、Webシステム開発における短納期・低コスト・標準化推進・品質向上を実現できます。
詳しくはこちらをご覧ください。

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

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

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

Boostrapとは

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

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

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

マニュアルの


にもあるように
画面を左右に分割するレイアウトの実用例では「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から読み込むことにします。

CDNとは

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

実際にソース上には1行追加するだけで「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を組み込む方法」でした。

株式会社システムトラスト

イントラマートの導入・開発についてなど気軽にご相談ください。

お問合せ

 

株式会社システムトラスト

人材募集中です。

システムトラストでは、システムエンジニア、プログラマーなどを随時募集中です。気軽にご相談ください。

お問合せ