Bootstrap3.0 9 (CSS supplement)

Before reading, you can also go to the Bootstrap3.0 getting started learning series navigation to view the http://www.cnblogs.com/aehyok/p/3404867.html

The content of this article is as follows:

Bootstrap aims to achieve the best performance on the latest desktop and mobile browsers. That is to say, on older browsers, some components may have different styles, however, the function is complete.

Supported browsers

Note that Bootstrap strongly supports the latest versions of these browsers:

• • Chrome (Mac, Windows, iOS, and Android)
  • Safari (only Mac and iOS versions are supported. The Windows version is almost dead)
  • Firefox (Mac, Windows)
  • Internet Explorer
  • Opera (Mac, Windows)

Bootstrap also performs well on Chrome, Linux Chrome, Linux Firefox, and Internet Explorer 7, although Bootstrap does not provide official support for it.

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are supported. However, you need to know that many CSS3 attributes and HTML5 elements, such as rounded rectangle and projection, are certainly not supported. In addition, Internet Explorer 8 supports media queries only when Respond. j is used.

　　

IsYou can easily change the style of an element by adding different classes.

Cross-browser compatibility

Internet Explorer 8 does not support rounded rectangle.

By the way, response Images

Add.img-responsiveClass makes the images in Bootstrap 3 more friendly to the support for responsive la S. The essence is to assign Imagesmax-width: 100%;Andheight: auto;Attribute, which allows the image to scale proportionally, not exceeding the size of its parent element.

By using these tools, class can display or hide page content based on screen and different media queries to accelerate development for mobile devices.

Try using these classes and avoid creating different versions of the same website, so as to improve the display effect on different devices.Currently, the responsive tool only targets block-level elements,Inline and table elements are not supported.

Available class

You can hide or display page content for different screen sizes by using the classes listed below separately or in combination.

 

Print class

Like the conventional responsive class, the following class can hide or display certain content for the printer.

 

Test Cases

You can test the tool class mentioned above by adjusting the size of your browser window or loading this page on different devices.

1. browser compatibility: I have also introduced the article http://www.cnblogs.com/aehyok/p/3404867.html. Currently, I mainly use IE10, the latest Chrome, and the latest FireFox version.

2. Will the CSS file be reloaded when the browser width changes: My answer is no, because it will only re-read the style class of the appropriate size. ()

3. Print this on the PrntScr screen, which is not found in bootstrap for the moment. If someone finds it, let us know where it is. (This is proposed by @ MyKings Boyou)

4. require. js I don't know. No, it should be mainly to speed up Web browsing, but I don't know how to use it and how to use it with Bootstrap for the moment.

5 .! The role of important: Many front-end captors should be clear. Http://www.cnblogs.com/lovening/archive/2010/06/28/1766809.html

6. Bootstrap. js reference: Remember to reference the jQuery Library first and clarify the sequence.

Of course there must be other problems. I cannot remember them for the moment. Remember these six questions first.

The Bootstrap CSS is simply sorted out. After learning a lot about style classes and simple combination applications, you can design a good interface without having to know much about the front-end. Of course, there are better things in the future. The Bootstrap Component and JavaScript plug-ins make front-end development simpler and more powerful.

This article has been updated to the Bootstrap3.0 getting started learning series navigation to view http://www.cnblogs.com/aehyok/p/3404867.html