Bootstrap でローディング効果を実現するにはどうすればよいですか?以下の記事では、Bootstrap5の読み込みアイコン(Spinners)コンポーネントを使って、コンポーネントの読み込み状況を示すアイコンの見方を紹介していますので、ご参考になれば幸いです。
1 シンプルな読み取りアイコン
ブートストラップを使用して、コンポーネントの読み込みステータスを示すアイコンを読み取ります。これらの読み取りアイコンは HTML、CSS を完全に使用し、JavaScript は使用しません。使用済み。それらの外観、配置、サイズは共通クラスを使用してカスタマイズできますが、表示を切り替えるにはカスタム JavaScript が必要です。 [関連する推奨事項: "ブートストラップ チュートリアル"]
以下は簡単な読み取りアイコンです
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>读取图标</title>
</head>
<body>
<div>
<br><br><br><br>
<div role="status">
<span>Loading...</span>
</div>
</div>
</body>
</html>
2 色
境界線読み取りアイコンは、境界線の色として currentColor を使用します。つまり、テキストの色の一般カテゴリを使用してその色をカスタマイズできます。標準の既読アイコンでは、一般的なカテゴリの色を使用できます。
<div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-secondary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-success" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-danger" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-warning" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-info" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-light" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-border text-dark" role="status"> <span class="visually-hidden">Loading...</span> </div>
3 グラデーション読み取りアイコン
境界線読み取りアイコンが気に入らない場合は、グラデーション読み取りアイコンに切り替えることができます。技術的には回転しませんが、何度もフェードします。 グラデーション アイコンはさまざまな色もサポートしています。
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
上記と同じように、この読み取りアイコンも currentColor を使用するため、テキスト カラー ユニバーサル カテゴリを使用して外観を簡単に変更できます。こちらは青と、それがサポートするカラーバリエーションです。
<div class="spinner-grow text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-secondary" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-success" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-danger" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-warning" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-info" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-light" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow text-dark" role="status"> <span class="visually-hidden">Loading...</span> </div>
4 マージン
マージン ユーティリティを使用して、単純に m-5 のように間隔を増やします。
<div class="spinner-border m-5" role="status"> <span class="visually-hidden">Loading...</span> </div>
5 配置
フレックスボックスの一般カテゴリ、フロートの一般カテゴリ、またはテキスト レイアウトを使用して、どのような場合でも読み取りアイコンを正確に配置します。必要な場所に配置します。それ。
5.1 Flex
以下は中央揃えです
<div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
右揃え
<div class="d-flex align-items-center"> <strong>Loading...</strong> <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> </div>
##5.2 Float
右揃えのフローティング実装<div class="clearfix"> <div class="spinner-border float-end" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
5.3 テキスト一般クラス
テキスト一般クラスは中央揃えを実装します<div class="text-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> </div>
<div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow spinner-grow-sm" role="status"> <span class="visually-hidden">Loading...</span> </div>
<div class="spinner-border" style="max-width:90%" role="status"> <span class="visually-hidden">Loading...</span> </div> <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status"> <span class="visually-hidden">Loading...</span> </div>
<button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">Loading...</span> </button> <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading... </button>
<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">Loading...</span> </button> <button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> Loading... </button>
ブートストラップの基本チュートリアルを参照してください。 ！
以上がBootstrap でローディング効果を実現するにはどうすればよいですか?アイコン (スピナー) コンポーネントを読み取ります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Bootstrap：アプリケーションと利点が説明されていますMay 10, 2025 am 12:18 AMBootstrapは、レスポンシブWebサイトをすばやく構築するためのフロントエンドフレームワークです。その利点には次のものが含まれます。1。迅速な開発：事前定義されたスタイルとコンポーネントを活用します。 2。一貫性：統一されたデザインスタイルを提供します。 3。レスポンシブ設計：組み込みのグリッドシステムは、さまざまなデバイスに適合しています。 Bootstrapは、CSSクラスとJavaScriptプラグインを通じてWeb開発プロセスを簡素化します。
ブートストラップ：レスポンシブWeb開発の簡素化May 09, 2025 am 12:13 AMBootstrapは、主にラスターシステム、事前定義されたコンポーネント、JavaScriptプラグインを介して開発プロセスを簡素化します。 1.グリッドシステムでは、柔軟なレイアウトを可能にします。2。ボタンやナビゲーションバーなどの事前定義されたコンポーネントは、スタイル設計を簡素化します。
ブートストラップ：レスポンシブWebデザインの鍵May 08, 2025 am 12:24 AMBootstrapは、Twitterが開発したオープンソースのフロントエンドフレームワークであり、豊富なCSSとJavaScriptコンポーネントを提供し、レスポンシブWebサイトの構築を簡素化します。 1）そのグリッドシステムは12列のレイアウトに基づいており、異なる画面サイズの下の要素の表示はクラス名を介して制御されます。 2）コンポーネントライブラリには、カスタマイズと使用が簡単なボタン、ナビゲーションバーなどが含まれています。 3）作業原則はCSSおよびJavaScriptファイルに依存しており、依存関係とスタイルの対立の処理に注意する必要があります。 4）使用例は、カスタム機能の重要性を強調し、基本的および高度な使用法を示しています。 5）一般的なエラーには、開発者ツールを使用したデバッグが必要なグリッドシステムの計算エラーとスタイルカバレッジが含まれます。 6）パフォーマンスの最適化の推奨事項は、必要なコンポーネントを導入し、プリプロセッサを使用してサンプルをカスタマイズするだけです
ブートストラップ：Webデザインの強力なフレームワークMay 07, 2025 am 12:05 AMBootstrapは、Web開発プロセスを簡素化して高速化するために、Twitterチームが開発したオープンソースのフロントエンドフレームワークです。 1.BootStrapはHTML、CSS、およびJavaScriptに基づいており、最新のユーザーインターフェイスを作成するための豊富なコンポーネントとツールを提供します。 2。そのコアは、レスポンシブデザインにあり、事前定義されたクラスとコンポーネントを通じてさまざまなレイアウトとスタイルを実装しています。 3.BootStrapは、ナビゲーションバー、ボタン、フォームなどの事前定義されたUIコンポーネントを提供します。これらは使いやすく調整します。 4.使用の例には、シンプルなナビゲーションバーと高度な折りたたみ式サイドバーの作成が含まれます。 5.一般的なエラーには、バージョンの競合、CSS上書き、JavaScriptエラーが含まれます。これは、バージョン管理ツールを介して使用できます。
Reactのブートストラップの力：詳細な外観May 06, 2025 am 12:06 AMブートストラップは、2つの方法でReactに統合できます。1）CSSおよびJavaScriptファイルをBootStrapを使用して。 2）React-Bootstrapライブラリを使用します。 React-Bootstrapは、カプセル化された反応成分を提供し、Reactでより自然で効率的にブートストラップを使用します。
Reactでブートストラップコンポーネントを使用：ステップバイステップチュートリアルMay 05, 2025 am 12:09 AMReactプロジェクトでブートストラップコンポーネントを使用するには2つの方法があります。1）元のブートストラップのCSSとJavaScript。 2）React-BootstrapやReactStrapなどのReact専用に設計されたライブラリを使用します。 1）npmにブートストラップをインストールし、エントリファイルにCSSファイルを導入し、Reactコンポーネントでブートストラップクラス名を使用します。 2）React-BootstrapまたはReactStrapをインストールした後、提供するReactコンポーネントを直接使用します。これらの方法を使用してレスポンシブUIをすばやく構築しますが、スタイルの読み込みとJavaScriptに注意してください
平易な英語のブートストラップ：Web開発の簡素化May 04, 2025 am 12:02 AMBootstrapは、Web開発を簡素化するオープンソースのフロントエンドフレームワークです。 1. HTML、CSS、JavaScriptに基づいており、事前定義されたスタイルとコンポーネントを提供します。 2。事前定義されたクラスとJavaScriptプラグインを使用して、レスポンシブレイアウトとインタラクティブ機能を実装します。 3.基本的な使用法は、CSSおよびJavaScriptファイルを導入し、クラスを使用してナビゲーションバーを作成するなどです。4。高度な使用には、カスタム複雑なレイアウトが含まれます。 5.デバッグ中にクラス名とファイルの導入を確認し、開発者ツールを使用します。 6.最適化の提案は、必要なファイルのみを導入し、CDNを使用し、カスタマイズするときにLessまたはSASSを使用することです。
ブートストラップと反応：レスポンシブWebアプリケーションの作成May 03, 2025 am 12:13 AMBootstrapとReactを使用してレスポンシブWebアプリケーションを作成する方法は？ BootstrapのCSSフレームワークとReactのコンポーネントアーキテクチャを組み合わせることで、モダンで柔軟で保守しやすいことを作成できます。特定の手順には次のものが含まれます。1）ブートストラップのCSSファイルをインポートし、そのクラスを使用して反応コンポーネントをスタイリングします。 2）Reactのコンポーネントを使用して状態と論理を管理する。 3）パフォーマンスを最適化するために必要に応じてブートストラップスタイルをロードする。 4）ReactのフックとブートストラップのJavaScriptコンポーネントを使用して、動的インターフェイスを作成します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
