前のエッセイでは、Metrronicの開発フレームワークの概要の概要とメニューモジュールの処理のBootstrap Metronicのエクスペリエンスの概要に基づいて、メニューモジュールの処理を導入し、主にデータベースとビルドメニューリストからレコードを動的に取得する方法を紹介します。メニュー情報のアイコンスタイルもデータベースから取得されるため、Bootstrapのさまざまなアイコン定義を動的に取得する必要があります。この記事では、主にBootstrapのアイコン情報を抽出し、使用するためにデータベースに保存する方法を紹介します。
1.メニューディスプレイとさまざまなブートストラップアイコン
下の図から、メニューの美しさのために、各メニュー項目（ここには3レベルのメニューがあります）にアイコンがあることがわかります。サイズは異なりますが、Bootstrapアイコンを使用します。これらはすべてBootstrapアイコンライブラリの内容からのものです。
ブートストラップアイコンライブラリは、3つのカテゴリに分かれています。
フォント素晴らしい：ブートストラップの特別なアイコンフォント。 Font Awesomeに含まれるすべてのアイコンはVectorであるため、複数のサイズを実行するアイコンがあるという手間を避けて、任意にスケーリングできます。これらのアイコンでは、CSSがフォント用に設定できるスタイルも使用できます。
たとえば、以下はいくつかのフォントの素晴らしいアイコンです。
シンプルなアイコン：多くのWebサイトのロゴを収集し、Netizensに高品質でさまざまなサイズのPNG形式写真を提供します。すべてのアイコンの著作権は会社に属します。
以下に示すように、単純なアイコンのアイコンがいくつかあります：
Glyphicons：Glyphiconsが提供する200のシンボリックフォント形式のチャートのコレクションが含まれています。 Glyphiconsのハーフリングは一般に請求されますが、BootstrapとGlyphiconsの著者との交渉の後、開発者は料金を支払うことなく使用できます。
グリファックコンテンツの一部は次のとおりです。
これらのアイコンの内容を使用して、次のスタイルを紹介できます。
<link href = "/content/meter/font-awesome/css/font-awesome.min.css" rel = "styleSheet"/> <link href = "/content/meter/simple-line-icons/simple-line-icons.min.css" rel = "styleSheet"/> <link href = "/content/meter/bootstrap/css/bootstrap.min.css" rel = "styleSheet"/>
これらのアイコンは、次の効果に示すように、さまざまなブートストラップのテーマの表示をサポートしています。
または、アイコンを大きくすることもできます。
2。さまざまなブートストラップアイコンの抽出
上記の紹介を通して、おそらくこれらのブートストラップアイコンを確実に理解していますが、メニュー編集でアイコンを選択できる場合は、この情報をデータベースに抽出し、選択できるように表示する必要があります。
たとえば、上記の編集インターフェイスでは、メニューのWebアイコンの動的選択を提供します。データベースに上記のアイコンのコレクションを録画すると、インターフェイスに表示して、そこから適切なチャートを選択できます。
上記のスタイルファイルに基づいて、分析しましょう。 font-awesome.min.cssのファイルコンテンツの場合、アイコン定義の部分は次のとおりです。
Simple-Line-Iconsの場合、以下に示すように、そのスタイルの定義は似ています。
グリフィコンの場合、以下に示すように、そのスタイルの定義も非常に似ています。
これらの情報に基づいて、正規表現マッチングを通じて必要な情報を抽出し、データベースに保存して、動的表示とアイコンの選択の最初のステップを実現できます。
たとえば、これらのファイルの内容を処理するために、部分変数と正規表現を定義します。
string regex = "^//。（？<name>。*？）：// s*// {"; List <String> FilePathList = new List <String>（）{"〜/Content/Themes/Assets/Global/Plugins/bootstrap/css/bootstrap.css/themes/assets/assets/global/glugins/simple-line-icons/simple-line-line-line-line.css";次に、ファイルコンテンツを読み取り、マッチングレコードを取得することにより、コレクションコンテンツを抽出できます。
文字列content = fileutil.filetostring（realpath）;リスト<String> MatchList = Cregex.getList（content、regex、1）;
最後に、この情報をデータベーステーブルに保存できます。
bootstrapiconinfo info = new bootstrapiconinfo（）{displayname = item、classname = freix + item、createTime.now、sourceType = sourceType、}; bllfactory <bootstrapicon> .instance.insert（info）;最後に、レコードはデータベースに保存されます。効果は次のとおりです。必要なアイコン情報が記録されています。このようにして、それを使用すると、各フィールドの情報を使用して、見栄えの良いインターフェイスを表示できます。
3.ブートストラップアイコンの表示と選択
ファイルを読み取り、コンテンツを正規表現で抽出してからデータベースに保存した後、これらのアイコン情報を使用することができ、ページに分類された方法で表示できます。以下に示すように、各タイプのアイコンは簡単なクエリのために塗装されています。
このパートの表示ページコードは通常のデータ表示に似ていますが、ヘッダー情報は必要ありません。以下に示すように、ページコードを見てみましょう。
<div> <div> <div> <i> </i>アイコン情報</div> </div> <div> <div> <div> <div> <span> show er per page </span> <select id = "rows" onchange = "changerows（）"> <option> </span> <span id = 'totalcount'> 0 </span>、合計ページカウント：<span id = 'totalpagecount'> 0 </span>ページ。 </div> <hr/> <div style = "padding-left：20px"> <div id = "grid_body"> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div> </div> </div> </div>
メインアイコン表示コンテンツは、上記のHTMLにあります。
<div id = "grid_body"> </div>
インターフェイスに表示するHTMLコードを動的に取得して生成する処理スクリプトは次のとおりです。
$ .getjson（iconurl + "＆" +条件、function（data）{$（ "＃icon_body"）。html（ ""）; $ .each（data.row.rows、function（i、item）{var tr = "<a href =/" javascript：;/"onclick =/" geticon（ '" +" "class +"/"Icnam title =/" + item.displayname +"/">"; tr + = "<i class =/" " + item.classname +"/"style =/" font-size：2.2em/"> </i>"; // tr + = "<div>" + item.displayname + "</div>" $（ "＃icon_body"）。ユーザーが対応するアイコンを選択した後、以下に示すように、選択したアイコンを表示するためにスパンスタイルをスクリプトに設定できます。
$（ "＃i_webicon"）。attr（ "class"、classname）;
もちろん、アイコンを選択すると、異なるカテゴリのアイコンを表示するポップアップダイアログボックスを提供して、ユーザーが選択した後に戻ることができます。
このようにして、アイコンファイルからさまざまなタイプのチャートを抽出し、データベースに保存し、ページに表示して、動的に選択して設定できるようになりました。
上記は、Bootstrap Iconの抽出と利用に関する関連する知識を編集者によって紹介したBootstrap Metronic Development Frameworkの経験の要約です。私はそれが誰にでも役立つことを願っています。詳細情報を知りたい場合は、wulin.comのWebサイトに注意してください！