Meizi UI 開発_html/css_WEB-ITnose を使用したエクスペリエンスの共有

少し前に bootstrap に似たフロントエンド UI フレームワークを見つけて、しばらく考えましたが、最終的に Web サイトをリニューアルするときにその効果を試すためにこの UI を使用することにしました。

ホームページ + ヘッダー:

投稿ページ:

コピー済みレビューリスト:

概要:

開始の難易度:

(ブートストラップに慣れている): ★

(ブートストラップに慣れていない): ★★★

長所:

1. 多くのコンポーネントが直接使用でき、一般的に使用されるコンポーネントが基本的に利用可能であり、迅速な処理に適しています。開発;

2. 公式 Web サイトのドキュメントは非常に詳細であり、初心者にとっては基本的なものです。プレッシャーはありません

3. スタイルがより美しくなります (ブートストラップ エフェクトを見すぎたかどうかはわかりません)。この UI はブートストラップよりも見栄えが良いと思います)

欠点:

1. この UI の多くはブートストラップに基づいており、多くの機能はまだ実際には開発されていないと言えます。 ins は、js で自由に呼び出すことができないポップアップ ボックス部分などを改善する必要があります

次に、スタイルの書き換えに関して、元のスタイルが気に入らない場合は、たとえば独自のスタイルに変更します。色、サイズなど。独自のCSSクラスをコンポーネントに追加すると無効になるようです（これに遭遇しました、書き方が間違っているかどうかはわかりません）。現時点では、次の方法で解決しました：

1. 元のフレームの CSS スタイルを見つけて、好みのスタイルに変更します。

2. HTML タグに直接スタイルを記述します (この記述方法はあまり推奨されていないようですが、これも役に立ちません)動く） 。

3. 非同期結果を処理する場合、HTML の変更は無効になります。たとえば、ドロップダウン ボックスの内容は表示されません (図 1 の効果)。問題を解決してください（この問題はログイン機能にあることがわかりました）、ajax ログインが成功した後にページを更新します。そうしないと、ボタンがドロップダウン ボックスになり、ドロップダウンが表示されなくなります o(╯□╰ )o

4. ポップアップ効果はブートストラップほど良くありません

要するに、改訂が基本的に完了したので、特定の効果を確認したい場合は、次の方法でフレームワークを学ぶことができます。 www.weixh.net にアクセスしてください