Experience summary of Bootstrap development framework based on metronic (4) extraction and utilization of--bootstrap icon

1. Menu display and various bootstrap icons

As we can see, for the Beautiful menu, each menu item (here is divided into three level menu) has an icon, although the size is different, we use the bootstrap icon, are from the Bootstrap icon library content.

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/251719057039957.png "style=" border:0px ; "/>

The bootstrap icon Library is divided into three categories of content:

Font Awesome: Bootstrap dedicated icon font, the font Awesome contains all the icons are vector, you can arbitrarily zoom, avoid an icon to do a variety of size trouble. CSS can also be used to set the style of the font may be applied to these icons.

The following is a partial font Awesome icon:

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271518311405965.png "style=" border:0px ; "/>

Simple Icons: Collect many websites logo, and provide high-quality, different sizes of PNG format images to the vast number of netizens, all the icon copyright belongs to its company.

As shown below are some of the simple icons icons:

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271520216724234.png "style=" border:0px ; "/>

glyphicons: Includes a collection of 200 symbol font format charts, provided by Glyphicons, Glyphicons Halflings is generally charged, but through negotiation between bootstrap and glyphicons authors, Allows developers to use without paying a fee.

Here are some of the glyphicons content:

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271521307659141.png "style=" border:0px ; "/>

Using these kinds of icon content, we can introduce the following styles.

<link href= "/content/metronic/font-awesome/css/font-awesome.min.css" rel= "stylesheet"/><link href= "/ Content/metronic/simple-line-icons/simple-line-icons.min.css "rel=" stylesheet "/><link href="/Content/ Metronic/bootstrap/css/bootstrap.min.css "rel=" stylesheet "/>

These icons are all supported by a variety of bootstrap themes, as shown in the following effects.

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271535532978883.png "style=" border:0px ; "/>

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271533354223396.png "style=" border:0px ; "/>

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271533430477958.png "style=" border:0px ; "/>

Or you can make the icons bigger:

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271533525159350.png "style=" border:0px ; "/>

2, various bootstrap of the icon extraction

Through the above introduction, we estimate that these kinds of bootstrap icons have a certain understanding, but if we want to be able to choose the icon in the menu editor, then we still need to extract this information into the database, and then show me to choose, otherwise can not be dynamic configuration.

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271537224848263.png "style=" border:0px ; "/>

such as the above editing interface, the menu of the Web icon provides a dynamic choice, then if we have a database of the above several icons set, then we can display it in the interface, and we can choose the appropriate chart.

Based on the above several style files, we analyze, for example, for the Font-awesome.min.css file content, it is shown below for the icon definition section.

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271541560627610.png "style=" border:0px ; "/>

For Simple-line-icons, however, its style definition is similar, as shown below.

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271544540004770.png "style=" border:0px ; "/>

For glyphicons, its style definition is similar, as shown below.

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271549379849895.png "style=" border:0px ; "/>

According to these kinds of information, we can get the information we need by means of regular expression matching, and store it in the database to realize the first step of dynamic display and selection of the icon.

For example, we define partial variables and regular expressions to handle the contents of these files:

String regex = "^\\." (? <name>.*?): before\\s*\\{"; list<string> filepathlist = new list<string> () {"~/content/themes/metronic/assets/global/plugins/ Bootstrap/css/bootstrap.css "," ~/content/themes/metronic/assets/global/plugins/font-awesome/css/ Font-awesome.css "," ~/content/themes/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.css ",};

The contents of the collection can then be extracted by reading the contents of the file and obtaining the matching records.

String content = Fileutil.filetostring (Realpath); list<string> matchlist = cregex.getlist (content, regex, 1);

Finally, we save this information in a database table.

Bootstrapiconinfo info = new Bootstrapiconinfo () {DisplayName = Item, ClassName = prefix + Item,    Createtime = DateTime.Now, sourcetype = sourcetype,}; Bllfactory<bootstrapicon>. Instance.insert (info);

The final record is stored in the database, the effect is as follows, the information we need to record the icon, so that in the actual use, you can use the information of the various fields, to display a good-looking interface.

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271612281726530.png "style=" border:0px ; "/>

3.Bootstrap display and selection of icons

We read through the file and extract the content in the regular expression, and then save to the database, these icon information can be used for us, can be categorized in the page, each class of icons for paging, easy to query, as shown below.

650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271559402818101.png "style=" border:0px ; "/>

This part of the display page code and the regular data display is similar, just do not need the header information, we take a look at the page code as shown below.

<div class= "Portlet box green-meadow" ><div class= "Portlet-title" ><div  Class= "caption" > <i class= "fa fa-filter" ></i> icon info </div></div><div  class= "Portlet-body flip-scroll" ><div><span> show </span><select id= per page " Rows " onchange=" Changerows () "><option>50</option><option selected>100</ Option><option>200</option><option>1000</option></select><span> Records </ Span>&nbsp;&nbsp;<span> Total records: </span><span id= ' TotalCount '  class= ' label  label-success ">0</span>, total Pages: <span id= ' Totalpagecount '  class=" label  Label-success ">0</span> page. </div>
The main icons are displayed in the HTML of the above section.
<div class= "Portlet-body" id= "Grid_body" ></div>
The processing script that dynamically gets and generates HTML code displayed on the interface is shown below.
$.getjson (IconUrl + "&" + condition, function (data) {$ ("#icon_body"). HTML (""); $.each (data.rows, function (I, item) { var tr = "<a href=\" javascript:;\ "onclick=\" GetIcon (' "+ Item.) ClassName + "') \" class=\ "icon-btn\" title=\ "+ item. DisplayName + "\" > "; tr + =" <i class=\ "" + Item. ClassName + "\" style=\ "font-size:2.2em\" ></i> "////tr + =" <div> "+ item. DisplayName + "</div>"; tr + = "</a>"; $ ("#icon_body"). Append (tr);});
After the user chooses the corresponding icon, we can use the script to set the span style to show the icon we have selected, as shown below.
$ ("#i_WebIcon"). attr ("class", classname);
Of course, when we choose the icon, provide a pop-up dialog box to display the different icons, so that the user can choose to return.
650) this.width=650; "src=" Http://images0.cnblogs.com/blog2015/8867/201508/271602155948817.png "style=" border:0px ; "/>
So we finished, from the icon file to extract different types of charts, and then stored in the database, and displayed in the page, we can dynamically select and set.

This article is from the "Wu Huacong blog" blog, make sure to keep this source http://wuhuacong.blog.51cto.com/1779896/1828722
Experience summary of Bootstrap development framework based on metronic (4) extraction and utilization of--bootstrap icon