Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」
Shards - Bootstrap4に対応したデザインテーマ
Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。 ということでテーマも新しいものに乗り換える必要があります。今回はShardsを紹介します。 Shardsの使い方 カラーリングです。 タイポグラフィ。 アイコンはマテリアルアイコンとFont Awesomeに対応しています。 フォーム。 バリデーションにも対応しています。 スライダー。 日付ピッカー。 カード。 ボタン。 プログレスバー。 ツールチップとアラート。 ナビゲーションバー。 作れるサイトのデザインデモです。 こんなスクロール型のサイトにも。 今風なデザインにも使えます。 Shardsを使えばBootstrap4を適
Bootstrapをカスタマイズ！ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas
Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/> </head> <body> ... <script src="../dist/js/bootstrap.offcanvas.js"></script> </body> Step 2: HTML まずは、オフキャンバスのナビゲーションを開くボタン。 <butt
BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル
先日の記事「Bootstrapのグリッドシステムの基本な使い方（翻訳版）」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。 次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。 Base CSS and Navigation Systems in Bootstrap 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 BootstrapのベースのCSS 見出し（hx）を実装する 「small」を使って実装 引用（blockquote）を実装する 連絡先情報（address）を実装する コード（code）を実装する 整列のclassを実装する 強調のclassを実装する フォーム（form）を実装する テーブル（table）を実装する 画像
Froala Design Blocks - コーポレートサイトやサービスサイトを作るのに使えるBootstrapコンポーネント集 MOONGIFT
Bootstrapを使ってWebサイトを構築する例は多いですが、凝ったデザインを考えると足りない部品が出ることがあります。また、色やサイズについてもっとこだわりたいと考えることもあるでしょう。 そうした時に使えるのがFroala Design Blocksです。実に170を超えるデザイン要素を提供しています。 Froala Design Blocksの使い方 スクリーンショット多めで紹介します。Call to Action。 コンタクト。 コンテンツ。 機能を並べる画面。 フッター。 フォーム。 ヘッダー。 プライス。 チーム。 表彰。 Froala Design Blocksはコーポレートサイトやサービスサイトを構築するために必要な要素がまるまる提供されています。多数のパターンがあるので、これらを組み合わせるだけで複雑な画面も構築できることでしょう。 Froala Design Bloc
Honoka - 日本語も綺麗に表示できるBootstrapテーマ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 当たり前ですが、英語圏のソフトウェアは英語が綺麗に表示されるように調整されています。そのため日本語にした時に幅が足りなかったり、そもそもフォントが当たっていなくて汚い表示になったりします。 Webのモックアップなどで多く使われているBootstrapについてもそうです。日本語を綺麗に表示するならBootstrapを日本向けに拡張したHonokaを使いましょう。 Honokaの使い方 Honokaは日本語フォントはもちろんのこと、幅や高さが微調整されています。 デフォルトのBootstrapとの比較です。 デザイン一覧。ナビゲーションバー。 タイポグラフィ。 テーブル。 タブ、パンくず、ページネーションなど。 アラート。 パネルなど。 HonokaはBootstrapと高い互換性があ
Bootstrapの為のカード型UIフレームワーク・「Bootcards」
BootcardsはBootstrapの為のカード型UIフレームワークです。カード型UIとは最近TwitterやGoogle等が提唱し始めたスタイル（？）です（参照：Twitterカード、Google Now カード）。今まで普通に触れていたUIに名前が付いただけのような気もしますが・・ｗ カードUIに関しては Inside Intercomで記事が書かれていたので合わせてご参照下さい。このカードUIにBootstrapで対応出来るようにする、というUIフレームワークになります。モバイルとタブレットファーストな印象で個人的には割と好きでした。ライセンスはMITとの事。 Bootcards動作サンプル
Dashboards by Keen IO – グラフを多用したBootstrap管理画面テンプレート
Bootstrapが特に活かされている場面というと、管理画面ではないでしょうか。そこまで画面デザインにこだわらなくてよく、情報設計がきちんとできていれば見栄えの良いUIが作成できます。開発者自らが設計、デザインできるのが手軽で良いです。 そんなBootstrapを使った管理画面デザインは多数ありますが、今回はビジュアル化を特に想定しているDashboards by Keen IOを紹介します。 Dashboards by Keen IOの使い方 まずはデザインを見てみましょう。 Dashboards by Keen IOはBootstrap 3.2に対応しています。Bootstrapのバージョンアップは早いのでこの辺りの対応バージョンのチェックも忘れないようにしましょう。 Dashboards by Keen IOはHTML5/JavaScript製、MIT Licenseのオープンソース
markdown2bootstrap - MarkdownをBootstrapと組み合わせてHTML化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownでHTMLが出力できるのは良く知られていますが、生成されるのは素のHTMLタグとなっています。このまま表示に使いたいと思うことは殆どないでしょう。必要なのは多少なりともデザインです。 そこで使ってみたいのがmarkdown2bootstrapです。MarkdownからHTMLを生成し、それに合わせたBootstrapデザインを提供してくれます。 markdown2bootstrapの使い方 markdown2bootstrapのインストールはnpmで行えます。 $ npm install -g markdown2bootstrap 終わったらMarkdownファイルのあるディレクトリで実行するだけです。 $ markdown2bootstrap README.md
jQuery Bootgrid
HTML <table id="grid-basic" class="table table-condensed table-hover table-striped"> <thead> <tr> <th data-column-id="id" data-type="numeric">ID</th> <th data-column-id="sender">Sender</th> <th data-column-id="received" data-order="desc">Received</th> </tr> </thead> <tbody> <tr> <td>10238</td> <td>eduardo@pingpong.com</td> <td>14.10.2013</td> </tr> ... </tbody> </table> JavaScript $("#grid-basic")
editableTableWidget – Bootstrapでその場で編集できる表計算を実現
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これは使い勝手良さそう！ Bootstrapの魅力はデザインがさくさく出来上がる使い勝手の良さもありますが、シェアが大きいので関連ライブラリがたくさん作られているということも挙げられます。本家にはない機能もちょっと探せば大抵あったりするものです。 表計算のように編集可能なテーブルを実現したい、そう思ったら使ってみたいのがeditableTableWidgetです。 editableTableWidgetのデモ ちょっとしたことですが、編集後に一番下の行のサマリーも変わっています。計算処理も可能です。 editableTableWidgetの使い方 使い方は簡単で、以下のようなコードを実行します。 $('#table').editableTableWidget(); さらにバリデーシ
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
adexd.net - このウェブサイトは販売用です！ - adexd リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Bootstrap Themes at BootstrapZero
Browse Themes by Tag Preview all themes Resources for Bootstrap Useful links for additional Bootstrap themes, extras and code snippetsOfficial Bootstrap Bootply Playground Bootstrap 4 Upgrade BootstrapBay WrapBootstrap HTML5 Zero StartBootsrap Why Bootstrap? It's no surprise that Bootstrap is the most popular frontend framework. Web designers and developers can leverage Bootstrap to build responsi
デザインが出来ないエンジニアのAndroid-Bootstrap利用方法 - Qiita
Androidアプリ作成時、毎回、アイコン関連で苦悩しています。フリーのアイコン探しやライセンス確認、多機種に合わせたリサイズ作業に疲れ果てています。 もう悩みたくない。 アイコン探ししたくない。 PhotoShop使いたくない。 そんな自分が、Androidで Font Awesomeの約369個のアイコンを簡単に利用する事ができる Android-Bootstrap を導入した時のtipsです。 したいこと Androidアプリで毎回使える汎用的なアイコンが欲しい(ランチャーアイコン以外で) 全機種・解像度共通でアイコンを利用したい(画像リサイズ作業を極力避けたい) 最終的な目標 Android-Bootstrapを利用してアプリをリリースする(した) EveryEver(エブリー・エバー) 圏外でも快適なEvernoteライフを。 利用するライブラリ https://github.c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[正式版対応] 5分で導入できるBootstrap 4 超入門 〜タブの作り方〜 - Qiita![[正式版対応] 5分で導入できるBootstrap 4 超入門 〜タブの作り方〜 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cf5e5f241608caf1b51b797fc7e9d50d3c0eb872/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JUFEJUEzJUU1JUJDJThGJUU3JTg5JTg4JUU1JUFGJUJFJUU1JUJGJTlDJTVEJTIwNSVFNSU4OCU4NiVFMyU4MSVBNyVFNSVCMCU4RSVFNSU4NSVBNSVFMyU4MSVBNyVFMyU4MSU4RCVFMyU4MiU4QkJvb3RzdHJhcCUyMDQlMjAlRTglQjYlODUlRTUlODUlQTUlRTklOTYlODAlMjAlRTMlODAlOUMlRTMlODIlQkYlRTMlODMlOTYlRTMlODElQUUlRTQlQkQlOUMlRTMlODIlOEElRTYlOTYlQjklRTMlODAlOUMmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWE4MjgzMjg5MDExZWExOTJjNDM1NWU0ZGU0NmEzNGUy%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0b25rb3RzdWJveV9jb20mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTRkMjk0YWVmMDYwMDg3MDg3YjY5ZDU5YWIyNDc0YjRm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db7613fe2b5448d69542a3e0bd6ac936e)
新着記事
Bootstrap themes and templates | PrepBootstrap
Start Bootstrap
IDEA * IDEA
