Jamband: Yii Framework: bootstrapを使ってみた

Twitter Bootstrapのエクステンションがあったのがテストしてみました (DLはこちら) 。
DL後、解凍して protected/extensions 下に置き protected/config/main.php に以下を追加します。

	<?php
	return array(
	...
	'import' => array(
	...
	'ext.bootstrap.components.*', // 追加
	),
	...
	'components' => array(
	'bootstrap' => array('class' => 'ext.bootstrap.components.Bootstrap'), // 追加
	...

view raw main.php hosted with ❤ by GitHub

次に protected/layouts/main.php を修正します (blueprint など、元からあったものは削除) 。

	<head>
	...
	<?php echo Yii::app()->bootstrap->registerBootstrap(); ?>
	</head>

view raw main.php hosted with ❤ by GitHub

あとは .topbar や .container など、いろいろ好みで作っていきます。とりあえず、もともとある login ページと contact ページを bootstrap の Usage を見つつごにょごにょ作ってみました。BootActiveForm はラベルやエラーのコードを書かなくていいのが素敵です。

login.php:

	<?php $this->pageTitle = Yii::app()->name . ' - Login'; ?>
	<?php $this->breadcrumbs = array('Login'); ?>

	<div class="page-header">
	<h3>
	Login
	<small>登録済みの方は、こちらからログインしてください</small>
	</h3>
	</div><!-- /.page-header -->

	<div class="row">
	<div class="span11">
	<div class="form-stacked">
	<?php $form = $this->beginWidget('ext.bootstrap.widgets.BootActiveForm', array(
	'id' => 'login-form',
	'ebableClientValidation' => true,
	'clientOoptions' => array(
	'validateOnSubmit' => true,
	),
	)); ?>
	<?php echo $form->textFieldBlock($model, 'username'); ?>
	<?php echo $form->passwordFieldBlock($model, 'password'); ?>
	<?php echo $form->checkBoxBlock($model, 'remeberMe'); ?>

	<div class="actions">
	<?php echo CHtml::submitButton('ログイン', array('class' => 'btn primary')); ?>
	</div><!-- /.actions -->

	<?php $this->endWidget(); ?>
	</div><!-- ./form-stacked -->
	</div><!-- /.span11 -->

	<div class="span5">
	<a href="<?php echo $this->createUrl('/user/register'); ?>">新規登録の方はこちら</a><br />
	<a href="<?php echo $this->createUrl('/user/forgotPassword'); ?>">パスワードを忘れた場合はこちら</a>
	</div><!-- /span5 -->
	</div><!-- /.row -->

view raw login.php hosted with ❤ by GitHub

見た目はこんな感じ

contact.php:

	<?php $this->pageTitle = Yii::app()->name . ' - Contact Us'; ?>
	<?php $this->breadcrumbs = array('Contact'); ?>

	<div class="page-header">
	<h3>
	お問い合わせ
	<small>以下のフォームにご記入の上、送信してください</small>
	</h3>
	</div><!-- /.page-header -->

	<?php if (Yii::app()->user->hasFlash('contact')): ?>
	<div class="flash-success">
	<?php echo Yii::app()->user->getFlash('contact'); ?>
	</div><!-- /.flash-success -->
	<?php else: ?>

	<div class="form-stacked">
	<?php $form = $this->beginWidget('ext.bootstrap.widgets.BootActiveForm', array(
	'id' => 'contact-form',
	'enableClientValidation' => true,
	'clientOptions' => array(
	'validateOnSubmit' => true,
	),
	)); ?>

	<?php echo $form->textFieldBlock($model, 'name'); ?>
	<?php echo $form->textFieldBlock($model, 'email'); ?>
	<?php echo $form->textFieldBlock($model, 'subject', array('size' => 60, 'maxlength' => 128)); ?>
	<?php echo $form->textAreaBlock($model, 'body', array('row' => 6, 'cols' => 50)); ?>

	<?php if (CCaptcha::checkRequirements()): ?>
	<?php $this->widget('CCaptcha'); ?>
	<?php echo $form->textFieldBlock($model, 'verifyCode'); ?>
	<span class="help-block">
	上の画像に表示されている文字を入力してください。大文字、小文字は問いません
	</span><!-- /.help-block -->
	<?php endif; ?>

	<div class="actions">
	<?php echo CHtml::submitButton('送信する', array('class' => 'btn primary')); ?>
	</div><!-- /.action -->

	<?php $this->endWidget(); ?>
	</div><!-- ./form-stacked -->
	<?php endif; ?>

view raw contact.php hosted with ❤ by GitHub

基本的には Widgets 関連のものに対応しているみたいです。なので GridView やら ListView, DetailView などの Widgets のパスを bootstrap 用のパスに置き換えることで適用されます。GirdView はわりと綺麗に表示されますが、DetailView などはレイアウトが少し崩れているみたいです。あと CMenu にも強引ではありますが、適用できます。ただ、もう少し待てば新しいバージョンが出てくると思うので、楽しみに待ったほうが良さそうです。

Jamband

2011年9月29日

Yii Framework: bootstrapを使ってみた

参考リンク

0 件のコメント:

コメントを投稿