Bootstrap

【bootstrap3】リスト要素のスタイルを全て無効にするクラス。

を見つけたのでメモ。

<ul class="list-unstyled">
    <li>...</li>
</ul>

これでリストのstyleが全て無効になる。

 

【bootstrap3】caret(矢印)の向きを反転させる。

めも。

<span class="caret caret-reversed"></span> 
.caret.caret-reversed {
    border-top-width: 0;
    border-bottom: 4px solid #000000;
}

色に関しては「#000000」の部分を好きな色(#fffなど)に変えればよい。

 

【Angular.js/bootstrap3】ng-repeatでrow、colを綺麗に出力させる。

完全に盲点だったんだけど、単純にブロックごとに分割されたオブジェクトをビューに渡してやればOK。

ビューはこんな感じ。

<div class="row" ng-repeat="row in rows">
    <div class="col-md-3" ng-repeat="col in row">
    </div>
</div>

てきな感じ。

下記エントリを見てハッとした。

http://stackoverflow.com/questions/11056819/how-would-i-use-angularjs-ng-repeat-with-twitter-bootstraps-scaffolding

 

【Bootstrap】tooltipを手動で起動する。

めも。

// まずはオプションを設定
$('.selector').tooltip({
    ...config...
});
$('.selector').tooltip('show');

 

【bootstrap3】モーダルウィンドウの出現タイミングと挙動を自分で制御する。

通常bootstrapのモーダルはHTMLのdata属性に特定の値を記述して動作をバインディングするが、任意の要素や挙動を設定したい場合は下記の通りスクリプトを記述すればよい。

// modal()メソッドを呼び出した瞬間モーダルが起動する。
$('#target').modal({
	backdrop: 'static'
});

上記はモーダル起動した時、窓の外をクリックされてもモーダルが閉じないようにするためのオプション。
発火タイミングはクリックなりオンロードなりお好みでどうぞ。

 

【CSS】bootstrap3対応の無料テンプレート集。

いつもぐぐるのでメモ。

http://bootswatch.com/

bootstrap2の時もお世話になったけど3にも対応したのでもっと便利。

フラットデザインならFlatlyがいい感じ。

 

【CSS】bootstrap3のアイコンを白くする方法。

めも。

bootstrapのアイコンはver.3からフォント扱いなので、cssでcolorを指定すれば何色にでも変更可能。

.white {
	color: #ffffff;
}

とでもしておけばOK。

 

【CakePHP2.4】BoostCakeプラグインの導入手順まとめ。

めも。

1, まずは下記URLからソースをダウンロード。

https://github.com/slywalker/cakephp-plugin-boost_cake

2, ファイルを解凍後、プラグインが梱包されたフォルダ名を「BoostCake」に変更し下記ディレクトリに格納。

app/Plugin/

3, 「app/Config/bootstrap.php」に下記を追記。

CakePlugin::load('BoostCake');

4, 「app/Controller/AppController.php」に下記を追記。

class AppController extends Controller {
	public $helpers = array(
		'Session',
		'Html' => array('className' => 'BoostCake.BoostCakeHtml'),
		'Form' => array('className' => 'BoostCake.BoostCakeForm'),
		'Paginator' => array('className' => 'BoostCake.BoostCakePaginator')
	);
}

5, レイアウトファイルのhead要素内で下記ファイルを読み込む。

echo $this->Html->script('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')."\n";
echo $this->Html->css('bootstrap')."\n";
echo $this->Html->script('bootstrap')."\n";

6, 以上で導入は完了。使い方は書きURLを参照されたし。

http://slywalker.github.io/cakephp-plugin-boost_cake/bootstrap3.html