GitHub - jquery-ui-bootstrap/jquery-ui-bootstrap: A jQuery UI theme based on Twitter Bootstrap
#jQuery UI Bootstrap (v 1.0 Alpha) This project was started to bring the beauty and ease-of-use of Bootstrap to jQuery UI widgets ♥. ##Why? Bootstrap is one of our favorite projects, but having used it regularly it left us wanting two things: The ability to work side-by-side with jQuery UI (something which caused a number of widgets to break visually) The ability to theme jQuery UI widgets using B
ノンデザイナーな自分がweb開発に最早必須になっている「twitter bootstrap」 そんな twitter bootstrap を更に便利に使うためのサイトを自分のメモがてらにまとめてみようと思います。 2013/01/13 Bootstrap Tour を追加しました。 twitter bootstrap の基礎（ドットインストール） youtubeを使ってプログラミングを懇切丁寧に教えてくれる ドットインストール さんの「twitter bootstrapの基礎」レッスンです。 そもそも、twitter bootstrap ってなに？って所から初めてくれるのでプログラミング初心者の方に最適です。 自分も手っ取り早く学びたい時には、色々なサイト調べるより解りやすいのでよく利用させて頂いてます。 twitter bootstrapの基礎 twitter bootstrap の便利
こんにちは、@9ensanです。 Webサイトを作る際、「TwitterBootstrap」を利用している方も多いかと思います。 そのTwitter Bootstrapの中で、利用することが可能な「Icons」これが画像ファイルで作成されている為に色を変更する事が容易ではありません。 以前、Twitter BootstrapのIssueでも「Twitter Bootstrapの3.0からiconはfontになるよ」と書かれていたので3.0からは色を自由にスタイルシートで変更できるようになるみたいです。 ですが、今すぐに変更したい場合困ります。ということで、今のIcon画像をWebFontに変更する手順を紹介します。 今回使用するWebFontは「FontAwesome」です。 Twitter Bootstrapに利用されているIconのFontは全部揃っています。 それでは手順です。 Tw
私はtwitter-bootstrap-railsでTwitter Bootstrapを導入したので、Twitter Bootstrap自体は/usr/local/rvm/gems/Rubyのバージョン@Gemセット名/gems/twitter-bootstrap-rails-2.1.3/ にある。 vendor/toolkit/twitter/bootstrap/variables.less：lessで使われている変数の定義ファイル CSSでどういうクラスが定義されているかを調べるとき Twitter BootstrapのScaffolding、Base CSS、Componentsを読む。ソース＆見栄えつきなので英語がわからなくても眺めればわかる Built with LESS RailsアプリへのTwitter Bootstrapの導入方法を調べるとき ppworks blog：tw
2012年 Twitter Bootstrap関連記事のブクマ数ランキングTOP30を作ったよ。 - 小さい頃はエラ呼吸
はじめに プログラムもWebデザインも両方できるエンジニアって、現場のスーパーマンみたいで、カッコ良いですよね。 プログラムはさくさく書けるけど、Webデザインはちょっと苦手...というエンジニアの方には、Twitter Bootstrapというフレームワークをオススメします。 Twitter Bootstrapを使うと、簡単にモダンなWebサイトを作ることができます。 jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at 12.12.22 エムディエヌコーポレーション 売り上げランキング: 22,598 Amazon.co.jp で詳細を見る Twitter Bootstrapについて Twitter Bootstrapはその名のとおり、Twitter社が提供するフレームワークで、2012年の初頭にバージョン2がリリースされました
Rails で twitter bootstrap を使うときの備忘 - Forever Undecided
rails で twitter bootstrap を使おうとすると、エラーメッセージが綺麗に表示されないので、どうするかのメモがき Railsが規定で用意している error タグを抑止 application.rb に以下を追記するだけ ActionView::Base.field_error_proc = Proc.new { |html_tag, instance| html_tag } これでエラーになった項目が <div class="field_with_errors"></div>で囲まれることがなくなります。 自前で error を追加する そのままだと、エラーの項目がまっさらになってしまうので、自前で _form.html.erb などで <div class="control-group <%= @member.errors[:name].empty? ? '' :
GitHub - Nerian/bootstrap-datepicker-rails: A Datepicker for Twitter Bootstrap, integrated with Rails assets pipeline
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Today, let's look at the grid system that comes with Twitter Bootstrap and we'll take a look at their media grid while we're doing so. In the process we'll build ourselves a nice little mockup for a portfolio page. Note: The grid we're working with today comes with the Bootstrap release current at the time of publication: 1.4.0. Get the Code We'll start with these files, based on where we ended wi
Twitter BootstrapでWebサイト構築したいなあって人はこれ見とけばいいかもしれないよ的なまとめを作る試み - ゆうなんとかさんの雑記帳的な。
最近はやってますよね、Twitter Bootstrap。もっと早く知っていたらきっとしあわせになれたんじゃないかなって人も多いと思います。ようやくかよ(笑)とか言わないでくださいお願いします そこで、Twitter Bootstrapを使うために回るといいよっていうサイトをいくつかご紹介。 用意する いざ使うとなっても、モノがないと話になりません。公式サイトから引っ張ってきてもいいのですが、それだとちょっとナンセンスかなーってお思いの方はこちらへどうぞ。 HTML5 Initializer このサイトはマウスをぽちぽちするだけで超簡単にTwitter Bootstrapの準備ができます。 一番右の「Bootstrap」をクリックすると細かいチューニング画面が出てくるので、気の向くままにﾌﾝﾌﾌﾝと必要なものやら気になるものやらを選んでいき、あとは「Download it!」をクリックする
Category Direction Design Markup Develop Others Tag Ai application CSS Dreamweaver Google Analytics IA icon illustrator JavaScript jQuery jQuery Mobile photoshop Photoshop Pinterest Ps rich SNS tutorial Twitter Bootstrap UI UX WebNAUT WEBディレクション なめぱら はじめて アクセス解析 アンケート調査 インタビュー オリンピック サンプル有 ショートカット スキルアップ スケジュール スマートフォン ツール ディレクター デザイナー デザインプロセス プロジェクト管理 モバイル ランキング レスポンシブ ワイヤーフレーム ワークフロー 企画 情報共有 情報
Twitter Bootstrap上でJQuery UI Datepickerを使用する際の問題 – 大阪のシステム開発・WEBシステム開発会社技術担当スタッフの覚書き、子だぬきの技術習得ノート
Twitter Bootstrapは単純なデザイン性から一歩進んだコンポーネントまで提供してくれる、WEBアプリケーション開発者にとって心強いフロントエンドフレームワークです。 Twitter Bootstrap http://getbootstrap.com/ 個人的にはTwitter Bootstrap + JQueryを使用すればかなり柔軟なUIを構築できると感じていますが、ひとつ大きな問題があります。 それは、 JQuery UIとの共存が難しい ということです。 Bootstrapはcssだけでなくコンポーネント等の機能はJQueryで作成された基本ライブラリの読み込みが必須ですので、Bootstrapを使用する場合はTabやDialogといった機能はできるだけ最初からBootstrap標準のものを使用するのが良いと思われます。 ただ、datepickerに関してはJQuery
Grails Twitter Bootstrap Scaffolding
Application Status App version: 0.1 Grails version: 2.0.0 Groovy version: 1.8.4 JVM version: 1.6.0_24 Controllers: 2 Domains: 1 Services: 3 Tag Libraries: 22 Installed Plugins logging - 2.0.0 i18n - 2.0.0 core - 2.0.0 groovyPages - 2.0.0 codecs - 2.0.0 fields - 1.0.1 cloudSupport - 1.0.8 jquery - 1.7.1 svn - 1.0.2 resources - 1.1.6 dataSource - 2.0.0 urlMappings - 2.0.0 servlets - 2.0.0 controller
GitHub - vwall/compass-twitter-bootstrap: The twitter bootstrap ported to compass
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ASP.NET MVC4とTwitter Bootstrapを組み合わせる（Twitter.Bootstrap.MVC4を使ってみた）
ASP.NET MVC4とTwitter Bootstrapを組み合わせる（Twitter.Bootstrap.MVC4を使ってみた） 0.前置き 以前、「HTML・CSSデザインフレームワークを使ってみた」というポストを書きました。 こういったデザインフレームワークをWebアプリケーションフレームワークと組み合わせるときに、 少しだけですけど面倒な時があります。 ASP.NET MVC4でも同じです。テンプレートページを作るのとか…。 1.Twitter.Bootstrap.MVC4の紹介 今回紹介するTwitter.Bootstrap.MVC4は、ASP.NET MVC4とTwitter Bootstrapを組み合わせる機能（ツール、テンプレートなど）を提供します。 作者による紹介ページは、「Twitter.Bootstrap.MVC4; the Bootstrap package f
How to make Twitter Bootstrap menu dropdown on hover rather than click
I'd like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.
#01 Twitter Bootstrapとは何か？ | 【旧版】Twitter Bootstrap 2.1入門 - プログラミングならドットインストール
動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
Less · Twitter Bootstrap 2.0.4 Documentation - BootstrapDocs
Why LESS? Bootstrap is made with LESS at its core, a dynamic stylesheet language created by our good friend, Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun. What's included? As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.
これまで紹介してきたTwenty ElevenをTwitter Bootstrapでカスタマイズする方法をまとめてみます。それぞれ導入すれば、Twenty Elevenテーマに個性をプラスできるんじゃないでしょうか。もちろん、他のテーマであっても同様の方法で導入できると思います。その際は、CSSやPluginの競合に注意してください。 このカスタマイズでは、プラグイン WordPress Twitter Bootstrap CSS（紹介記事） Enhancing CSS（紹介記事） Enhancing JavaScript（紹介記事） を使っています。その他はテーマファイルにコードを追加することで実現しています。 まずは、Bootstrap自体の導入からです。 Twitter Bootstrapを使えるようにする » 最新Twitter Bootstrapを一発で導入しちゃうWordPre
lambda me : Play2 で Twitter Bootstrap を使ってみる - Playframework2
これをやりたい Playframework2アプリケーションにTwitter Bootstrapを導入して、見栄えを良くしていきたい。 特に始めは@formタグ辺りの見栄えを改善したい。 スペック Playframework : 2.0.1 Twitter Bootstrap : 2.0.3 まずは結果のキャプチャ Twitter Bootstrapを導入したらこうなった。 ※導入だけで、カスタマイズはしていない。 ＜導入前＞※縦にズラーっとlabelやらinputやらhelpテキストが並んでいた。 ＜導入後＞※綺麗に並んでくれた。 こうやった Documentation : ScalaFormHelpers - Playframeworkによると、「これimportするだけでBootstrap使える」って書いてある。 @import helper.twitterBootstrap._ こ
Twitter’s “Bootstrap” is a HOT topic, especially in the Sass community. Sadly, they used LESS instead of Sass. Well, fellow staff member John W. Long changed that with Sass Twitter Bootstrap. bootstrap.scss Thanks John for stepping out and porting this for all of us Sass-lovers to enjoy! /*! * Bootstrap v1.1.0 * * Copyright 2011 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.ap
CakePHP+Twitter Bootstrapでページネーション - さいたま産エンジニアの覚え書き
環境 CakePHP : 2.3.6 Twitter Bootstrap : 2.3.2 デフォルトの表示 CakePHPのPaginatorをパラメータなしで表示すると Twitter Bootstrapのデザインが反映されず、下のように残念な感じになります。 解決策 Paginatorは多様なパラメータを持っており、 それらを活用することで、Bootstrapに対応することが出来ます。 今回は、次のコードのようにパラメータを設定しました。 パラメータの詳細は、公式ドキュメントをご覧ください。 結果 おお、ちゃんとTwitter Bootstapになってますね！
GitHub - bobrik/pupergrep: Real-time grep for your logs right in your favorite modern browser made with Twitter Bootstrap.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Form inline inside a form horizontal in twitter bootstrap?
What's the best way to design a form that looks like this (please see link below) in twitter bootstrap without any homemade classes ? Is it possible to set a inner form-inline inside a form-horizontal like the below example:
tl;dr - TWBSColor - Generate your own Bootstrap navbar Version notes: Online tool: Bootstrap 3.3.2+ / 4.0.0+ This answer: Bootstrap 3.0.x For Bootstrap 5.x, please check documentation Available navbars You've got two basic navbars: <!-- A light one --> <nav class="navbar navbar-default" role="navigation"></nav> <!-- A dark one --> <nav class="navbar navbar-inverse" role="navigation"></nav> Default
Twitter Bootstrapには常日頃からとてもとてもお世話になっています。最近、Twitter bootstrapからフォークして誕生したGoogle Bootstrap。両者の違いをまとめました。気分によって使いわけよう。 リンク Twitter Bootstrap – Twitter Bootstrap（本家） Google Bootstrap – Google Bootstrap（TBからフォーク） 超便利！Twitter BootstrapでさくさくWeb開発 – 会社で書いたTB紹介記事 Overview 基本的なところはだいたい同じ。 Google Bootstrapが拡張した部分について、特に本記事にまとめています。 Twitter Bootstrapのほうが、色味が薄く、padding や line-heightをとっており、余裕があるデザイン。ボタンやフォームは角
「Twitter Bootstrap」は、Twitter社が提供しているフロントエンドフレームワークです。デザインが本業ではないエンジニアでも、「Twitter Bootstrap」を利用するだけで、簡単にTwitterのようなデザインのWebサイトが出来上がります。 Twitterの綺麗で使いやすいインターフェイスを簡単に導入できるのは、大きな魅力です。 Twitter提供なので、PC・タブレット・スマートフォンに対応したレスポンシブCSSです。もちろん固定幅にも設定できます。IEは7以上の対応になります。 導入ももちろん簡単です。 「Bootstrap（http://twitter.github.com/bootstrap/index.html）」からコンパイルされたセットがダウンロード出来ます。 ファイル構造は下図のようになっています。 あとは、別途jQueryをダウンロードして、C
ナウでヤングだと巷でウワサのデザインフレームワーク「Twitter Bootstrap」を使ってみました。 Twitter Bootstrapってなに？ Bootstrap CSSとJavaScriptからなるデザインフレームワークで、Twitter風のナイスなデザインが手軽に作れると評判です。2012年2月にメジャーバージョンアップが実施されて凄まじいことになってて感動必至らしいです。 既存ページに適用してみた サンプルをみてても楽しくないので、先日作ったモバマスのライブユニットメーカーに適用してみました。 お、それっぽい。 やってみて気づいたこと 既存ページに適用したせいもあるんですが、わりとめんどくさかったです。 マークアップやり直し 当たり前なんですがフレームワークに合わせてマークアップをやり直しました。クラスやIDも付け直しです。汎用性を持たせるためなんでしょうけど、やたらdiv
Python Bottle Framework + Twitter BootStrap + MySQL ベース環境 | Linux & Open Source 実験サイト
いろいろな開発で利用できるPython Bottle Frameworkの初期開発環境パッケージを作ってみた。Apache WEBサーバで動作するように作成していますのでご参考ください。Bottleは使った感じがFlaskに似ています。Flaskを使っていた時期もありましたが今はBottleをメインで使っています。 そもそも毎回環境作っていると面倒くさいので最低限の機能をまとめてみました。 ワタシ的には、WEBシステムの開発依頼を受けるとほとんどは、Python Bottleで間に合っています。まれに規模が大きい時はPyramidを使う時はありますが割合的にはPyramidを使うのは２割程度で８割がBottleです。Bottleに必須で足りないのは認証とPagerとメールくらいです。これが揃えば簡単に短期間でプロトタイプが作れます。たまに事情的にPHPで仕事依頼を受ける時がありますが、結構
新説 Twitter BootstrapでWebサイト構築したいなあって人はこれ見とけばいいかもしれないよ的なまとめを作る試み - ゆうなんとかさんの雑記帳的な。
以前似たような記事を書いてからもうすぐ1年。その間Webデザインも様々なトレンドが駆け巡り、Bootstrapも周辺サービス、カスタムスタイルが新たにいくつも出てきました。以前と若干かぶるところはあるだろうものの、ご紹介しようと思います。 まずはいまさらかと思いますが概要から BootstrapとはTwitterが作っているCSSフレームワークです。これを使うことで、凝ったことをしなくてもあっというまに整ったWebページを作ることができるという代物。マルチカラムもレスポンシブデザインも簡単にできるステキツールです。 公式ページとドキュメントはこちらから。 用意する ではそんなBootstrapはどこで手に入るのでしょうか。 公式から手に入れる まずは公式から。トップページからは素のままのBootstrapを手に入れられるほか、細かなカスタマイズをした上で手に入れることもできます。 他のとこ
Twitter Bootstrapを利用しているおしゃれな海外スタートアップをまとめました。 - スカイプ英会話を運営してみてのあれこれ
2013-02-20 Twitter Bootstrapを利用しているおしゃれな海外スタートアップをまとめました。 プログラマやデザイナーの方であれば、Twitter Bootstrapの名前はご存知の方が多いかと思いますが、実際に使われているサイトのことはあまり詳しくない方も多いのではないでしょうか。 そこで、本日はTwitter Bootstrapを利用しているおしゃれな海外スタートアップを紹介したいと思います。 1. Pulse: https://www.pulse.me/ PulseはiPhoneアプリやiPadのアプリでおなじみの、Newsフィード購読サービスです。 同じジャンルのサービスではFlipboardが一番有名だと思いますが、個人的にはPulseのUIが好きでメインで使っています。 2. wanderable: https://www.wanderable.com St
IE9,IE10でサイトが表示されない（ローカルでも、リモートでも）関連：Twitter Bootstrap、WordPress | 福岡市・大村市のホームページ制作・作成「二角形」のブログ
IE（InternetExproler）での表示をローカルで（リモートも）確認しようとしたら全く何も表示されない！ 「～問題が発生したため、互換表示を使って～」 という警告（お知らせ）が出ました。 IE9およびIE10は、 下記のような謎の仕様になっていることが判明しました。 皆様ご注意ください。 バグ発生条件 １）Helvetica（Helvetica Neue）をインストールしたPCである ２）cssのfont-familyで、Helvetica（Helvetica Neue）を指定しているサイトである ↓↓↓ IE9およびIE10で、表示できない。（バグ） 解決方法は、 CSSのfont-familyの指定で Helveticaより前に、別のフォント（arialなど）を指定してあげることです。 例えば、下記のように。 body{ font-family: Arial
Twitter Bootstrapを導入したのにレスポンシブにならない時チェックすべき項目 : Strings of Life
<meta name="viewport" content="width=device-width"> ↑がHTMLの<head>内に書いてあるかチェック。 これが入っていないと、iPhone等では解像度(960 x 640等)に従って描画されるので、「Bootstrap入れたのに表示がPCのままだ！」となる。 viewport設定を入れてやると、横幅320pxで描画される。
photoBy: http://otndnld.oracle.co.jp/document/products/owl…sort機能を bootstrap で使ってみるdatatablesを使うhttp://datatables.net/release-datatables/examples/basic_init/zero_config.html にあるものを使ってbootstrapに組み込んでみよう。 まずはダウンロード http://datatables.net/download/ よりダウンロードできます。 twitterbootstrap に組み込むまずは以下のファイルを揃える /media/css/demo_table.css を datatable.css として保存 /media/js/jquery.dataTables.min.js /media/images/ を画像フォル
http://twitter.github.com/bootstrap/ ノーマルは $(function(){ $('.popup').popover() }); という感じ。トリガーをマニュアルにしたい。toggle()を使いたい。 $(function(){ $('.popup').popover({ trigger: 'manual' }).click(function(e){ $(this).popover('toggle'); e.preventDefault(); }); }); という感じにする。これをさらに「popoverを閉じるときに、どこをクリックしても閉じれる」ようにする。 var isVisible = false; var clickedAway = false; $(function(){ $('.popup').popover({ trigger: 'man
StyleBootstrap.info: Twitter Bootstrap Theme Generator
Create unique web design with Twitter Bootstrap. Kw: themes, templates, styles. generator. customize. Works with any version from now! Just add a downloaded file after your bootstrap.css
twitter-bootstrap-rails | RubyGems.org | your community gem host
twitter-bootstrap-rails project integrates Bootstrap CSS toolkit for Rails 7, 6, 5, 4.x (also supports) Asset Pipeline
I've been using jQuery mobile (jQM) to make a mobile-enhanced version of EatDifferent for the past few weeks and though I have much respect for the team behind it, I've grown increasingly frustrated with it. Why? It typically enhances by adding additional DOM elements to the original elements - which can help in making them easier to use on a mobile device, but it means that whenever you want to t
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
210個ものキュートなシンボルフォント!! ls-icon-file ls-icon-print ls-icon-delete ls-icon-clear ls-icon-save ls-icon-upload ls-icon-cloud ls-icon-folder ls-icon-camera ls-icon-photo ls-icon-image ls-icon-barcode ls-icon-phone ls-icon-music ls-icon-video ls-icon-playmedia ls-icon-record ls-icon-play ls-icon-pause ls-icon-stop ls-icon-eject ls-icon-bell ls-icon-volumeup ls-icon-volumedown ls-icon-volume ls-icon-off l
Rails3.2.1 + omniauth + twitter-bootstrap + Heroku + GitHub - I can't change the world.
◆作業ディレクトリ移動cd ~/labo※「/Users/(ユーザ名)/labo」の場合 ◆nokogiriインストールgem install nokogiri ◆Railsアプリ作成rails _3.2.1_ new plutocd pluto ◆Gemfile編集-----# Heroku対応group :production do gem 'pg' gem 'therubyracer-heroku', '0.8.1.pre3' # you will need this tooend # Twitter Bootstrapgem 'twitter-bootstrap-rails' # OmniAuthgem 'omniauth-twitter'----- ◆Gemインストール(Production環境用以外)bundle install --without production ◆
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
twitter bootstrap関連の便利なサイトまとめ | sugerich.com
Twitter Bootstrapのアイコンの色をカラフルにする方法
Twitter Bootstrapメモ - 発声練習
Twitter Bootstrap 101: The Grid | Envato Tuts+
ハッカソンで検証！「Twitter Bootstrap」のメリット・デメリット | Others | WebNAUT
Twenty ElevenをTwitter Bootstrapでカスタマイズのまとめ - はじめよう
Sass Twitter Bootstrap – TheSassWay.com
Change navbar color in Twitter Bootstrap
Twitter Bootstrap vs Google Bootstrapまとめ – ぴいこサーバ
スマートで簡単にWeb開発できる「Twitter Bootstrap」｜株式会社アクトゼロ｜クリエイティブブログ
Twitter Bootstrapを使ってみたよ - まだへいき！
twitter bootstrap table sort機能 | まとめーたー
Twitter Bootstrap popoverのtriggerをtoggleとかに変える | notizbloc
Switching from jQuery Mobile to Twitter Bootstrap
Ruby だけで Twitter Bootstrap コンパイルするやつ
Ligature Symbols を Twitter Bootstrap で使えるようにしてみた。