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

Based on Metronic Bootstrap development how to optimize Bootstrap icon management, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

In the project based on Bootstrap development, bright color buttons, and rich charts are very attractive features, in order to play this feature to the extreme, you can use the Bootstrap icon extracted to the database, and in the interface for management and use, so that we can easily apply these icons to various page components, such as menu module, button interface, form input and other occasions to use.

1. Optimize the icon management interface

In the previous essay, we introduced the extraction of icons, icon management interface and so on. Let's review the chart types of Bootstrap. 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.

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.

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.

We extract these types of icon information from the stylesheet, put them into the database, and then facilitate interface management and selection processing.

When I introduced my Bootstrap framework in the previous essay, the icon management interface is as follows.

When selecting icons, a pop-up dialog box is provided to display icons with different categories for the user to select and return.

Although with these functional interfaces, we can reduce the process of finding icons, but when we actually use them, there is still some inconvenience, because it takes a lot of pages to find a specific icon, and it is not very efficient. There is still a great relationship between our own icon name and what it displays, so we should provide a search for the display name. It is easy to query out, and you can choose from the query list, which can greatly speed up our search for the Bootstrap icon.

This interface is much better than the original, we can search by name, and get the qualified icons in the database for paging display, if you choose one of them, you can display the icon and name on it, which is convenient for us to use.

The operation of the query is similar to other paging parts. After the data is obtained by AJax, it can be paged and displayed on the interface.

Icon display name Default Success Warning

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.