_
より詳細な内容は公式ブログの記事にまとまっているので、日本語に翻訳して紹介していきます。 Bootstrap5公式Blog記事(日本語訳) Bootstrap5を正式公開しました！3つのアルファ版、3つのベータ版、数か月の開発を経て、最初の安定版としてメジャーバージョンをリリースします。Bootstrapのユーザー及びコントリビューター、メンテナーとすばらしいコミュニティによって実現しました。ここに来るのを手伝ってくれたすべての人に感謝します！ 新しいロゴ 新コンポーネント：Offcanvas 新しいアコーディオン 新しくなったフォーム チェックボックスとラジオボタン フローティングラベル 新しいファイル入力 シンプルになったレイアウト RTL対応 刷新されたユーティリティ 新しいユーティリティAPI 新しいユーティリティ スペーシングユーティリティ 新しいスニペット例 グリッドとレイアウ
Tailwind dashboard templateはオープンソースのTailwind.css/React製ダッシュボードテンプレートです。チャート実装の為、Chart.jsもビルトインされています。 少し前に同じくTailwind.cssベースの管理画面テンプレートのCleopatraをご紹介しましたが、同様に今回も完成されたタイプになります。 こちらはOSSですが、更に多くのコンポーネントを有したプロ版もあるそうです。UIは従来のBootstrapベースの管理画面等と同等のものですが、見やすく分かりやすい、いいUIじゃないかなぁと思います。この手のページは1から作ると結構な工数かかるので雛型が使えるとかなり楽できますね。ライセンスはGPLとの事です。 Tailwind dashboard template
CSSフレームワーク「Bootstrap」の最新バージョンである「Bootstrap 5」がアルファ版としてリリースされました。バージョン5ではjQuery依存からの脱却や、Internet Explorerのサポート終了によるCSSカスタムプロパティの強化など、数多くの新機能が追加されています。 Bootstrap 5 alpha! | Bootstrap Blog https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/ 目次 ◆ドキュメントページやロゴのデザイン変更 ◆jQueryとJavaScript ◆CSSカスタムプロパティ ◆ドキュメントの改善 ◆フォームの改善 ◆ユーティリティAPI ◆グリッドシステムの強化 ◆ドキュメントの生成方法変更 ◆ドキュメントページやロゴのデザイン変更 バージョン5では、ドキュメントペ
#DateTimePicker入れるのつまづいてる？ はい、私がちょっとつまづいたのでサクッといれられるように、備忘も兼ねて。 ##参照 Bootstrap 3 Datepicker Installing https://eonasdan.github.io/bootstrap-datetimepicker/Installing/ ##Manual Acquire jQuery (http://jquery.com/) Acquire Moment.js (https://github.com/moment/moment) Bootstrap 3 collapse and transition plugins (https://github.com/twbs/bootstrap/tree/master/js) 上記、色々入れないといけないけど、めんどくさいのでCDNでやっちゃいます。 ##
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
「Framework Template Editor」だと1秒でbootstrapやFoundationを使ったページが作れる話 URL:http://www.venezia-works.com/bst/ 対象者 WEBページ作成初心者の方 ページ作成に工数をできるだけ削減したい方 bootstrap、AMP、Foundation、Materializeを試したい方 この記事を読んでできること オンライン上でbootstrapやAMP、Foundation、Materializeを試すことができます。 コードをそのまま流用して素早く開発することができます。 Framework Template Editorとは URL:http://www.venezia-works.com/bst/ オンライン上で作業することができるエディタです。 ユーザー登録不要であり、ローカルにインストールすること
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
ちょっとしたWebサイトであればBootstrapをベースにすればデザインを一から作る必要がなくなっています。プロトタイプはもちろんのこと、数多あるBootstrap用テーマを使えば、十分高品質なWebサイトが作れるでしょう。 今回はそんなBootstrapのテーマを紹介します。マテリアルデザインになっているPropellerです。 Propellerの使い方 スクリーンショットを多めに紹介します。まずはタイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ボタン付きのモーダル。 ドロップダウン。 フォーム。 リスト。 さらにカスタマイズしたリスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 サイドバー。 タブ。 テーブル。 カード。 Propellerはマテリアルデザインになっていますので単純なデザインだけでなく、クリックやマウ
アクセスランキング Apple AirTagは窃盗対策に使えなくなったってホント？ 自作PC 簡単に固定ナットのネジ穴作りができる「ちょっとナッターII」が便利でした PC とうとうWindowsからコントロールパネルが廃止! マイクロソフトが公表 トピックス 普通預金の金利が高い、超オススメの銀行はこちら トピックス 楽天モバイル料金を全額ポイントで支払っている僕が伝えたい爆裂お得なキャンペーン デジタル PS5がほぼ8万円に、だったら9万円台のゲーミングPCを選んでみては？ スマホ シャープ「AQUOS R9」はデザインやチップの変更で評価が分かれたが、実機であらためて実力を検証した iPhone 【iPhone 16の噂＆予想まとめ】まもなく登場iPhone 16はどうなる!? これ読んで待とう！ iPhone アップル「iPhone 16 Pro」新色は「デザートチタニウム」か P
Demo for Bootstrap File Input styler ファイルアップロードのボタンをBootstrapにできる「Bootstrap File Input styler」 通常のファイルアップロードボタンはブラウザによってデザインの差異がうまれ、ダサい感じになってしまいますが、こちらであればBootstrapのテーマと同様に出来ます。 関連エントリ Bootstrapのナビゲーションバーをお好みにカスタマイズできる「Bootsnav」 Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 Bootstrapなフォームでのリアルタイムバリデーションを行う「Validator for Bootstrap 3」 Bootstrap対応サイトならお手軽に導入できる星型・ハート型投票「bootstrap-star-rating」 Bo
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Webデザイン制作をより手軽に、よりスピーディーに行うことができる人気HMTLフレームワークBootstrap。今回はHTML5とCSS3でデザインされた、スタイリッシュな無料テンプレートBoxifyをご紹介します。 デザイントレンドを反映されたモダンなデザインに、スムーズなアニメーションを加えたアイテムで、あらゆるタイプのポートフォリオやスタートアップ用ランディングページの作成を手助けしてくれます。 詳細は以下から。 無料テンプレートBoxifyについて BoxifyはHTML5/CSS3で制作されたスタイリッシュなテンプレート素材で、以下の最新プラグインを採用することで、モバイルを含むあらゆる端末でのサイト表示にも対応します。同時に快適な操作感を実現しており、ユーザーフレンドリーな高品質なアイテムとなっています。 [list type=”star”] [li]Bootstrap : H
GitHub - lecar-red/bootstrapx-clickover: Bootstrap Extension for Click managed popovers Bootstrapのpopoverをクリック時にトグル表示させるようにする「bootstrapx-clickover」 ポップオーバーだとマウスにしか対応できませんが、タッチ端末でもこれなら使えそうです 関連エントリ Bootstrapのナビゲーションバーをお好みにカスタマイズできる「Bootsnav」 BootstrapのcheckboxもBootstrap風デザインに変更できる「Checkbox X」 Bootstrapなサイトで階層的なツリービューを作成できるUIライブラリ「bootstrap-treeview」 Bootstrapなフォームでのリアルタイムバリデーションを行う「Validator for Bo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
