タグ Twitter Bootstrap
人気順 5 users 50 users 100 users 500 users 1000 users【速攻レビュー】よりモバイルフレンドリーになった「Twitter Bootstrap v4」 | HTML5Experts.jp
Twitter Bootstrapバージョン4アルファ版が8月19日に公開されました。既にご存知の通りTwitter BootstrapはレスポンシブでモバイルファーストなCSSフレームワークです。さっとレスポンシブなサイトを構築するのに多くの方が利用しているのではないかと思います。この記事ではTwitter Bootstrapバージョン4の変更点について、筆者が「これは!」と思ったところをピック... 続きを読む
Twitter Bootstrapの有料/無料テンプレートを配布する・「ShapeBootstrap」 - かちびと.net
ShapeBootstrap ShapeBootstrapはBootstrapのテンプレート配布サイトです。有料と無料のものが用意されていますが、無料版も結構な数があるようです。ダウンロード出来るだけでなく、開発者による販売も可能なので開発者の方にも需要はあるかもですね。開発者は売り手及びアップロードのガイドライン、利用者は買い手のガイドラインが用意されているのでご利用の際はご確認下さい。 Sha... 続きを読む
オープンソースの Twitter Bootstrapのテーマ作成用ライブエディタ・「Cluckles」 - かちびと.net
Cluckles ClucklesはOSSとして公開されているTwitter Bootstrap用のライブエディタです。ファイルを読み込んだり全体やコンポーネントのスタイルを変更したり、CSSのカスタマイズ等が可能で、変更後即反映されます。試しに触ってみましたがなかなか使い勝手もよさ気。細かいカスタマイズは出来ませんので現状はざっくりベースを作る用になりそうですね。ライセンスはMITです。 Clu... 続きを読む
Rails4へTwitter BootStrapの適用方法 - Qiita
source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.1.7' # Use sqlite3 as the database for Active Record gem 'sqlite3' # Use SCSS for styleshe... 続きを読む
sinatra ですぐにアプリケーションの実装に入れるようにするための準備 - Studio3104::BLOG.new
2014-11-04 sinatra ですぐにアプリケーションの実装に入れるようにするための準備 背景 自分が仕事で書く WEB アプリケーションは多くの場合が小粒で、何か書く場合には sinatra を使っています。 さらにテンプレートエンジンは slim で、ビューが必要な場合は twitter bootstrap を使って書きます。 で、新規で何か書き始める時に、それっぽいディレクトリ構成を... 続きを読む
Rails で form_for の submit ボタンに glyphicon を使う | EasyRamble
Twitter Bootstrap 3 では、ビルトインで glyphicon という便利なアイコン素材を使うことができる。使い方は、以下のように CSS の class で指定します。 [crayon-535331ec […] 続きを読む
4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass | mah365
そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。 ソース こちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイス... 続きを読む
【難しく考えすぎ!?】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方 | WEBデザイナーの憂鬱
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる!Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -R... 続きを読む
今日からはじめる!Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜 | Find Job ! Startup
今日からはじめる!Twitter Bootstrap 3入門 〜Webデザイナーのための簡単サイト構築術〜 こんにちは!ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。 Twitter Bootstrapと聞くと、エンジニアやマークアップエンジニアが使うものだと思っていませんか?それは大きな間違いです。コーディングが苦手なデザイナーこそ、一番便利に使えるものなのです。コーデ... 続きを読む
ダウンロードしてすぐに使えるBootstrapのテーマ集『StartBootstrap』 | 100SHIKI
これはすごい便利かも。 StartBootstrapでは、Twitter Bootstrapのテンプレートをダウンロードすることができる。 公式サイトにも多少のサンプルはあるが、ダウンロードしてそのまま使えるテンプレートがあればうれしいだろう。 また種類も豊富で、随時追加されているようだ。その場でプレビューも可能だ。 ちょっとしたサイトだったらここでテンプレートをダウンロードして画像やらテキストや... 続きを読む
Twitter BootstrapやSkeletonなどのCSS,JSフレームワークがプリセットされているMac用HTMLエディタ「TheMaker」850円が期間限定で無料セール中。
Twitter BootstrapやSkeletonなどのCSS,JSフレームワークがプリセットされているHTMLエディタ「TheMaker」850円が無料セール中です。詳細は以下から。 The Maker - CMS@makercmsFor a limited time, get @makercms for FREE! http://t.co/kDGZdO478T2013/09/11 07:49... 続きを読む
ノンデザイナーも必見!Twitter BootStrapの特徴と導入前に確認すべき事 | 株式会社LIG
こんにちわ。アートディレクター兼2児のパパ、長岡です。 毎回子どもネタですが、最近アンパンマンを指さして「パンパーンパン」とそれっぽい発音をしている息子を見て「こいつ可愛いな」と癒されています(笑) 屈託のない笑顔と持ち前のあどけない仕草で、保育園のマダムたちをイチコロ(表現が古い?)にしているそうです。将来がちょっと心配です・・・。 さて今回は、HTML5・CSS3・jQueryを使用したフロン... 続きを読む
ASCII.jp:サンプルで学ぶTwitter Bootstrapの使い方:前編 (1/3)|Webサービス開発者のためのTwitter Bootstrap入門
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとし... 続きを読む
[速報]マイクロソフトがASP.NETでTwitter Bootstrap、Ember.jsなどを採用。Visual StudioではCSS3の対応ブラウザをその場で確認。Build 2013(Day2) - Publickey
[速報]マイクロソフトがASP.NETでTwitter Bootstrap、Ember.jsなどを採用。Visual StudioではCSS3の対応ブラウザをその場で確認。Build 2013(Day2) マイクロソフトがサンフランシスコで開催中のイベント、Build 2013。2日目の基調講演はデベロッパー向けのツールとプラットフォームがテーマになりました。 2日目の基調講演から、Visual ... 続きを読む
[速報]Windows Azure、モバイルサービスでiOSアプリを自動生成。オートスケール機能、Active Directory機能も追加。Build 2013(Day2) - Publickey
マイクロソフトがサンフランシスコで開催中のイベント、Build 2013。2日目の基調講演はデベロッパー向けのツールとプラットフォームがテーマになりました。 2日目の基調講演から、Visual StudioとWindows Azureの新機能を中心にダイジェストで紹介しましょう。 (本記事は「[速報]マイクロソフトがASP.NETでTwitter Bootstrap、Ember.jsなどを採用。V... 続きを読む
ASCII.jp:いまさら聞けない「Twitter Bootstrap」とは? (1/2)|Webサービス開発者のためのTwitter Bootstrap入門
スマートフォンやタブレットの普及によって、いつでもどこでもインターネットにつながるようになり、さまざまなWebサービスをたくさんの人に提供できる環境が整ってきました。それに伴い、中小企業や個人のスタートアップが活発になり、新しいWebサービスが次々と生まれています。 そこでエンジニアの間で関心が高まっているのが、「いかに効率よく開発・制作」し、「アイデアをいかに早く形にして世の中にローンチする」か... 続きを読む
ひと味ちがうTwitter Bootstrapリソースまとめ、UIパーツ編 - 酒と泪とRubyとRailsと
ひと味ちがうTwitter Bootstrapリソースまとめ、UIパーツ編 Apr 4th, 2013 Tweet 以前、Twitter Bootstrapについてのテンプレート(レイアウト)のまとめを作ったところロングテールにはてブしてもらえました。はてブをしていただいた方、本当にありがとうございました! ちょっと話は変わりますがその記事は、他のリソースを見つける度に少しずつ記事をアップデートし... 続きを読む
今年流行りのフラットなデザイン制作に役立つCSSフレームワークやPSD素材まとめ8つ - W3Q
【Flatstrap】 Twitter Bootstrapをフラットデザイン化したCSSフレームワーク。 Flatstrap by Littlesparkvt.com http://littlesparkvt.com/flatstrap/ Flatstrap by Littlesparkvt.com 続きを読む
Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI - かちびと.net
Twitter Bootstrapベースに作られたシンプルでフラットなデザインのUIキット・Flat UIのご紹介。今年はこの手のスタイルよく見かけますけど、確かに見やすいですね。 Flat UI フラットなデザインで見やすい印象です。このまま使うのはアレですけど参考にはなりました。 ドロップダウンメニューとかフォーム周りとか。 ツールチップとかとか。Bootstrapに含まれているコンポーネント... 続きを読む
Backbone.jsでつくるMVPなUIパターン【タブ】 | クラスメソッド開発ブログ
今回はBackbone.jsを使ってタブUIを作ってみたいと思います。デザインはTwitter Bootstrapをつかって以下のようにしました。 世界的に名高い企業の名前が並んでいますね。 デザインはhtmlを仮組みしてBootstrapで既にできていることにします。(本題と離れてしまうので…すみません><) ボタンの部分に active というクラスをつけると選択中のデザインに変わり、 内容の... 続きを読む
にわかデザイン(1):HTML5+CSS3は「メニューの作り方」を覚えるだけ! (1/3) - @IT
Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思... 続きを読む
RequireJSでTwitter Bootstrap(jQuery)を非同期ローディングしてみる | クラスメソッド開発ブログ
こんにちは、すどーです。 RequireJSでjQueryやjQueryプラグインの非同期ローディングを試してみました。 最近は大規模な構成になると、「ちぢめる、まとめる、かためる(minify, combine, compress)」のが主流のようです。 ですが小中規模な構成や、依存関係にあるフレームワークなども多くあるので、簡単な使い方だけでも覚えておくと便利かと思います。 RequireJS... 続きを読む
Twitter Bootstrapのテーマをオンラインで作成出来るツール・Bootstrap magic - かちびと.net
Twitter Bootstrapのテーマ作成 ツールです。OSSとしても公開さ れていますので、自分好みにカ スタマイズするのもありですね。 他にもこの手のツールはありま すけど、これはこれで使いやすい 印象でした。 Twitter Bootstrapのテーマ作成ツール。Google製のテンプレートエンジン、AngularJSを使用しているそうです。 Bootstrap magic 左側で色とか... 続きを読む
成長を続けるTwitter Bootstrapのエコシステム
Bootstrap HeroがTwitter Bootstrapの200を超えるリソースのリストをローンチした。このカタログにはアコーディオンやアドレスピッカーから、ページネーションツールやより強力なモーダルウィンドウまで、幅広いUIウィジットが掲載されている。また一方で、このエコシステムがいかに広範囲に及んできているかを示す、さまざまなリソースも含まれている。 また、Microsoft ASP.... 続きを読む
Twitter Bootstrapのリソースを大量にまとめたサイト・The Big Badass List - かちびと.net
人気のフレームワーク、Bootstrapを 使う際に役立つリソースを大量に集め ているWebサイト・The Big Badass Listのご紹介です。現在でも200近くの リソースがまとめられています。既に 利用されている方は覗いてみては。 Twitter Bootstrapのリソースまとめサイトです。人気のフレームワークならではのリソース量ですね。 The Big Badass List 左の... 続きを読む