技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

HOME > 花のやブログ > twitter bootstrapのちょっとしたtips input-group編
2014/04/18HTML/CSSJavaScript

twitter bootstrapのちょっとしたtips input-group編

こんにちは。

本日は事務所のレイアウト変更をしておりました。
少しずつ色々なものが揃ってきています。次はもっと広い所へ

閑話休題。

今回はtwitter bootstrapのちょっとしたtipsを紹介します。

twitter bootstrapとは

体系化されたclassを設定していくだけでレスポンシブなバックエンド画面を簡単に作れるようになるエンジニア向けのツールです。
ウェブフォントを使ったアイコンもたくさん準備されているので、デザインができなくてもHTMLとCSSを駆使して簡単にデザインができます。

twitter bootstrapのtips

bootstrapはある程度の事が簡単にできますが、ちょっと変わった事をやろうとするとハマります。
この辺りはフレームワークを使っていてもそんな感じですが
今回はそのちょっとハマるのを回避しようという備忘録です。

bootstrapのページの解説にinput-group内で
selectはクロスブラウザではできないよと書いてある通り、input-group内でselectタグを使用すると

inputgroup01

こんな感じになってしまいます。

で、どうすればいいのかといいますと
間にinput-group-addonをかませてしまいます(ただそれだけ)。

inputgroup02

こんな感じにきれいに収まりました。

wada

書いた人:wada

エンジニア担当の和田です。
ボウリングの機械のメカニックから、漆を塗ったりトラックの運転手をしたりと
紆余曲折ありましたが最終的にプログラマーへと転職してしまいました。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ