RTS - レスポンシブにテキストサイズを変える
レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。 そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。 RTSの使い方 Bootstrapのサイトに組み込んだ例です。 ウィンドウ幅を変更するとテキストサイズも変わります。大きすぎず、ウィンドウに合わせた最適な大きさになります。 別なデモです。こちらはSCSSのMix-inを使っているようです。 幅を変更した時の表示です。 RTSはウィンドウ幅のイベントをJavaScriptで拾って処理を行っています。CSSだけですべてが解決できる訳ではないですが、ユーザの可読性のために導入検討する価値はありそうです。 RTSはCSS製のオープンソース・ソフトウェ
Bootstrap 5 Animations - examples & tutorial
Subtle and smooth MDB animations provide the user with a unique experience when interacting with UI. There are several dozen animations at your disposal along with many customization and implementation options. Bootstrap 5 animations imitate motions for web elements. +70 animations generated by CSS only, work on every browser. Note: Read the API tab to find all available options and advanced custo
flexboxで段組をするときは、大量のテキストが入った場合を想定しよう - Qiita
気付いている方は、けっこういるかも知れませんが… Bootstrap4の可変グリッド（col-{breakpoint}-auto）には、本来の幅を超える改行が含まれないテキストが入ったときに崩れる不具合があります。 https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content 本来想定されている見た目 開発者ツールで大量のテキストを流し込んだ状態 これを修正しようとすると、ほぼすべてのグリッドに手を入れなければならないらしいので、ここではこの問題に関する解決策は割愛しますが、このような挙動が起こる原因について書いておきます。 flex-shrinkの役割 結論から書くと、 flex-shrink:1 を指定していないためです。 こちらに、floatを使った場合と、Flexboxを使った場合のサンプルを作りました。
Angular6でBootstrap4を使ってみる | DevelopersIO
Angular6 になって、Angular CLI の設定ファイルが.angular-cli.jsonからangular.jsonに変わったとこともあり、少し記述を変更する必要があります。今回は備忘録も兼ねて、Angular6 でBootstrap4の読み込みかたをまとめてみました。 どうも！大阪オフィスの西村祐二です。 下記ブログでAngular5でBootstrap4を使う方法が記載されていますが、 Angular5 で Bootstrap4 ( beta ) を使ってみよう #serverless #adventcalendar Angular6 になって、Angular CLI の設定ファイルが.angular-cli.jsonからangular.jsonに変わったとこともあり、少し記述を変更する必要があります。今回は備忘録も兼ねて、Angular6 でBootstrap4の読み込
新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ
2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった、そして改訂された、Bootstrap 4の基本テンプレート、ナビゲーション、コンポーネントを紹介します。 Bootstrap Bootstrap 4の基本テンプレート Bootstrap 4のナビゲーションバーのテンプレート Bootstrap 4のコンポーネントのテンプレート Bootstrap 4の実験的なテンプレート Bootstrap 4の基本テンプレート まずは、Bootstrap 4
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
Middleman v4 で parcel を使って Bootstrap をインストールしてみる - Qiita
Javascript 界隈の進化は早く，webpack 全盛時代から今度は parcel だと！ さっそく parcel を使ってみました。Bootstrap を使えるようにしてみました。ちょっと残念なことに，完全に parcel だけではうまくいかず，scss の変換で gulp を併用しています。 この記事は下記の2つの記事を再構成しました。 Middleman v4 で parcel を使ってみる Middleman v4 + parcel で Bootstrap を使う 前提: Middleman と yarn の設定 Middleman で Slim を使いたいので次のように設定しました。 $ gem install middleman $ gem install slim $ middleman init (プロジェクト名) -T yterajima/middleman-sli
【Bootstrap製】90ページ超えの無料HTML5／CSS3テンプレート素材 Titan
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrap Admin & Dashboard Template · CoreUI
3つのドットで作れるCSSローディングアイコンをまとめた・「Three Dots」
bootstrap-datepicker の UI がスマホ表示だと微妙 - Qiita
Honoka - 日本語も美しく表示できるBootstrapテーマ
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT