Programmers who do not understand the front-end are not good artists-use the UI framework metronic tutorial-programmer perspective, uimetronic

Programmers who do not understand the front-end are not good artists-use the UI framework metronic tutorial-programmer perspective, uimetronic

In the opinion that programmers who do not understand the front-end are not good artists, as a programmer who only understands the front-end, in order to become a good artist, they can only disguise it in some clever ways.

Metronic is a bootstrap-based responsive background management platform UI framework that provides us with various UI styles that can be used in the management background. Because it is based on bootstrap, it meets the responsive UI design, therefore, the UI style of various devices and screen resolutions is not severely damaged. a ui is compatible with various screen devices.

Open the start.htm file in the metronicdirectory and you can see the following view:

The Framework has several built-in theme colors. You can select a theme at will. Pressing the html button will direct the corresponding theme to the Page Preview page:

The preview page consists of the menu on the left, the navigation on the top, the content page on the right, and the sidebar. The overall layout of this framework is generally in this form. of course, on this basis, we can make some layout adjustments, such as removing the sidebar on the right of the navigation above.

The various options in the left menu are the various built-in UI styles, including the UI component forms of various styles. we can view the corresponding page file to view the front-end code of the corresponding style.

Because this is a programmer's perspective tutorial, we will not introduce the front-end style code in detail here. But to better use this style Library, we recommend that you take a look at the bootstrap tutorial. it will not waste long time.

Bootstrap cainiao tutorial

The above rookie tutorial is actually very simple, but even so you don't have to look too detailed, just look at the first part of the CSS, simply scan the second part of the layout component.

Here is an actual example. For example, we open the metronic directory/theme/templates/admin/table_editable.html.

We can see that the source code of an editable tablegroup .20.table_editable.html can be seen as follows:

<! -- Introduce a bunch of CSS at the beginning of the page --> <! -- Introduction of a bunch of JavaScript code at the end of the page --> <script src = ".. /.. /assets/admin/pages/scripts/form-editable.js "> </script> <script> jQuery (document ). ready (function () {// initiate layout and plugins Metronic. init (); // init metronic core components, which is important and required. initialize Layout of metronic core. init (); // init current layout important and required. initialize some layout
// The subsequent component plug-ins are not required to initialize QuickSidebar. init (); // init quick sidebar Demo. init (); // init demo featuresFormEditable. init (); // This is where the table component is initialized in this example}); </script>

The form-editable.js file introduced in this page is actually the js file we need to change according to the business logic and actual needs, including the UI Style Function of the table component implementation, here we need to take a look at the js Code implementation, simply sort out the rules for using this component, and then copy all the code to our own js file, make some modifications as needed, and finally introduce the modified js file.

The above is the simple application process from the programmer's perspective of the metronic framework. the overall usage is still very convenient. Basically, you only need to find the sample style, view the source code, sort out the js logic of the plug-in, modify and introduce the plug-in to get a very good UI.

PS: The global style under the metronic directory \ theme \ assets \ global \ css has a very good effect, especially the 3d shadow style with md in the name, which is very beautiful. you can introduce different global styles as needed.