Boostra/386 Disc 1_
Bootstrap5がリリースされました！
より詳細な内容は公式ブログの記事にまとまっているので、日本語に翻訳して紹介していきます。 Bootstrap5公式Blog記事(日本語訳) Bootstrap5を正式公開しました！3つのアルファ版、3つのベータ版、数か月の開発を経て、最初の安定版としてメジャーバージョンをリリースします。Bootstrapのユーザー及びコントリビューター、メンテナーとすばらしいコミュニティによって実現しました。ここに来るのを手伝ってくれたすべての人に感謝します！ 新しいロゴ 新コンポーネント：Offcanvas 新しいアコーディオン 新しくなったフォーム チェックボックスとラジオボタン フローティングラベル 新しいファイル入力 シンプルになったレイアウト RTL対応 刷新されたユーティリティ 新しいユーティリティAPI 新しいユーティリティ スペーシングユーティリティ 新しいスニペット例 グリッドとレイアウ
オープンソースのTailwind.css/React製ダッシュボードテンプレート・「Tailwind dashboard template」
Tailwind dashboard templateはオープンソースのTailwind.css/React製ダッシュボードテンプレートです。チャート実装の為、Chart.jsもビルトインされています。 少し前に同じくTailwind.cssベースの管理画面テンプレートのCleopatraをご紹介しましたが、同様に今回も完成されたタイプになります。 こちらはOSSですが、更に多くのコンポーネントを有したプロ版もあるそうです。UIは従来のBootstrapベースの管理画面等と同等のものですが、見やすく分かりやすい、いいUIじゃないかなぁと思います。この手のページは1から作ると結構な工数かかるので雛型が使えるとかなり楽できますね。ライセンスはGPLとの事です。 Tailwind dashboard template
「Bootstrap 5」のアルファ版がリリース、脱jQueryやCSSカスタムプロパティの強化など
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では、ドキュメントペ
Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」
Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 コンポーネントを含むレイアウトは完全なレスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりはかなり工数を減らせそうです。 細かい部分のサポートの充実 更にVuestic AdminはJSONファイルによる他言語化対応、MEDIUMライクなテキストエディターの搭載など、ユーザーフレンドリーな設計となっています。 細かい部分もサポートしてくれているのは嬉しいですね。これだけ揃っても完全にOSSなのは貴重かもです。 ライセンスはMITとの事です。 Vuestic AdminOn Github
DateTimePickerをサクッと入れたい人！(CDN使用) - Qiita
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でやっちゃいます。 cdnjs b
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
「Framework Template Editor」だと1秒でbootstrapやFoundationを使ったページが作れる話 - Qiita
「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/ オンライン上で作業することができるエディタです。 ユーザー登録不要であり、ローカルにインストールすること
【Bootstrap製】90ページ超えの無料HTML5／CSS3テンプレート素材 Titan
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
Propeller - Bootstrapベースのマテリアルデザインテンプレート
ちょっとしたWebサイトであればBootstrapをベースにすればデザインを一から作る必要がなくなっています。プロトタイプはもちろんのこと、数多あるBootstrap用テーマを使えば、十分高品質なWebサイトが作れるでしょう。 今回はそんなBootstrapのテーマを紹介します。マテリアルデザインになっているPropellerです。 Propellerの使い方 スクリーンショットを多めに紹介します。まずはタイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ボタン付きのモーダル。 ドロップダウン。 フォーム。 リスト。 さらにカスタマイズしたリスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 サイドバー。 タブ。 テーブル。 カード。 Propellerはマテリアルデザインになっていますので単純なデザインだけでなく、クリックやマウ
jQueryはもうイヤだ！ネイティブJavaScriptでBootstrapを使い続ける方法
「jQueryへ依存せずにBootstrapを使いたい」そんなときは、ネイティブJavaScript化する「Native JavaScript for Bootstrap」プロジェクトをチェックしてみるといかもしれません。 BootstrapのJavaScriptコンポーネントを使うよりも、実はVanilla JavaScript（編注：素のJavaScriptのこと）が好きだという人がいます。もしそうなら、ネイティブJavaScriptのBootstrapプロジェクトがおすすめです。このプロジェクトは、コンポーネントのうちjQueryで書かれている部分を素のJavaScriptに移植して、jQueryへの依存をなくすことを目指しています。 目的 移植する狙いのほとんどはパフォーマンスのためです。 数多くのベンチマークが示すとおり素のJavaScriptはjQueryより高速に実行できるの
ファイルアップロードのボタンをBootstrapにできる「Bootstrap File Input styler」:phpspot開発日誌
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
Bootstrap 対応！マイクロインタラクションをクラス名だけで作ろう！ScrollReveal.js
2016年に入り、ますます注目を集めているマイクロインタラクションは、多くのウェブサイトなどでも積極的に採用されはじめています。しかし、どうしてもJSやjQueryの技術が必要となってくるため、なかなか手を出せないというひとも多いかもしれません。 今回はスクロールに合わせて要素をアニメーションさせるプラグイン、ScrollReveal.jsを使い、Bootstrapを使うような感覚で、クラス名をつけるだけでアニメーションが実装できるようにしました。 マイクロインタラクションだけでなく、ド派手なアニメーションにも使えるので、JSやjQueryはまだというひともぜひ、トライしてみてください。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル スクロールに合わせて、アニメーション付きでコンテン
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
【Bootstrap製】最新ウェブテク採用の無料HTML5／CSS3テンプレート素材Boxify
Webデザイン制作をより手軽に、よりスピーディーに行うことができる人気HMTLフレームワークBootstrap。今回はHTML5とCSS3でデザインされた、スタイリッシュな無料テンプレートBoxifyをご紹介します。 デザイントレンドを反映されたモダンなデザインに、スムーズなアニメーションを加えたアイテムで、あらゆるタイプのポートフォリオやスタートアップ用ランディングページの作成を手助けしてくれます。 詳細は以下から。 無料テンプレートBoxifyについて BoxifyはHTML5/CSS3で制作されたスタイリッシュなテンプレート素材で、以下の最新プラグインを採用することで、モバイルを含むあらゆる端末でのサイト表示にも対応します。同時に快適な操作感を実現しており、ユーザーフレンドリーな高品質なアイテムとなっています。 [list type=”star”] [li]Bootstrap : H
Bootstrapのpopoverをクリック時にトグル表示させるようにする「bootstrapx-clickover」:phpspot開発日誌
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ページを開く
locale is not a function · Issue #1084 · Eonasdan/tempus-dominus
Bootstrapベースで作られたオープンソースの管理画面UIフレームワーク・「CoreUI」
jQueryとBootstrapで作るシンプルなスケジューラー・「pit-scheduler」
Bootstrapなサイトでツリービューを実装できる「easy-tree」:phpspot開発日誌