Bootstrapフレームワークについてどれだけ知っていますか
Bootstrapは、多くのプラットフォームで採用できるフロントエンドの技術的なフレームワークです。 Java/PHP/.NETは、フロントエンドインターフェイスとして使用できます。 jQueryを統合すると、非常に豊富なインターフェイス効果が得られます。現在、すべての人が使用できるようにできる多くのブートストラッププラグインがあります。ただし、多くの国内ブートストラップベースの紹介は、依然として教育に焦点を当てており、さまざまな基本的な知識とブートストラップの簡単な使用を紹介しています。この記事では、C＃に基づいた実際のMVCプロジェクトに基づいたブートストラップ開発フレームワークの包括的なケースを提供し、実際のプロジェクトコードと効果のスクリーンショットで説明し、この分野での経験と経験を詳細かつ直感的に紹介するよう努めています。
1。メトロニックに基づくブートストラップ開発フレームワークの概要
Metronicは、HTML、JS、その他のテクノロジーに基づいた外国のブートストラップ開発フレームワークであり、多くのブートストラップフロントエンドテクノロジーとプラグインを統合しています。それは非常に優れた技術的枠組みです。この記事に基づいて、MVCのWebフレームワークに関する私の研究と組み合わせて、この記事では、MVCに基づいたBootstrap開発フレームワークを統合して、実際のプロジェクトの構造的ニーズを満たすことができます。
以下は、私のプロジェクト全体の全体的なレンダリングです。
メニュー領域のコンテンツはデータベースから動的に取得され、一部の情報はシステムの上部列に配置され、個人情報の表示、ログアウト、画面のロックなど、個人データの迅速な処理をユーザーに提供します。コンテンツ領域は主に視覚的に表示されます。一般に、データも追加、削除、変更、およびページングする必要があるため、さまざまな機能を統合する必要があります。クエリとユーザーのデータの表示に加えて、日常的なデータ処理機能であるインポートおよびエクスポート関連操作も必要です。これらのルールとインターフェイス効果を決定した後、コード生成ツールを介してそれらを生成して、これらのWebプロジェクトのインターフェイス効果を迅速に生成できます。
2。ブートストラップ開発フレームワークメニューディスプレイ
フレームワーク全体には、通常のブートストラップのさまざまなCSS機能の使用、メニューバー、ブートストラップアイコン管理、システムトップバー、ツリーコントロールJSTREE、ポートレットコンテナ、モーダルダイアログボックス、タブコントロール、ドロップダウンリストセレクティ、チェックボックスアイデック、マルチテキスト編集コントロールの概要、ファイルアップデスプレイのコントロールコントロール、コントロールの概要を含む、多くのコンテンツが含まれます。 Touchspin、ビデオプレイディスプレイコントロールビデオプレイヤーなど。これらの機能は、全体的なソリューションで設計されています。これらの優れたプラグインを収集すると、より強力な機能とリッチインターフェイスエクスペリエンスをフレームワークに提供できます。
このセクションは、フレームワークの先頭、メニューの処理とプレゼンテーションに引き続き戻ります。一般に、管理の便利さのために、メニューは3つのレベルに分かれています。選択したメニューは、他のメニュースタイルとは異なります。メニューを折りたたんで最小化できます。効果は次のとおりです。
Bootstrapでは、メニューを構築するのは比較的簡単な作業です。主にULとLiを使用します。スタイル処理により、メニューレイアウトを設定できます。コードは次のとおりです。
<ul data-keep-expanded = "false" data-auto-scroll = "true" data-slide-speed = "200"> <li id = "1"> <a href = "/home/index"> <i> </i> <span> href = "javascript：;"> <i> </i> <span>業界動向</span> <span> </span> <span> </span> </a> <ul> <li style = "font-size：14px; color：yellow"> <i> </i>業界動向</li>規制</a> </li> <li> <a href = "＃"> <i> </i> <span> 4 </span>通知</a> </li> <li> <a href = "＃"> <i> </i> </ul> </ul> </ul>
ただし、一般的なメニューは動的に変更されます。つまり、データベースから取得してフロントエンドディスプレイに設定する必要があります。このようにして、MVCコントローラーにメニューコンテンツを出力し、メニューデータのダイナミクスを実現するためにフロントエンドインターフェイスにバインドする必要があります。同時に、これは許可制御の基本的な処理でもあります。
ベースクラスでは、メニューデータを取得して、ユーザーがログインした後にViewBagオブジェクトに配置できます。
特定のコードは次のとおりです。まず、ユーザーがログインしているかどうかを判断します。ログインした場合、ユーザーのメニューデータを取得すると、使用するためにViewBagで使用できます。
/// <summary> ///アクションが実行される前にベースクラスの処理を書き直します/// </summary> /// <param name = "filtercontext">メソッドのパラメーターを書き換えます</param>保護されたオーバーライドonactionexecuting（actionexecutextext filtercontext） // user login culernuser = session ["userinfo"] as userInfoの情報を取得します。 if（currentuser == null）{respons.redirect（ "/login/index"）; //ユーザーが空になっている場合は、loginインターフェイスにジャンプしてください} else {// authorization属性を設定し、viewbagに値を割り当ててconvertauthorizedinfo（）を保存します。 viewbag.authorizekey = authorizekey; //ログイン情報SET viewbag.fullname = currentuser.fullname; viewbag.name = currentuser.name; viewbag.menustring = getMenustring（）; //viewbag.menustring = getMenustringCache（）; //キャッシュを使用して、たまに更新します}}その中でも、GetMenustring関数はメニューのアセンブリと処理です。データベースのメニューの情報は、以下に示すようにツリー構造です。
データベースメニュー情報に基づいて、インターフェイスで使用されるHTMLコードを作成できます。
#region定義済みフォーマットテンプレート// javascript：; // {0}？tid = {1} var firsttemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> <span class = 'title'> {2} </span> <span <span '> span </span </</</</> var secondtemplate = @"<li class = 'hapeding' style = 'font-size：14px; color：yellow'> <i class = '{0}'> </i> {1} </li>"; var 3番目のtemplate = @"<li id = '{3}'> <a href = '{0}'> <i class = '{1}'> </i> {2} </a> </li>"; var firstTemplateEnd = "</li>"; var secondtemplatestart = "<ul class = 'sub-menu'>"; var secondTemplateEnd = "</ul>"; #endregionたとえば、第3レベルのメニューはコードを介して生成できます。
//レベル3アイコン= subnodeinfo.webicon; // TIDはトップレベルの分類IDであり、SIDは第3レベルのメニューID TMPURL = STRING.FORMAT（ "{0} {1} TID = {2}＆SID = {3}"、subnodeInfo.url、getUrlJoiner（subnodeinfo.url）、info.id、subnodeinfo.id）; url =（！string.isnullorempty（subnodeinfo.url）&& subnodeinfo.url.trim（）！= "＃"）？ tmpurl： "JavaScript :;"; sb = sb.appendformat（thirdtemplate、url、icon、subnodeinfo.name、subnodeinfo.id）;もちろん、並行性を高めたい場合は、メニューの頻繁な検索を減らして、次のようにデータのこの部分をMemerycacheに入れることができます。
public String getMenustringCache（）{String ItemValue = MemoryCacheHelper.getCacheItem <String>（ "getMenustringCache"、DeLegate（）{return getMenustring（）、null、datetime.now.addminutes（5）// 5分間、reget）; return itemValue; }3。レイアウトページの使用
同時に、ページの再利用を改善するために、通常、各ページの同じ部分のコンテンツを抽出し、レイアウト全体のページに配置します。このようにして、他の部分はすべてレイアウトビューページから継承されます。ダイナミックメニューパーツは、レイアウトビューのコンテンツの一部でもあります。
上記の図の_layout.cshtmlは、C＃に基づくMVC全体レイアウトビューページです。このようにして、メインページのコンテンツの一部とスクリプト表示の一部と同様に、このページのメニューディスプレイコンテンツを設定します。それで十分です。
メニューの表示コードは次のとおりです。
レイアウトページに残っているページ表示セクションは次のとおりです。
ブートストラップは通常、JSファイルを最後に配置するため、レイアウトページに必要なjQueryやその他のスクリプトの一部を保持することに加えて、ロードのためにスクリプトコンテンツの一部をページの下部に配置する必要があり、スクリプトの読み込みをMVCのバンドルテクノロジーを使用して圧縮および統合することもできます。このテクノロジーについては、以前の記事を参照して、「MVC4+ EasyUI（11）に基づくWeb開発フレームワークの経験の要約 - バンドルを使用して簡略化されたページコードを処理する」を紹介してください。
このようにして、各サブページのビューでレイアウトビューページを導入した後、パーソナライズされたディスプレイコンテンツの一部を記述する必要があります。特定のコードは次のとおりです。
次に、ページの下部に、必要な部分のスクリプトコードを含めるだけです。ページが生成されると、レイアウトページで設定された注文ブロックに従って合理的に表示され、コンテンツのすべての部分が統合されます。
4。ページ編集ツールの崇高なテキストの使用
前のスクリーンショットの多くはVS環境からのものですが、一般的にビューページを編集するとき、Sublimeテキスト、強力な編集ツール、リッチプラグイン、インテリジェントな構文プロンプトなどを使用します。ビューページを編集するための非常に高速なツールであり、強くお勧めします。
VSは通常、ファイル管理、コンパイル、その他の処理を行うために使用されます。
上記のコンテンツは、[i]フレームワークの概要とメニューモジュール処理に紹介されたBootstrap Metronicに基づいた開発フレームワークの経験の要約です。私はそれが誰にでも役立つことを願っています。詳細情報を知りたい場合は、wulin.comのWebサイトに注意してください！