Bootstrap 4 のradioやcheckboxでスマートにエラーメッセージを表示するには
ブログ Bootstrap 4 のradioやcheckboxでスマートにエラーメッセージを表示するには 2020.03.03 Twitter Bootstrap 4 では、サーバーサイドでチェックした入力エラーのメッセージを表示するための「invalid-feedback」クラスが用意されており、 項目ごとに分かりやすく表示されるようになっています。 しかしながら、ラジオボタンやチェックボックスで選択肢が複数ある場合に、 公式サイトの説明 の通りにHTMLを出力しても、期待通りにならないことがありました。 その場合への対処方法をご紹介します。 目次 1行テキスト欄でのサンプル複数の選択肢を持つラジオボタンでは？最終的な対処方法 1.1行テキスト欄でのサンプル 例えば、次のような「お名前」欄があり、エラーチェックの前後で下図のようにエラーメッセージが表示されると分かりやすいですね。 エラー
サイドバーの実例～Bootstrap5設置ガイド
body { min-height: 100vh; min-height: -webkit-fill-available; } html { height: -webkit-fill-available; } main { height: 100vh; height: -webkit-fill-available; max-height: 100vh; overflow-x: auto; overflow-y: hidden; } .dropdown-toggle { outline: 0; } /* 折り畳み可能リストのサイドバー用 */ .btn-toggle { padding: .25rem .5rem; font-weight: 600; color: var(--bs-emphasis-color); background-color: transparent; } .btn-
新しくなったBootstrap 5を使用して、管理画面のUIを実装する方法を解説
Bootstrap 5 alphaがついにリリースされましたね。 この新しいBootstrap 5では、jQueryが削除され、IEのサポートも終了し、実装の手順も少し変わりました。 Bootstrap 5で管理画面のダッシュボードを実装するチュートリアルを紹介します。 Tutorial: how to build a simple admin dashboard interface using Bootstrap 5 by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Bootstrap 5の準備 ユーザー設定を含むナビゲーションバーの実装 ナビゲーションアイテムを含むサイドバーの実装 タイトル、キャッチ、パンくずを含むセクションの実装 いくつかのカードを含むメインコンテンツ フッタの実装 Vol
RailsエンジニアのためのTwitter Bootstrapカスタマイズ例
Sassを使ったり、人からパクったりして、極力失敗しない方法
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
