system
上松 博志

2013.3.17システム開発 

システムエンジニア

上松 博志

Twitter Bootstrapを利用する2

Twitter Bootstrapは、その名の通りTwitterが提供しているcssフレームワークです。
今回は、このブートストラップを「既存のwebサイト(システム)」に適用する場合の注意点を挙げていきます。

既存のサイトにブートストラップを適用してみよう
それでは、出来上がっているサイトにブートストラップを乗せてみましょう。

追加は以下を追記するだけです。簡単ですねえ。

<link rel="stylesheet" href="./bootstrap/css/bootstrap.css"> <script src="./bootstrap/js/jquery-1.8.3.min.js"></script> <script src="./bootstrap/js/bootstrap.min.js"></script>

それでは画面を見てみましょう!

Oh…
ちょっとこれはいただけませんね~。
CSSが整備されている、既に出来上がったサイトに何も考えずにブートストラップを適用するとこうなります。
では、ここからどうやって既存サイトにブートストラップを対応させていくか?
選択肢はいくつかありますが、おおよそ3つの選択肢に分かれます。
1.ブートストラップに完全対応させる。
2.ブートストラップは使わない。
3.ブートストラップと既存CSSを共存させる。

というわけで、次回よりブートストラップを既存CSSと共存させる方法について書いてみたいと思います。

システム開発サービスはこちら
ページTOPへ