The missing components for your favorite front-end framework. Download or Download source
The missing components for your favorite front-end framework. Download or Download source
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました お。これはプロジェクトサイトのヘルプや説明ページに使えそうですね。 BootstrapをベースにWebサイトを構築するメリットとして、多彩なプラグイン/ウィジェットの存在があります。こんなこと実現できるかな、と思って調べてみれば大抵そういったソフトウェアが存在するのが強みです。 例えばメインコンテンツの左側に見出しを目次として並べたい、そう思ったならばTocifyを使ってみましょう。Bootstrap + jQueryで格好いい目次表示を行ってくれます。 使い方としてはまずスタイルシートとJavaScriptを読み込みます。 <link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> <link type="
Bootstrap 3対応の高性能なカラースキーム コントロールとフラットなスタイルが特徴のテーマファイルを紹介します。 1pxdeep 1pxdeep -GitHub Bootstrap 3対応のテーマファイルも続々とリリースされていますが、このテーマファイルは他にはない高性能なカラースキーム コントール機能を備えています。 使い方は、簡単です。 「Seed Color」から自分の好きなカラーを選択し、「Color Wheel」でカラーセオリーを選択します。 カラーセオリーは、下記の5つが用意されています。 accented analogue 類似色と補色を使用、目立たせながらも調和のとれた配色。 monochrome 同一の色相を使用、全体の色味を統一した配色。 complement 対照の補色を使用、調和のとれた配色。 triad 3等分した配色を使用、バランスのとれた配色。 tet
FurattoはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア(Apache License 2.0)です。 最近流行のフラットデザインでサイトを作ってみたいと思いつつ、そのデザインフレームワークを使いこなすのが大変…と感じている方はFurattoを試してみましょう。BootstrapをベースにしたフラットUIデザインが実現できます。 ボタンデザイン。四角い、立体感のないデザインです。 カラーバリエーションも良くあるフラット系になっています。 ボタンにアイコンを載せることもできます。 画像。丸く表示もできます。 囲みをつけることもできます。囲みの色も変更可能です。 テーブル表示。こちらは通常のテーブルです。 ちょっと詰まった感じのテーブル。 行ごとの色変更も可能です。 レスポンシブなテーブルもありますが、幅をスマートフォンサイズまで縮めるとうまく表示できませんで
Elusive icons, an icons font designed for use with Bootstrap Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Bootstrap標準アイコンも140種類と豊富に使えますが、これに270種類を追加すれば、アイコンにはもう困らないかも。 Bootstrapを使っている方、使おうと思っている方は是非覚えておきたいですね。 ベクター形式なので拡大してもOK。 今後、アイコンはBootstrap対応をデフォルトにしてくれるとよりBootstrapが素晴らしい物になっていきそうですね。 関連エントリ Bootstrapで矢印を描くのなら「Bootstrap Arrows」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootSt
Twitter Bootstrap 3 の変更点概要 Bootstrap 自体の仕様だけでなく体制なども変更されるようです。 モバイルファースト twitter/bootstrap, twitter/bootstrap-server, mdo/bootstrap-blog(プライベートレポート)を twbs organization アカウントへ移行 サイトの URL を http://getbootstrap.com に変更 CSS はレスポンシブ用スタイルも含めて1ファイルにする IE7, Firefox3系 のサポート廃止 Glyphicon のフォント版を採用 Apache ライセンスから MIT ライセンスへ移行 *-wip ブランチの開発スタイルから 3.1.0-modal-revamp のような機能ごとのブランチに変更 過去バージョンのダウンロードにタグを使う コミュニティの
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
FlightはTwitter社の開発した軽量なコンポーネントベースのJavaScriptフレームワークです。 BootstrapのリリースでWebサービス開発のデザインに革命的なインパクトを与えたTwitterから次いで登場したのがFlightです。コンポーネントベースのJavaScriptフレームワークです。 デモのメーラー風アプリケーションです。 メニューが出たりメールの選択ができます。 新しいメッセージの作成ウィンドウ。フローティングです。 こんな感じのファイル構成になっています。 Flightではコンポーネントから別なコンポーネントを参照できるようになっていません。他のコンポーネントをサブスクライブし、アクションが起こった時に伝えてもらう仕組みになっています。一つのコンポーネントの一つのアクションから複数の別なコンポーネント呼び出しなども簡単に実現できるようになっています。 Fli
BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア(Apache License 2.0)です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア(MIT License)です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
Bootstrapは先日リリースされたBootstrap 3rc1で、モバイルファーストのフロンドエンド用のフレームワークに生まれ変わりました。2.xまでは、デスクトップ用のブラウザを想定したインターフェイスのコンポーネントを核にしていました。 Bootstrapをカスタマイズしたり、もっと活用するためのリソースを紹介します。 まずは、本家のBootstrapから。 Bootstrap 3 スマフォやタブレットでの利用を優先したシンプルでパワフルなUIエレメントが揃ったフロントエンド用のフレームワーク。 最新のBootstrap 3rc1(7/27に公開)はリリース候補版です。 Examples Templates for Bootstrap Bootstrap純正のテンプレートやページの仕掛けが揃っています。 Narrow marketing 小さいプロジェクト用の軽量のテンプレート。
metro-bootstrapはBoostrapをWindows8 Style UIに変更するデザインテーマです。 正直言ってWindows8はインストール以来全然使っていない筆者ですが、Windows8 Style UI(旧Metro UI)は好きです。あのすっきりとしたデザインはタブレットやWebでこそ活きるのではないかと思っています。そこで紹介したいのがmetro-bootstrapです。 タイポグラフィ。 引用やリストの表示。 コード表示もできます。 全体的に白く、塗りつぶしたようなデザインです。 各種テーブルの表示。 ボタンがWindows 8 Style UIです。 こちらはコンポーネント。 ドロップダウン系が薄いデザインになっています。 タブも何となくのっぺりした感じに。 ナビゲーションバー。すっきりとしたデザインで個人的には好きです。 パン屑リスト。 ラベル。 アラート系。
Bootstrap Application WizardはBootstrap用のアプリケーションウィザードフローを提供するライブラリです。 Bootstrapを使ってWebサービスを提供するサイトが多くなってきました。今回はその一つ、Bootstrapを使ってウィザード風の流れを実現してくれるライブラリ、Bootstrap Application Wizardを紹介します。 フローティングでウィザードが表示されます。 次へを押して順番に進めていきます。 左下のステータスバーが徐々に進んでいます。 完了しました! Bootstrap Application Wizardではwizardというメソッドを使って一つ一つをスライド風に切り替えながら処理を選べるようになります。入力チェックも内蔵されています。そして最後にデータが飛んでくるのでサーバ側で処理して返却すれば良いだけです。とても手軽です。
BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 2013年04月05日- Bootstrap Form Helpers BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」。 国、通貨、日付、時間、電話番号、フォント等を入力する際に便利そうなインプットのヘルパーライブラリのご紹介。 次のように、多数のフォーム入力ウィジェットが追加で利用できます。 フォントは見たままで表示されて、selectから選べるので便利そう。 UIデザインもいい感じ。 関連エントリ Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapのテーマで良い感じに動くオート
Elusive Icons is a webfont that can be used with any of your projects. Bootstrap-based, Foundation-based or even your custom projects! It was created by the need for an Open-Source font that can be used in your projects without licencing issues and/or other "attribution" claws. If you don't care much about licences there are many alternatives you can use, most notably the font-awesome font. (UPDAT
Bootstrap Arrows Bootstrapで矢印を描くのなら「Bootstrap Arrows」 全国の矢印好きの諸君。こんにちは。もうPhotoshopで矢印を描いて画像を作ってアップロードなんていうことは必要ない。 <span> に簡単なclassをつけるだけで、向きも、長さも、色だって、自由自在。 しかも、次のような美しい矢印が描画できる。センス云々の話ではなく、class="arrow" として rel で角度を指定するだけで美しい矢印が描けるのだ。 色んなUIライブラリはあれど、矢印まで描けるとなるともう選択肢は限られる。 これでBootstrapを使わない理由は一切なくなったのだ。 関連エントリ TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる5つのコンポーネント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く