Bootstrap 3.0 study notes CSS related supplement

The main contents of this article are as follows:

1. Browser support

2. Images

3. Responsive Tools

4. Problems encountered

5. Summary

Browser support

Bootstrap aims to perform best on the latest desktop and mobile browsers, which means that some components may look slightly different on older browsers, but the functionality is still intact.

In particular, Bootstrap strongly supports the latest versions of these browsers:

Bootstrap also works well on Chromium, Chrome for Linux, Firefox for Linux, and Internet Explorer 7, although Bootstrap does not officially support them.

Internet Explorer 8 and 9 are supported, however, you should be aware that many CSS3 properties and HTML5 elements -- for example, rounded rectangles and drop shadows -- are definitely not supported. In addition, Internet Explorer 8 requires Respond.j to support media queries.

picture

By adding different classes to the <img> element, you can easily change its style.

You should know that Internet Explorer 8 does not support rounded rectangles.

By the way, responsive images

By adding .img-responsive class, you can make images in Bootstrap 3 more friendly to responsive layouts. The essence is to give the image the attributes of max-width: 100%; and height: auto;, so that the image can be scaled proportionally and not exceed the size of its parent element.

Responsive tools

Speed ​​up development for mobile devices by using these utility classes to show or hide page content based on the screen and different media queries.

Try using these classes and avoid creating different versions of the same site to optimize for different devices. The responsive tool currently only works on block-level elements and does not support inline elements or table elements.

Available classes

By using the following classes individually or in combination, you can hide or show page content for different screen sizes.

Print class

As with regular responsive classes, use the following classes to hide or show content for printers.

Test Cases

Resize your browser window or load this page on different devices to test the tool classes mentioned above.

Problems encountered

1. Browser compatibility: This has been introduced before. For now, I mainly use IE10, the latest version of Chrome, and the latest version of FireFox.

2. Will the CSS file be reloaded when the browser width changes: My answer is no for now, because it will only re-read the style class appropriate for the current size. (I don’t know if this explanation is reasonable)

3.PrntScr screen printing, I haven’t found it in bootstrap yet, if anyone finds it somewhere, please let me know.

4. I don’t know if everyone knows require.js. It should be mainly used to improve the speed of web browsing, but I don’t know how to use it and how to use it with Bootstrap.

5. The role of !important: Many front-end siege engineers should be very clear about this.

6.Bootstrap.js reference: Remember to reference the jQuery library first, and make sure the order is clear.

Of course there are definitely other questions, but I can’t think of them at the moment, so just remember these 6 for now.

Summarize

I have simply sorted out the Bootstrap CSS. Understand a lot of style classes, simple combination and application, and the elements that should be used. Then you can design a good interface without knowing much about the front end. Of course, there are better things coming later, such as Bootstrap Component and JavaScript plug-ins, which make front-end development simpler and more powerful.