Bootstrap learn some notes, advantages and disadvantages Summary

This agreement bootstrap the popularity of BT BT is obvious to everyone, using it can quickly build a website. Very early contact with this framework, the grid system, CSS modularity and JS plug-ins do quite well, because the work is less used also has not been well combed, this article will be a good analysis of this system. BT Although very good, but also not without shortcomings, because the framework is a lot of modular, can only be used, when your site is more diversified, the interface is not very suitable for the use of complex, you need a lot of rewriting code, maintenance is more troublesome, in addition, the system of CSS content is more, a lot of content is not used at all, For the bandwidth is not very ideal situation will cause waste, of course, BT CSS modularity is quite good. The following summarizes some of the points I feel very good. grid system (structure)One of the advantages of BT is that it can adjust the page according to the user's screen size, making it perform well on every size. 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 through the CSS3 media query, if you are proficient in using max-width and other media query properties, you can leave BT, customized to their own responsive website. BT divides screen sizes into four categories, ultra-small screen <768px, small-screen flat >=768px, medium-screen desktop display >=992px, and large-screen large desktop display >=1200px. Each column is evenly divided into 12 cells, and each of the 8.33333333%,12 is infinitely close to 100%. Here to specifically mention is the BT box model, BT Force all the elements of the box model are set to Border-box, which is the first of the IE, used in promiscuous mode to display the page, but the Web site that this property is a tease has not been used, but finally found himself is the tease, Therefore, this attribute is added to the CSS3. The size of the Border-box box model contains the padding+border+content, the size of the Content-box box model contains only the Content section, and the Padding,border also recalculates the block size. It is much more troublesome to use than Border-box. Class prefix usage is the most important part of mastering a raster system, with a class prefix of four ultra-small screens. col-xs-*, small screen tablet, col-sm-*, medium-screen desktop monitor >.col-md-* and large-screen large desktop monitor. col-lg-*, The following code allows different screens to be displayed differently:

<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 in the small screen under the two lines display, the desktop display is displayed in parallel. For more detailed application you can refer to the official BT documentation, which is not mentioned here.

CSS modularity (performance)BT pre-defined a lot of CSS classes, when used to give classes directly to the corresponding class name, such as Text-left,text-align,.table. The most representative is the BTN class, BT defines a. BT's base class, if you want other styles to be extended on this base class for different visuals. The Btn class is typical of his style definition, the difference between the CSS Daniel and the rookie in three ways, file size, Later maintenance and hack, Daniel's CSS files are relatively small (how much for small to see the size of the project); the latter is easy to maintain, can quickly locate, modify a style need to move less places, hack use less. On the contrary beef cattle will be a huge file, later maintenance mess, change a style need to change a lot of places, hack, inline, important everywhere. CSS many values are interdependent, such as EM, we all know that EM is a relative unit, the browser rendering must be explicit to the specific value, it must be calculated. It is precisely because of these relative units that we can achieve modularity. The BTN class is implemented using a relationship between relative units and font size, sets the Line-height,padding,border-radius of the button to a relative unit, the font size is set to absolute units, When you need a large button to increase the font, you need a small button to reduce the font, the case code is as follows:

. btn{Display:inline-block; padding:6px 12px; margin-bottom:0; font-size:14px; font-weight:400; line-height:1.428571 43; Text-align:center; White-space:nowrap; Vertical-align:middle;}

Here the line-height will calculate the corresponding value according to Font-size, modify the Font-size button will be correspondingly larger and smaller, a small change to achieve a visual change is not very convenient

BT's CSS system is commendable, there are many, want to CSS further words can study his ideas, you can also be extracted out of their own style library, you can quickly use the project later. JavaScript plugins (interactive)BT's JavaScript plug-in is very rich, both ready-to-use can also be expanded, BT provides an integrated board of bt.js you can directly use or can be used as a single use to introduce *.js. JS plug-in excellent place is, even if you do not understand JS developers can also use, as long as the official documents provided in the format to write, such as modal box, you just need to set a good class,data-toggle,data-target, a sentence JS do not have to write, is not very convenient. BT's plug-in development model is basically similar, first define a class, implement the main function, then a plugin function, and then extend this function to the jquery prototype, and finally through a delegate to the specific element binding event. Insufficient:For IE compatibility also exist a problem, BT will all the element box model is set to Border-box, this is IE promiscuous mode box model, light This led to not compatible with IE. In addition to the use of a large number of H5 tags and CSS3 syntax, these grammatical label compatibility is also a big problem, of course, there are many Internet-compatible IE methods, but need to introduce other files, some are not small, will inevitably lead to slow loading speed, affecting the user experience. BT's compatibility with ie6,7 is certainly not good, and the support for IE8 requires some additional documentation. IE8 Media queries need response.js to implement BT does not support the old compatibility mode of IE. In order for IE browser to 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 the F12 key to open IE debugging tool, you can see what the current rendering mode ie. finally:BT official documentation lists a coding specification, which is worth the reference of each development team, and the following list is more important: HTML Syntax:Use two controls instead of tabs (tab)-This is the only way to ensure consistency in all environments nested elements should be indented once (two spaces) CSS Declaration Order:Related attribute declarations should be grouped and written in the following order: 1, positioning Positioning2, box Model3, Format Layout Typographic4, Visual VISUAL5, miscellaneous misc Since positioning can remove elements from the normal document flow, It also covers the styles associated with the box model, and is therefore ranked first. The box model is ranked second because it determines the size and position of the component. Other properties only affect the interior of the component or do not affect the first two sets of properties, so the complete canonical URL is followed: http://codeguide.bootcss.com/#html-syntax Summary:BT belongs to the front-end UI library, can quickly build front-end pages, and can also use SaaS redesign components, compared to the front-end of the general back-end engineers, large and medium-sized enterprises with a few. BT source code for the front-end learning is very necessary.

Bootstrap learn some notes, advantages and disadvantages Summary