フロントエンドを理解していないプログラマーは優れたアーティストではありません -- UI フレームワーク メトロニックの使い方チュートリアル -- プログラマーの視点_html/css_WEB-ITnose

フロントエンドを理解していないプログラマは良いアーティストではないという考えに基づいて、フロントエンドについて少ししか知らないプログラマが良いアーティストになるためには、

metronic は、ブートストラップの応答性の高いバックエンド管理プラットフォームの UI フレームワークに基づいたプログラムで、管理バックエンドで使用できるさまざまな UI スタイルを提供します。 UI デザインは、さまざまなデバイスと画面解像度を同時にサポートします。UI スタイルに大きな欠陥はありません。

metronic ディレクトリの start.htm ファイルを開きます。で、次のビューが表示されます:

フレームワークにはいくつかのテーマ カラーが組み込まれており、テーマを選択して HTML ボタンを押すと、対応するテーマのページ プレビュー ページに移動します:

プレビュー ページは主に左側のメニューと、右側のコンテンツ ページとサイドバーで構成されていることがわかります。基本的に、上のナビゲーションの右側にあるサイドバーを削除するなど、いくつかのレイアウト調整を行うことができます。

左側のメニューのさまざまなオプションは、このフレームワークによって組み込まれたさまざまな UI スタイルです。 UI コンポーネント フォームのさまざまなスタイルが含まれています。対応するページ ファイルを表示して、対応するスタイルのフロントエンド コードを表示できます。

これはプログラマの観点からのチュートリアルであるため、フロントエンド コードは紹介しません。ただし、このスタイル ライブラリをより効果的に使用するには、ブートストラップ チュートリアルを参照することをお勧めします。

ブートストラップ初心者向けチュートリアル

上記の初心者向けチュートリアルは次のとおりです。実際には非常に簡単ですが、それでも、あまり詳しく見る必要はありません。最初の部分で CSS を確認し、2 番目の部分でレイアウト コンポーネントをざっと確認するだけです。

それでは、ここで実践的な方法を説明します。たとえば、metronic ディレクトリにあるファイル /theme/templates/admin/table_editable.html を開くと、これが編集可能なテーブル コンポーネントであることがわかります。このページで紹介されている form-editable.js ファイルは、実際には、ビジネス ロジックと実際のニーズに基づいて変更する必要がある js ファイルであり、テーブル コンポーネントの UI スタイル関数が含まれています。ここでは、js コードの実装を確認し、このコンポーネントの使用規則を簡単に整理してから、すべてのコードを独自の js ファイルにコピーし、必要に応じて特定の変更を加えます。独自に修正した js ファイルを紹介します

上記は、プログラマの観点から見た、このメトロニック フレームワークの簡単な適用プロセスです。基本的に、サンプル スタイルを見つけて、ソース コードを表示し、並べ替えるだけで済みます。プラグインの js ロジックを変更して導入すると、非常に見栄えの良い UI インターフェイスが得られます。

PS: metronic ディレクトリの Themesassetsglobalcss にあるグローバル スタイルは、特に 3D シャドウ スタイルに非常に優れた効果をもたらします。名前に md が付いています。これは非常に美しいです

。