In the previous essay, based on BootStrap Metronic's experience summary of the development framework [I] framework overview and the processing of menu modules, it introduces the processing of menu modules, and mainly introduces how to dynamically obtain records from the database and build menu lists. The icon style of the menu information is also obtained from the database, so we are required to dynamically obtain the various icon definitions in Bootstrap. This article mainly introduces how to extract Bootstrap's icon information and store it in the database for my use.
1. Menu display and various Bootstrap icons
We can see from the figure below that for the beauty of the menu, each menu item (there are three-level menus here) has an icon. Although the sizes are different, we use Bootstrap icons, which are all from the contents of the Bootstrap icon library.
The Bootstrap icon library is divided into three categories:
Font Awesome: Bootstrap's special icon font. All icons included in Font Awesome are vector, so they can be scaled arbitrarily, avoiding the hassle of having an icon to do multiple sizes. The styles that CSS can set for fonts can also be used on these icons.
For example, the following are some Font Awesome icons:
Simple Icons: Collect the logos of many websites and provide high-quality and different sizes of png format pictures to netizens. All Icon copyright belongs to their company.
As shown below are some icons of Simple Icons:
Glyphicons: Includes a collection of 200 symbolic font format charts provided by Glyphicons. Glyphicons Halflings is generally charged, but after negotiation between Bootstrap and Glyphicons authors, developers can use it without paying a fee.
Here are some of the Glyphics content:
Using these icon contents, we can just introduce the following styles.
<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"/>
These icons support thematic display of various Bootstraps, as shown in the following effects.
Or you can also make the icon bigger:
2. Extraction of various Bootstrap icons
Through the above introduction, we probably have a certain understanding of these Bootstrap icons, but if we want to be able to select icons in menu editing, we still need to extract this information into the database and display it for me to choose, otherwise dynamic configuration will not be possible.
For example, in the above editing interface, we provide dynamic selection of the menu's web icons. If we record a collection of the above icons in the database, we can display it in the interface and select the appropriate chart from it.
Based on the above style files, let's analyze it. For the file content of font-awesome.min.css, the icon definition part is as follows.
For simple-line-icons, its style definition is similar, as shown below.
For Glyphicons, its style definition is also very similar, as shown below.
Based on these information, we can extract the information we need through regular expression matching and store it in the database to realize the first step of dynamic display and selection of icons.
For example, we define partial variables and regular expressions to handle these file contents:
string regex = "^//.(?<name>.*?):before//s*//{"; List<string> filePathList = new List<string>() { "~/Content/themes/meteronic/assets/global/plugins/bootstrap/css/bootstrap.css", "~/Content/themes/meteronic/assets/global/plugins/simple-line-icons/simple-line-icons.css", };Then, the collection content can be extracted by reading the file content and obtaining the matching record.
string content = FileUtil.FileToString(realPath); List<string> matchList = CRegex.GetList(content, regex, 1);
Finally, we can save this information into the database table.
BootstrapIconInfo info = new BootstrapIconInfo() { DisplayName = item, ClassName = prefix + item, CreateTime = DateTime.Now, SourceType = sourceType, }; BLLFactory<BootstrapIcon>.Instance.Insert(info);Finally, the record is stored in the database. The effect is as follows. The icon information we need has been recorded. In this way, when using it, you can use the information of each field to display a good-looking interface.
3. Bootstrap icon display and selection
After we read the file and extract the content in regular expressions, and then save it to the database, these icon information can be used for us and can be displayed in a classified manner on the page. Each type of icon is paginated for easy query, as shown below.
The display page code in this part is similar to the regular data display, but the header information is not required. Let’s take a look at the page code as shown below.
<div> <div> <div> <i></i> Icon Information</div> </div> <div> <div> <span>Show per page</span> <select id="rows" onchange="ChangeRows()"> <option>50</option> <option selected>100</option> <option>200</option> <option>1000</option> </select> <span>Record</span> <span>Total records: </span><span id='totalCount'>0</span>, total page count: <span id='totalPageCount'>0</span> pages. </div> <hr /> <div style="padding-left:20px"> <div id="grid_body"></div> <div> <ul id='grid_paging'></ul> </div> </div> </div> </div> </div> </div>
The main icon display content is in the HTML in the above part.
<div id="grid_body"></div>
The processing script that dynamically obtains and generates HTML code to display on the interface is as follows.
$.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 selects the corresponding icon, we can set the Span style through the script to display the icon we selected, as shown below.
$("#i_WebIcon").attr("class", classname);Of course, when we select an icon, we provide a pop-up dialog box to display icons with different categories, so that the user can return after selecting it.
In this way, we are done, extracting different types of charts from the icon file, then storing them in the database, and displaying them on the page, for us to dynamically select and set.
The above is the summary of experience of BootStrap Metronic development framework introduced by the editor to you [Four] The relevant knowledge about the extraction and utilization of Bootstrap icons. I hope it will be helpful to everyone. If you want to know more information, please pay attention to the Wulin.com website!