Big Badass Bootstrap List
Docs and Articles Get started, educated and secure. Components Additional Bootstrap specific addons to supplement the base Bootstrap features Display BOOTSTRAP-MAXLENGTH Uses badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. WATABLE a pretty decent jQuery table plugin BOOTSTRAP-TIMEPICKER A simple timepicke
#328 Twitter Bootstrap Basics - RailsCasts
<!DOCTYPE html> <html> <head> <title>Store</title> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <![endif]--> <%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class
railsでbootstrapを使うためのtoolまとめ
ガリレオスコープ開発チームによる �最新Web動向、技術メモ ( Ruby, Rails, node.js ) です node.jsでは、twitter bootstrapを愛用していました。 http://twitter.github.com/bootstrap/ 久しぶりにRailsでアプリケーションを書くことになったのですが、 やはり、そこはbootstrapを使いたい。 そこで、rails用にbootstrapのtoolを調べたので紹介。 twitter-bootstrap-railshttps://github.com/seyhunak/twitter-bootstrap-rails BootstrapをRailsのasset pipelineに簡単に組み込めます。 Githubで調べたら最初にでますね。 less-rails-bootstraphttps://github.co
sass-rails-bootstrap を使ったら職が(ry - ぶろぐ。@はてな
twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - pblog twitter-bootstrap-railsがとても便利そうです。generatorでレイアウトの雛型が用意されてるのもすばらしい。 でもやっぱりLESSじゃなくてSassを使いたいんですよね。 ということでsass-rails-bootstrapというのを見つけたので、使えるかどうか同じ手順で試してみました。 railsアプリを作りましょう。 rvmでgem set作ります。 rvm --create 1.9.3-p125@tbrsamplerailsアプリ生成します。 gem install rails --no-ri --no-rdoc rails new tbrsample twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3
自分でできるデザイナーズ・サイト、Bootstrapをさらに簡単に最速でUIを構築できる「Jetstrap」は全てのウェブ制作関係者必携サービスとなるか 【増田 @maskin】 | TechWave（テックウェーブ）
「アイディアはあるんだけど、モックすら作れないIT起業家」「“UIだけなら自分で作れる” とやってみたけど、見にくいページにしかならない、どうしよう、、、」。高度なテクニックは不要、でも、やっぱりデザイナーさんに依頼しないといけないシーンが多いこの業界。 しかし、「Twitter Bootstrap」(以下 bootstrap)の登場により、多くの人がデザイン性の高いページデザインを短期間で作れるようになり世界は変わった。bootstrapは、プログラマーやディレクターなどが、最低限のコードの組み合わせでスッキリと解りやすいユーザーインターフェイス(UI)を構築できるライブラリ(支援プログラム群)のこと。 Bootstrapの登場で、スタートアップはスピーディにページを作りあげ、プログラマーは必要なページを “とりあえず” 作っておくくらいのことをするのが手軽になった。ただ、bootstr
Twitter Bootstrap＋その他で「本当に」イケてるモックを作る手順
こんにちは、 6月に入社したR＆D部の@benzookapiです。 前職はi18nを専門に、JavaやPHPでいろんなwebやクライアントソフトウェアを作ってました。 ブログデビューの今回ですが、意外と情報が不足している Twitter Bootstrapを使った、「本当に」イケてるモック※を作る手順について書きたいと思います。 ※モックとは、携帯電話の見本用の模型などの意味で、ここではWebアプリにおけるデザイナーさんに発注する前の仮画面といった意味で使ってます。 Twitter Bootsrapはいわずもがな手軽にイケてるページを作成できるフレームワークで、解説サイトなどを読むと「おーすげー、こんなかっこいいサイトがたったこれだけでできるんかい」とCSSいじるのがめんどくさい自分のようなエンジニアは感動してしまうのですが、いざそれを実際に開発するアプリに使おうとすると、実は色々不満が出
Kickstrap: Enhancements for Bootstrap
Kickstrap A full version of Twitter's Bootstrap with themes, enhancements, and other goodies. Issues · · Follow @yourwebsitesUX Tweet Release Candidate due April 15th Kickstrap v. 0.9 RC will be released April 15th. Until v. 1.0, I recommend only using Kickstrap in development environments. There will be several modifications made to the overall logic of Kickstrap's implementation and workflow dur
200を越えるアイコンが揃ったBootstrap向けWeb Font·Font Awesome MOONGIFT
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
20+ Awesome Resources for Bootstrap Lovers
Bootstrap has simply exploded in the web development community. There will always be skeptics and haters but on the whole, the project has been a smashing success and can constantly be seen at the top of the Forked and Watched charts at GitHub. As a result of Bootstrap’s fame, lots of great related resources have been put forth by the development community. Today we’ve collected our favorites into
Twitter の bootstrap を使ったメモ
ドキュメント自体が bootstrap で作られていて、それがサンプルも兼ねていてそっから少しいじったメモ。以下、bootstrap の version 1.2.0 での話です。 使い方 bootstrap を使用しようとすると２通りの方法があります。 1. less.js を使用し less ファイルを読み込む方法。(こんな感じ)(※1) 2. css をファイルを読み込む。github に置かれています。 (※1)sass 的なやつです。less ファイルをコンパイルして css ファイルを作ることもできます。 これは npm でインストールする必要があるので node 環境が必要になってきます。 less と sass が分からない場合は”CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較“がわかりやすかったです。 画面上を16カラムで分割されていて、そこをどう使うかでレ
Twitter風デザインで作れるBootstrapで作成されたサイトを紹介Built With Bootstrap | A!@attrip
初めて当ブログに訪れた方や何度か当ブログにお越し頂いている皆様。気に入って頂けましたらGoogle+もしくは、RSSリーダーの登録よろしく。 メールで購読するには、下記にメールアドレスを入れてください。 無料で一日分をまとめて読めます。@attripをフォロー 関連記事 地域情報ポータルサイトe-まちタウンTOPに紹介キャラクタのtwitterが出ました！ 墨田区タウン 地域情報ポータルサイト.とか 他の一部地域に実験的にtwitterウィジェットができました。 こんな時に活用していただければいいかと思います。 墨田区にいったけど、こんなお店ないかな？ 検索してもみつからな [...]... さぶみっと！コンペ│WEBデザインやコピーライティングのコンペサイトの紹介 こんにちは！attripです。 今月からのお仕事で、まだあたふたしています。 早速ですが、今のお仕事で見ている紹介を連載
Bootstrap Registration Form Tutorial.
This post is a continuation of my previous post Bootstrap tutorial for blog design and already explained about fluid page design. Today let's look at the form HTML elements that comes with Twitter Bootstrap toolkit using these I made a rich registration/sign up form with validation in 10 mins . Bootstrap helps you to produce clean and highly usable applications, it will reduce larger engineering e
Kickstrap: Enhancements for Bootstrap
Kickstrap A full version of Twitter's Bootstrap with themes, enhancements, and other goodies. Issues · · Follow @yourwebsitesUX Tweet Release Candidate due April 15th Kickstrap v. 0.9 RC will be released April 15th. Until v. 1.0, I recommend only using Kickstrap in development environments. There will be several modifications made to the overall logic of Kickstrap's implementation and workflow dur
Bootstrapを使おう！様々なカラーテーマ、プラグインを用意·Kickstrap MOONGIFT
KickstrapはBootstrapをベースにしたテーマ、プラグインを提供するソフトウェアです。 最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマも。 逆にカラフルなものもあります。 基本は同じですが、印象は違いますね。 好みのテーマを選べます。 JavaScriptプラグインがデフォルトよりもぐっと増えています。 Kickstrapを使えばBootstrapをより便利に使えるでしょう。JavaScriptプラグインも通知機能をはじめ、色々なものが追加されていますのでWebサイトをより強力にパワーアップできるはずです。 KickstrapはHTML
Datepicker for Bootstrap, from Twitter
About Add datepicker picker to field or to any other element. can be used as a component formats: dd, d, mm, m, yyyy, yy separators: -, /, . Download Change log 12/3/2013 Fixed bug where date selection from previous and next year was wrong Fixed bug where a variable was polluting the namespace 10/3/2013 Changed so the value will not be set unless the user chooses a date 16/2/2013 Fixed it to work
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.2 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
CakePHP1.3でBootstrap, from Twitterを使うためのたった2つのファイル - 忍び歩く男 - SLYWALKER
CakePHP: the rapid development php framework. Pages Bootstrap, from Twitter Bootstrap, from TwitterをCakePHP1.3で使う際、ほとんどはHeplerのOption指定でなんとかなる。 しかし、どうしてもなんともらんところがあるので、2つほどファイルを追加した。 Pagination views/elements/pagination.ctp 普通にpaginationを表示させたいところで <?php echo $this->element('paginate'); ?> Forms views/helpers/bootstrap_form.php 基本的に <?php echo $this->Form->input('name'); ?> のところを <?php echo $this-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイトをリリースしました
Twitter Bootstrapで作られた、秀逸なデザインのWebサイト集
StyleBootstrap.info: Twitter Bootstrap Theme Generator