700+ UI components & templates Super simple, 1 minute installation Easy theming and customization MIT license - free for personal & commercial use Get started Demo
Dedicated to JavaScript and its awesome community since 2015
Bootstrap 4.0のテンプレートやコンポーネントのデザインを確認しながら、定義されている変数を簡単にカスタマイズできるオンラインツールを紹介します。 BootstrapでWebサイトやブログを作成する時に、BootstrapのUIコンポーネントを利用する時に、Bootstrapのテーマを作成する時に、便利なオープンソースの無料ツールです。 Bootstrap Magic Bootstrap Magic -GitHub Bootstrap Magicの特徴 Bootstrap Magicの使い方 Bootstrap Magicの特徴 Bootstrap 4.0対応 最新のBootstrap 4.0のすべてのテンプレート・コンポーネントに対応しています。 Sass対応 BootstrapはSassにも対応しているので、Bootstrap Magicでも同様にSassの変数が利用できます
最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。 そこで使ってみたいのがPropellerです。管理画面のデザインに特化したレスポンシブ/マテリアルデザインなフレームワークです。 Propellerの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。 リスト。アイコン付きもあります。 タイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ドロップダウン。 リスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 タブ。 ツールチップ。 カード。 フローティングアクションボタン。 フォーム。 デ
UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。 今回はSirius UIというUIフレームワークを紹介します。多数のUIコンポーネントが提供されています。 Sirius UIの使い方 スクリーンショット多めで紹介します。まずはボタン、ラベル、バッジ、フォーム、アラートなど。 ナビゲーション、ドロップダウン、テーブル、ページネーションなどが提供されています。 ログインのモーダル実装例。 タブとイメージ、カルーセル。 トップページ風レイアウト。 機能一覧風。 フッター。 Sirius UIのベースはBootstrapとなっており、さらにFlexboxとVue.jsを組み合わせていま
デザイン性だけでなく使い心地にもこだわった、ウェブデザイン制作をグッと楽にする無料HTMLテンプレート素材をまとめました。 人気のHTMLフレームワーク Bootstrap を利用して作成されており、カスタマイズしやすく拡張性の高いテンプレートが中心に揃います。また、2017年のウェブデザイントレンドをうまく反映した素材も多く、サイト開発のデザインやレイアウトの参考にしてみても良いでしょう。 レスポンシブ対応で無料!ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Paper Kit 2 控えめな配色と美しいタイポグラフィーが特長のBootstrap 4対応で、収録されているコンポーネントはどれもレスポンシブ対応で、あらゆる画面スクリーンサイズでも読みやすいうれしい設定も。 デモページ ダウンロ
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ!参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
A clock-style timepicker for Bootstrap (or jQuery). Download ZIP CSS < 6KB, JS < 9KB, after minified. Browser support All major browsers are supported, including IE 9+. It should look and behave well enough in IE 8. Device support Both desktop and mobile device are supported. It also works great in touch screen device. Dependencies ClockPicker was designed for Bootstrap in the beginning. So Bootst
Twitter Boostrap用の日付/時間 ピッカーを実装する為のライブラ リ・bootstrap-datetimepickerの ご紹介。日付と時間を同じinput 要素内で取得できます。また、 フォーマットも指定可能です。 デート・タイムピッカーを実装するスクリプト。jQuery依存みたいです。 シンプルに日付と時間を取得するだけのものですが、別のinput要素を用意する必要が無いのはユーザーに優しいですね。 Sampleカレンダーの下部に時間ピッカーへの切り替えボタンがあります。 言語を日本語に指定したけどカレンダーはまだ日本語には未対応です。出力フォーマットは自由に設定できます。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.
BootstrapでWebサイトツアーコンテンツを実装する為のスクリプト、Bootstrap Tour Extendedのご紹介。閲覧中のページだけでなく、別ページへの移動も可能です。なかなか使い勝手はいい気がしましたので備忘録として。 Bootstrapでツアーコンテンツを実装するスクリプトです。 ツアーコンテンツをツールチップで実装します。 ↑ こんなん。 以下、公式の動作デモです。 Sample var tour = new Tour(); tour.addStep({ element: "#foo", placement: "bottom", title: "タイトルです", content: "文章です。 " + "文章の続き。 " + "<a href='http://example.com' target='_blank'>" + "リンクはこうやって貼る<\/a>" });
Bootstrap向けのMarkdownエディタを実装出来る、というスクリプトのご紹介です。Markdown対応のエディタで、タグ保管機能も付いています。なかなか良さそうです。 Twitter Bootstrap向けのMarkdownエディタを実装出来るスクリプト・Bootstrap Markdownです。実装も楽なので覚えて置いて損は無いかも。 Boostrapに設置可能なMarkdownエディタです。シンプルで使いやすい印象でした。 <textarea name="content" data-provide="markdown" rows="10"></textarea>textareaにカスタムデータ属性を与えればいいみたいです。 <div data-provide="markdown-editable"> <h3>foo</h3> <p>bar hoge fuga</p> </di
こんにちは、tetsuです。 エンジニアでデザインもできる方はいますが、できない方もいるのが現状です。僕自身もできないほうに入るかと……。 ただ、システムを構築する際に、ほぼ作成しなければならないのが管理画面でしょう。デザインができないにも関わらず、管理画面のデザインを考えなければいけない。そんなときには大変ありがたい、Bootstrap3対応の管理画面のデザインテンプレートを提供してくれる方々がいます。 今回はその中から特におすすめのテンプレートを5つ、ご紹介いたします。 ライセンスについて 今回は、以下のライセンスが表記されているものを中心にピックアップしました。 ▼ MIT license 1. このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。 2. 作者または著作権者は、ソフト
Webデザイン制作で人気の Bootstrap フレームワークには、役立つツールやコンポーネントがあらかじめパッケージされており、すぐにサイトやアプリの制作をはじめることができます。しかし、ときには必要な機能が十分に揃っていないケースがあるのも事実です。 この記事では、Bootstrap の機能を最大限に拡張できる、50種類のプラグインやアドオン、コンポーネントをまとめてアルファベット順にご紹介します。 ここでは、ボタンやパンくずリスト、カレンダー、ツリーメニュー、ビデオプレイヤー、WYSIWYGエディターなどウェブ制作に必要な機能をすべてまとめています。今後のプロジェクトに活用してみてはいかがでしょう。 制作に活用したいBootstrap 用プラグイン、アドオン、コンポーネント(アルファベット順) アクセシビリティ (英: Accessibility) Accessibility Plu
モダンなWebサイトを実現するためにはモダンなデザインフレームワークを使うべきです。そうすることで全体の統一感が生まれ、使い勝手の良いWebサイトが生まれます。継ぎはぎでは統一感を出すのは困難です。 今回はMicrosoft公式のBootstrapテーマ、winstrapを紹介します。最近のMSらしい、モダンなWebデザインが実現します。 winstrapの使い方 スクリーンショット多めで紹介します。まずはカラーリング。確かにそれっぽいですね。 カラーリングも複数パターン用意されています。 グラデーションも細かく設計されています。 枠組みだけ。 黒バックの場合。 タイポグラフィ。 アイコン。 グリッド。かなり細かい印象です。 ボタン。 チェックボックス。ラベル全体をチェックします。 トグルスイッチ。 フォーム。 テキスト入力。 コンボボックス。 ツールチップ。 ダイアログ。 タブ。 ナビゲ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く