concrete5にtwitter bootstrapをいれてみた
突然、concrete5にtwitter bootstrapを入れてみたらどうなるんだろうと思ってやってみました。
テーマフォルダの直下にbootstrap.min.cssを置いて、header.phpに
1 | <link rel="stylesheet" href="<?php echo $this->getThemePath()>/bootstrap.min.css"> |
と書いてみました。
おぉ、ボタンとかテキストボックスなんかが格好よくなっている!!
と思ったんですが、テーブルの幅とかずれちゃって元のページが崩れちゃいました。
最初から想定して作ってあれば良かったんでしょうけども、既存のページに入れると思った通りにはできませんね。
このページをIE6でみたら、なんかもう…悲惨なページになってしまいました。
後学の為に、「なんとかならんのかなぁ」と調べてみたら Bootstrap-IE6 というものがあるそうです。
さっそくダウンロードしてみたんですが、これはIE6だけ読み込ませたい。
というわけでこんな感じにしてみました。
1 | <!-- Bootstrap from Twitter --> |
2 | <!--[if !lte IE 6]><![IGNORE[--><![IGNORE[]]> |
3 | <link rel="stylesheet" href="<?php echo $this->getThemePath()?>/bootstrap.min.css"> |
4 | <!--![endif]--> |
5 | <!--[if IE 6]> |
6 | <linkrel="stylesheet" href="<?php echo $this->getThemePath()?>/ie6.min.css"> |
7 | <![endif]--> |
これでIE6でも普通に見れるページになります。
ただ、やっぱり当初のページとは違ってしまうので、採用は見送ることになりました。