BootStrap study notes, summary of advantages and disadvantages

This article agrees that the popularity of Bootstrap abbreviated as BT BT is obvious to all, and it can be used to quickly build a website. I have been in contact with this framework for a long time. The grid system, css modularization and js plugins are doing quite well. Due to the less use in my work, it has not been properly sorted out. This article will analyze this system.
Although BT is very good, it is not without its shortcomings. Because many frameworks are modular, they can only be used in this way. When your website is more diverse and the interface is complex, it is not suitable for use. At this time, you need to rewrite a lot of code. , maintenance is more troublesome, in addition, this system has a lot of CSS content, many of which are not used at all, and it will cause waste if the bandwidth is not ideal. Of course, BT's CSS modularization is quite good. Below are a few points that I think are very good.

Grid System (Structure)
One of the advantages of BT is the ability to adjust the page to the user's screen size, making it perform well at all sizes. The realization of this function depends on two things, one is view, the other is max-width, min-width.
The essence of the BT grid system is realized through CSS3 media query. If you are proficient in using media query properties such as max-width, you can abandon BT and customize your own responsive website. BT divides the screen size into four categories, ultra small screen <768px, small screen tablet >=768px, medium screen desktop monitor >=992px and large screen large desktop monitor >=1200px. Each column is equally divided into 12 grids, each 8.33333333%, 12 grids are infinitely close to 100%.
What I want to mention here is the BT box model. BT forces the box model of all elements to be set to border-box, which is pioneered by IE and is used to display web pages in promiscuous mode, but W3C considers this property to be a joke I haven't used it all the time, but in the end I found that I am funny, so this property was added in CSS3. The size of the border-box box model includes padding+border+content, and the size of the content-box box model only includes the content part. Setting padding, the border also recalculates the size of the containing block, which is much more troublesome to use than border-box.
The use of class prefixes is the most important part of mastering the grid system. There are four class prefixes: .col-xs-* for ultra-small screens, .col-sm-* for small-screen tablets, .col-md-* for medium-screen desktop monitors, and Large screen large desktop monitor.col-lg-*, the following code can achieve different display modes on different screens:
1
2
3
4
<div class="row">
    <div class="col-xs-12 col-md -6"></div>
    <div class="col-xs-12 col-md-6"></div>
</div>
This code means that it is displayed in two lines on a super small screen, Desktop monitors are displayed side by side. For more detailed applications, you can refer to the official BT documentation, which will not be repeated here.


CSS Modularization (Expression)
BT defines many CSS classes in advance. When using, you can directly assign the corresponding class name to the class, such as text-left, text-align, .table, etc. The most representative is the btn class, BT defines a .
The .btn class is typical because of its style definition. The difference between CSS Daniel and Rookie is in three aspects: file size, post-maintenance and hacking. Daniel's CSS files are relatively small (how much depends on the project) size); it is easy to maintain in the later stage, can be quickly positioned, and there are fewer places to modify a style; hacks are also used less. On the contrary, the cabbage will produce a huge file, which will be a mess in the later maintenance. Changing a style needs to change a lot of places, hack, inline, and important.
Many CSS values ​​are interdependent, such as em, we all know that em is a relative unit, and the browser must specify the specific value when rendering, so it must be calculated. It is because of these relative units that we can achieve modularization. The .btn class is implemented using the relationship between relative units and font size. The button's line-height, padding, and border-radius are set to relative units, and the font size is set to Absolute unit, increase the font when a big button is needed, decrease the font when a small button is needed, the case code is as follows:
1
.btn{ display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px ; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle;}
The line-height here will calculate the corresponding value according to the font-size, modify the font The -size button will become larger and smaller accordingly. A small change can achieve a visual change. Is it very convenient

? BT's CSS system has many commendable places. If you want CSS to go further, you can study it. You can also extract it separately and put it in your own style library, which can be used quickly in future projects.

JavaScript plugin (interactive)
BT's JavaScript plug-ins are very rich, and you can use existing ones or expand them yourself. BT provides an integrated board BT.js that you can use directly or import *.js for single use.
The great thing about JS plugins is that even developers who don't understand JS can use them, just write them in the format provided by the official documentation, such as modal boxes, you just need to set the class, data-toggle, and data-target as required That's it, you don't need to write a single JS, isn't it very convenient.
BT's plug-in development mode is basically similar. First, define a class to implement the main function, then a Plugin function, and then extend this function to the JQuery prototype, and finally bind events to specific elements through delegation.


Disadvantage:
Compatibility with IE is also not a small problem. BT sets all element box models to border-box, which is the box model in IE promiscuous mode. This alone makes it incompatible with IE. In addition, a large number of H5 tags and CSS3 syntax are used. There are also no small problems in the compatibility of these syntax tags. Of course, there are many ways to be compatible with IE on the Internet, but other files need to be introduced, some of which are not small, which will inevitably lead to changes in loading speed. Slow, affecting user experience.
BT's compatibility with IE6 and 7 is definitely not good, and support for IE8 also requires some additional files.
IE8's media query needs the cooperation of response.js to realize
BT does not support the ancient compatibility mode of IE. In order to make IE browser run the latest rendering mode, it is recommended to add this <meta> tag to your page:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Press F12 Open the debugging tool of IE, you can see what the current rendering mode of IE is.

finally:
The official BT documentation lists a coding specification that is worthy of reference by all development teams. The following lists the more important ones:
HTML
syntax:
replace tabs with two controls -- this is the only way to ensure consistency in all environments
Nested elements should be indented once (two spaces)

CSS
declaration order:
related property declarations should be grouped together and written in the following order:
1. Positioning
2. Box Model
3. Formatting Typographic
4, Visual Visual
5, Misc Misc are
at the top because positioning removes elements from the normal document flow and also overrides box model related styles. The box model comes in second because it determines the size and placement of components.
Other properties only affect the interior of the component or do not affect the first two sets of properties, so they are ranked at the back
. Complete specification URL: http://codeguide.bootcss.com/#html-syntax

Summary:
BT belongs to the front-end UI library, which can quickly build the front-end Pages, you can also use saas to redesign components, which is more suitable for front-end general back-end engineers, and is not used by large and medium-sized enterprises. BT source code is very necessary for front-end learning.