Bootstrapの実際のページ表示を確認しながら、リアルタイムに簡単にカスタマイズできるオンラインツールを紹介します。 カスタマイズにはスタイルシートの知識はあまり必要なく、直感的にできます。もちろん知識がある人はより高度なカスタマイズが可能です。
Bootstrapの実際のページ表示を確認しながら、リアルタイムに簡単にカスタマイズできるオンラインツールを紹介します。 カスタマイズにはスタイルシートの知識はあまり必要なく、直感的にできます。もちろん知識がある人はより高度なカスタマイズが可能です。
次のようにtr要素にこれらのclassを指定することで、行自体に背景を敷くことができます。 <tr class="active"> ... </tr> <tr class="success"> ... </tr> <tr class="warning"> ... </tr> <tr class="danger"> ... </tr> <tr class="info"> ... </tr> また、thまたはtd要素に指定すれば、セル単位で背景を変更できます。 <tr> <td class="active"> ... </td> <td class="success"> ... </td> <td class="warning"> ... </td> <td class="danger"> ... </td> <td class="info"> ... </td> </tr> レスポンシブテー
Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう! 白石 俊平(HTML5 Experts.jp編集長) 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ! Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today, on the two year anniversary of releasing Bootstrap to the world, we’re shipping Bootstrap 3.0. It’s been a crazy long ride to say the least and we’re stoked to finally have this out in the wild. Thanks to everyone who’s tested our RCs (er, betas), reported bugs,
50 Awesome Twitter Bootstrap Templates フリー&プレミアムなTwitterBootstrapテーマ50 Bootstrapベースとはいえ、Bootstrap臭があまりしないテンプレートが多数まとまっています。 通常サイトや管理画面等のテンプレートがまとまっていて、活用してサクっと仕事を終えられる事もあるかも Bootstrapの便利さを享受しつつ、うまくサイトデザインする際の参考にもできそうです 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」
WordPressで作られたブログをTwitter BootstrapでレスポンシブWebデザインにしてみた!Adsense対応も! 今日の夕方、Webデザイナーの方と最近のjQueryやらレスポンシブWebデザインの話とかしていました。特にレスポンシブWebデザインは3人ぐらいと話をしていて、自分もいずれこのブログのリニューアル時に導入したいと思って居ました。 そんな話をしていて「今日はこれからレスポンシブWebデザイン勉強するわ」と夕方宣言して、勢いでこのブログのリニューアルをしました。勉強からAdsense対応まで実質3,4時間ぐらいでやっつけで終わらせてIEにまだ対応していないのはここだけの話です(笑)。 まずはレスポンシブWebデザインについておさらい なにはともあれ、なんとなく知ったつもりになっていることでも一応網羅的に一通りどんなものだったか復習したく参考サイトを見てました。
BootstrapっていうCSSフレームワークが最近話題になってますね。Twitter謹製のフレームワークだそうで。確かにTwitterっぽいデザインをやりたいときはこれ、かなり便利だと思います。Webアプリとかにはいいですね。 ただ、いきなりHTML書いたりCSS書いてってやるのも僕はしんどいので、Bootstrapのパーツなどが入ってるPSDとかAIとかFireworksPNGとか探してみました。 Bootstrap PSD v1.0 http://gui.repixdesign.com/#freebies Twitter Bootstrap Illustrator file http://checkthis.com/6i6g/ Twitter Bootstrap 1.4 Assets http://fireworkswireframingkit.com/2012/02/02/twit
<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい!!コードを見せるならこれがよさそうですね! さて、かっこいいGoogle Prettifyですが、こ
BootstrapWP Bootstrap starter theme for WordPress TwitterBootstrapを使ったWordPressテーマ「BootstrapWP」。 最先端っぽい感じでブログを作りたいなら今ならこのテーマがいいかもしれません。新しい要素を追加する際にもスタイリングが簡単ってことで便利かもですね TwitterみたいなところがこういうUIキットを出したことってやっぱりすごい大きな事ですよね。 関連エントリ 新しめのWordPressテーマ40 使うっきゃないレスポンシブWEBデザインなWordPressテーマ25 フレッシュでハイクオリティなWordPressテーマ15種
Bootstrap Image Gallery Twitter Bootstrapを使ったイメージギャラリーサンプル Bootstrapを使った実際に動くアプリケーションをオープンソースソフトとして入手できます。 TwitterBootstrapのサンプルと併せて使うと有用かもしれませんね。 画像のスライドショー機能。BootstrapのUIにすることでかなりすっきりしたデザインで好印象を与えられそう Bootstrapで実装したサイトは似たりよったりになってしまうという問題もはらんでいますが、こうしたライブラリは今後沢山出てきたり、Bootstrapをベースにしたテーマっぽいものも多く出てきそうです エンジニアにとっては、よりサービスを作りやすい環境が整っていっています 関連エントリ 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「j
Twitter Bootstrapじゃなくfacebook Bootstrap?「Fbootstrapp」 2012年03月05日- Fbootstrapp by Clemens Krack, based on Bootstrap, from Twitter Twitter Bootstrapじゃなくfacebook Bootstrap?「Fbootstrapp」 Twitterじゃなくてこれからfacebookでしょ、と電車の中で聞きました。 そんな方にはTwitterBootstrapをベースとして作られたFbootStrappがよいかもしれません。おもいっきりfacebookライクなサイトを作ることができます。 facebookを扱うサイトでは使えそうです 関連エントリ FacebookスタイルのシンプルなドロップダウンをjQueryで実装するサンプル Facebookのタイムライン
はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発/提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at
今日もTwitter Bootstrapの話。やっと 出たって印象でしょうか・・デザイン を変更できるWebサービスです。こうした 人気のフレームワークでこのように デザインを変更できるのはありがたい ですねー。 人気のTwitter Bootstrapのデザインを直感で作成出来ます。自分で変更を加えるのは若干面倒なのでこれで大まかに作ってしまえば工数削減に繋がるかもですね。 StyleBootstrap.info 直感でサクサク作れます。Bootstrapみたいなフレームワークをご存知の方ならこういうの触った経験ある方のほうが多そうですので使い方は割愛します。 背景とかフォントとかボタンの色を変えられる、みたいなやつ。リアルタイムで反映されるので確認も楽でした。 以下のようなものを数分で作成出来ます。 やっつけ仕事でごめんなさいwボタン周りはグラデーションで作れるようになってますね。 要
この解説ページ群の目次 url トップ(このページです) bootstrapの概要「等」 入手と設置(install) http://d.hatena.ne.jp/end0tknr/20111016/1318730072 グリッドシステム http://d.hatena.ne.jp/end0tknr/20111016/1318731266 (固定/可変)レイアウト http://d.hatena.ne.jp/end0tknr/20111016/1318732238 テキスト(ヘッダ, リスト, インラインラベル) http://d.hatena.ne.jp/end0tknr/20111016/1318750736 テーブル http://d.hatena.ne.jp/end0tknr/20111016/1318777018 フォーム、ボタン http://d.hatena.ne.jp/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く