Shulou(Shulou.com)06/01 Report--

1. Display of menus and various Bootstrap icons

As we can see from the following figure, for the beauty of the menu, each menu item (here is divided into three levels of menus) has an icon, although the size is different, we use Bootstrap icons from the contents of the Bootstrap icon library.

The Bootstrap icon library is divided into three categories:

Font Awesome:Bootstrap special icon font, all icons contained in Font Awesome are vector, which can be scaled arbitrarily, avoiding the trouble of making multiple sizes of one icon. The styles that CSS can set for fonts can also be applied to these icons.

For example, the following is the icon of some Font Awesome:

Simple Icons: collect the Logo of many websites, and provide high-quality, different sizes of png format pictures to the majority of netizens, all Icon copyright belongs to its own company.

Some of the icons for Simple Icons are shown below:

Glyphicons: includes a collection of 200symbol font format charts, provided by Glyphicons. Glyphicons Halflings is generally for a fee, but through negotiation between Bootstrap and Glyphicons authors, it allows developers to use it without paying a fee.

The following is part of the Glyphicons:

Using these icon contents, we can introduce the following styles.

All of these icons support the thematic display of various Bootstrap, as shown in the following effects.

Or you can make the icon larger:

2. Extraction of all kinds of Bootstrap icons

Through the above introduction, we estimate that we have some understanding of these Bootstrap icons, but if we want to be able to select icons in menu editing, then we still need to extract this information into the database and show it to me for selection, otherwise we will not be able to achieve dynamic configuration.

If the Web icon of the menu is dynamically selected in the editing interface above, then if the collection of the above icons is recorded 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 example, for the contents of the font-awesome.min.css file, the definition section for the icon is shown below.

For simple-line-icons, the style definition is similar, as shown below.

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

According to these kinds of information, we can extract the information we need by 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 some variables and regular expressions to process the contents of these files:

String regex = "^\\. (?. *?): before\\ s *\ {; List filePathList = new List () {" ~ / 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 ",}

Then the contents of the collection can be extracted by reading the contents of the file and matching records.

String content = FileUtil.FileToString (realPath); List 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.Instance.Insert (info)

Finally, the record is stored in the database, and the effect is as follows, which has recorded the icon information we need, so that in actual use, we can use the information of each field to show a good-looking interface.

3. Icon display and selection of Bootstrap

After we read through the file and extract the content with regular expression, and then save it to the database, the icon information can be used for us, can be classified and displayed in the page, and each type of icon is paged to facilitate query, as shown below.

The display page code in this part is similar to the regular data display, but no header information is needed. Let's take a look at the page code as shown below.

Icon information is displayed on each page

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.