What are the advantages and disadvantages of Bootstrap?

What are the advantages and disadvantages of Bootstrap?
bootstrap is a front-end framework for rapid development of web applications and websites, based on html, css, and javascript.
Advantages are: mobile devices first, support for mainstream browsers, easy to use, responsive design
Disadvantages: IE6 is not supported, classes are heavily used but classes are not semantic enough, and websites developed using bootstrap are seriously homogenized.

[Related video recommendation: Bootstrap Tutorial]

Bootstrap provides a responsive, mobile-first fluid grid system. As the screen or viewport size increases, the system automatically divides it into up to 12 columns.

Mobile-first strategy

• Content

• Determine what’s most important .

• Layout

• Prioritize designing with smaller widths.

• Basic CSS is mobile-first, and media queries are for tablets and desktop computers.

• Progressive Enhancement

• Adds elements as the screen size increases.

#Responsive grid system As the screen or viewport size increases, the system will automatically divide it into up to 12 columns.

How the Bootstrap Grid System works

The Grid system creates page layouts through a series of rows and columns that contain content. Here's how the Bootstrap grid system works:

• rows must be placed inside the .container class in order to get proper alignment and content padding.

• Use rows to create horizontal groups of columns.

• Content should be placed within columns, and only columns can be direct child elements of rows.

• Predefined grid classes, such as .row and .col-xs-4, can be used to quickly create grid layouts. LESS mixin classes can be used for more semantic layouts.

• Columns use padding to create gaps between column contents. The padding is obtained by taking the negative of the margin on .rows, which represents the row offset of the first column and the last column.

• The grid system is created by specifying the twelve available columns that you want to span. For example, to create three equal columns, use three .col-xs-4.

• Media Queries

  Media queries are very fancy "conditional CSS rules". It only works with some CSS based on certain specified conditions. If those conditions are met, the corresponding style is applied.

  Media queries in Bootstrap allow you to move, show and hide content based on the viewport size. The following media query is used in the LESS file to create key breakpoint thresholds in the Bootstrap grid system.

  /* 超小设备（手机，小于 768px） */
  /* Bootstrap 中默认情况下没有媒体查询 */
  
  /* 小型设备（平板电脑，768px 起） */@media (min-width: @screen-sm-min) { ... }
  
  /* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }
  
  /* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }

• We sometimes also include max-width in media query code to limit the impact of CSS to a smaller range of screen sizes.

  @media (max-width: @screen-xs-max) { ... }
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
  @media (min-width: @screen-lg-min) { ... }

• A media query has two parts, first a device specification and then a size rule. In the above case, the following rules are set:

  Let's look at the following line of code:

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

• Basic grid structure

  The following is the basic structure of the Bootstrap grid:

  <div class="container">
     <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>      
     </div>
     <div class="row">...</div></div><div class="container">....

Please give me some advice and welcome any advice

The above is the detailed content of What are the advantages and disadvantages of Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!