No Web Service No Life

クラウドソーシングサービス「ランサーズ」のプロデューサーです。Webサービスや構成要素(UIや技術)について書いています。

CakePHPでBootstrapを使ってみた


今さらですが、Bootstrapを使ってみました。

興味のある技術とSEO施策の検証用に、カフェの検索サービスCakePHPで開発し、ここに適用してみました。まだまだ途中ですが。

Bootstrapのダウンロードはこちらからできます。

 

ダウンロードファイルを解凍したら、css、jsファイルをwebroot配下のフォルダにコピーします。

default.ctp内で以下のように記述すれば、すぐに適用されます。調整しないと色々崩れてしまいますが。

<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

 

導入した段階で、既にフォームがかっこ良くなっています。

角丸かつフォーカス中のフォームの縁が蒼色に!

f:id:kkino0927:20130515230035p:plain

 

ボタンも簡単に追加できます。

<buttonclass="btn btn-large btn-primary"type="button">登録する</button>

Cakeのヘルパーを使うと以下の様な記述です。

<?= $form->end(array('label' => '登録する', 'class' => 'btn btn-large btn-primary')); ?>

 

他にも色々適用してみようと思います。

 

広告を非表示にする

最新のWebサービス・スマホアプリの情報が毎日メールで受信できるキュレーションサービス『Service Safari』を運営しています。
エンジニアを募集していますので、ご興味のある方はFacebookやTwitterからご連絡ください。