Front-end ul framework personal analysis

I. Bootstrap (v3.3.7)

Official Website: http://www.bootcss.com/

Advantages:

1) raster System (structure)

You can adjust the page size according to the user's screen size so that it performs well in all sizes. The essence of the raster system is implemented through the media query of css3. Bootstrap divides the screen size into four categories: Ultra-small screen <768px, small screen tablet> = 768px, medium-screen desktop display> = 992px and large-screen desktop display> = pixel PX. Each column is evenly divided into 12 cells. Each 8.33333333% and 12 cells is infinitely close to 100%. The use of class prefixes is the most important part of the grid system. Class prefixes are divided into four ultra-small screens. col-xs-*, small screen tablet. col-Sm-*, medium screen desktop display>. col-MD-* and large-screen desktop display. col-LG -*.

2) CSS modularization (performance)

Bootstrap pre-defines many CSS classes. When used, you can directly assign the corresponding class name to the class. The source code is developed based on the most popular CSS preprocessing scripts-less and sass. You can use pre-compiled CSS files for rapid development, or customize the style you need from the source code. By changing a variable, you can easily assign the correct color to the link.

3) JavaScript plug-in (interaction)

Bootstrap provides a rich set of JavaScript plug-ins, which can be expanded on the fly or by yourself. Bootstrap provides an integrated version of Bootstrap. JS, you can use it directly or use it for a single Introduction *. JS.

JS plug-ins can be used by developers who do not understand Js. They only need to follow the format provided in the official documentation, such as the modal box. You only need to set the class as required, data-Toggle, data-target, and no JavaScript code is required. Is it very convenient.

The development modes of Bootstrap plug-ins are basically similar. First, define a class to implement the main function, then a plugin function, and then extend this function to the jquery prototype, finally, bind events to specific elements by delegation.

Disadvantage: Compatibility

There are also a lot of problems with IE compatibility. Bootstrap sets all element box models to border-box, which is a box model in IE hybrid mode, this makes ie incompatible. In addition, a large number of H5 labels and css3 syntaxes are used. These syntax labels also have compatibility issues. Of course, there are many Internet-compatible ie methods, but other files need to be introduced, some are not small, which will inevitably lead to slow loading and affect user experience.

Bootstrap is definitely not compatible with IE6 and 7, and some additional files are required for IE8 support.

In IE8, media queries can only be implemented with response. js.

Bootstrap does not support the old ie compatibility mode. To enable IE to run the latest rendering mode, we recommend that you add the <meta> label to your page:

<Meta http-equiv = "X-UA-compatible" content = "Ie = edge">

 

Ii. layui (v2.x)

Official Website: https://www.layui.com/

Advantage: Classic modular framework

1) This framework does not depend on other JS frameworks, although some of its modules require jquery

2) It is based on native JS and does not need to understand other JS frameworks or libraries to reduce the cost of analyzing the framework.

3) in this framework, there are two naming rules for CSS classes. One is the CSS command of a specific module, which follows the layui-module-status or type, the other is a public class (it can be said that it does not belong to any specific module), which follows the layui-status or type.

4) It is lighter than BS.

5) There are three independent components: layer (pop-up layer) laydate (Date and Time Selection) layim (instant messaging)

Disadvantages:

Without the mature BS framework, the first version was released in 2016. Relevant information was queried online. There are many problems with the layui component, such as the endless loop of laypage.

Summary:

1) bootstrap is doing well in front-end response, and both PC and mobile are doing well. Suitable for websites. If it is similar to the official website and needs to meet the needs of both PC and mobile terminals, bootstrap performs well.

2) layui is more inclined to be used by backend developers and has good results on the server page. Suitable for background frameworks.

Front-end ul framework personal analysis