BoostCake(CakePHP + Bootstrap)でHorizontal formに横並びのテキストボックスを作る | 14時の間食
BoostCakeを使ってCakePHP & Bootstrapなサイトを作っていると、Horizontal formの中にInline formのような横並びのテキストボックスを作りたい場面が時々出てきます。 例えば名前の「姓」「名」や、郵便番号の上3桁と下4桁などが2つのテキストボックスに分かれている場合、2行に分けて表示せずに1行で横に並んで欲しいんですよね。 色々試行錯誤したところ、バリデーションエラーをきちんとそれぞれのテキストボックスの下部に表示させつつ、レスポンシブにも対応させるとなると、それなりに記述に工夫が必要だったのでメモしておきます。 前提 CakePHP2.6.10 BoostCakeプラグイン(導入済み) Bootstrap3.3.5 以上の環境で制作しています。 完成形 こんな感じです。 「お名前」「フリガナ」「郵便番号」が横並びを実現した箇所になっています。
Bootstrap の File input の見た目を Cool にする - Qiita
概要 Bootstrap を使うと見た目がかなりキレイになりますが、まだまだイケてない部分があります。 例えば、Forms の File input。 汚い！！！せっかくその他のボタン等は綺麗なのに、もったいないですね。 そこで、少しでも見た目が Cool になるように改善したい思います。 今回は Bootstrap File Input というライブラリを導入してみました。 そして、このライブラリを利用して、実際に CSV ファイルをアップロードするための form を作ってみたいと思います。 お断り 本当は Bootstrap File Input を使うと、 例えば画像ファイルを選択した際にとても Cool なプレビューが表示されたりするのですが、 今回は CSV ファイルをアップロードするという用途に限定したいと思います。 気になる方は公式の デモ をご覧ください。 Bootstr
Bootstrapと連携できるX-editableというUIツールが結構いい | hirobanex.net
X-editableというBootstrapとかJQuery UIとかのプラグイン的に使用するものがあって、これを使うとかなり使いやすい編集フォームを作ることができるので、そのご紹介。 登録されたデータを編集するときにいちいち編集用のフォームに行って、変更内容をバリデータに流してほげほげってするのってけっこうめんどい。特にURL名も、form/createとかform/updateとかただ、formにするとか、考えるのめんどいし、作成と編集を一緒にしてformとかした場合も、コントローラーの部分が肥大化してきもい。 ケースバイケースで使えないところもあるのも当然だけど、ひとつひとつ編集したときにバリデーション→更新となるのでとても安心感があるしわかりやすい。 X-editableをAmon2::Liteでサンプル作ったので、Perlユーザーならすぐに呑み込めるようにしておきました。 参考U
Bootstrapを使った管理画面テンプレートをまとめて紹介
Webベースの業務システムを開発する場合、えてして管理画面が必要になります。とは言え、ユーザ向けの画面であればともかくシステム管理者や開発者だけが触る画面に対してあまりユーザビリティの高いUI/UXが提供されることは多くありません。 そこで使ってみたいのがBootstrapです。同じように考える人たちは多く、Bootstrapを使った管理画面テンプレートは実に数多く存在します。ぜひ好みにあったものを選んで、使いやすい管理画面を構築してください。 SB Admin 2 大きなアイコンが印象的なダッシュボードです。グラフ、テーブル、フォームなどの機能があります。 SB Admin 2 – Free Bootstrap Admin Theme – Start Bootstrap AdminLTE 地図のグラフやメニューへのバッジ表示、ツールバー部分のアイコンなどの機能があります。 Free Ad
BoostCake - Bootstrap3 examples
Default styles Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls. Legend <?php echo $this->Form->create('BoostCake', array( 'inputDefaults' => array( 'div' => 'form-group', 'wrapInput' => false, 'class' => 'form-control' ), 'class' => 'well' )); ?> <fieldset> <legen
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
| :
ENTEREAL
HugeDomains.com
ブートストラップスターターテンプレート
Bs3 Document