Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to understand CSS knowledge in Bootstrap 3.0". In daily operation, I believe many people have doubts about how to understand CSS knowledge in Bootstrap 3.0. I have consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to understand CSS knowledge in Bootstrap 3.0"! Next, please follow the small series to learn together!

The contents of this article are mainly as follows:

1. browser support

2. picture

3. Responsive tools

4. the problems encountered

5. summary

browser support

Bootstrap's goal is to perform optimally on the latest desktop and mobile browsers, meaning that older browsers may cause certain components to behave differently, but with full functionality.

Supported browsers

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

Chrome (Mac, Windows, iOS and Android) Safari (Mac and iOS only, Windows is mostly dead) Firefox (Mac, Windows) Internet Explorer Opera (Mac, Windows)

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

Internet Explorer 8 and 9

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

picture

for

Element by adding different classes, you can easily change its style.

cross-browser compatibility

Internet Explorer 8 does not support rounded rectangles.

The code is as follows:

Responsive images, by the way.

Images in Bootstrap 3 can be made more responsive layout-friendly by adding.img-responsiveclass. The essence of this is to assign max-width: 100%; and height: auto; attributes to the image, allowing it to scale up to no more than the size of its parent element.

The code is as follows:

Responsive tools

These tool classes can be used to show or hide page content based on screen and media queries, accelerating development for mobile devices.

Try using these classes and avoid creating different versions of the same site to improve the display on different devices. Responsive tools are currently only available for block-level elements and do not support inline elements and table elements.

Available classes

You can hide or show page content for different screen size by using the classes listed below alone or in combination.

Print class

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

test case

Adjust the size of your browser window or load this page on a different device to test the tool class mentioned above.

the problems encountered

1. Browser compatibility: This has also been discussed before. For the time being, I'm mainly using IE 10, the latest version of Chrome, and the latest version of FireFox.

2. Does CSS reload when browser width changes? My answer is no for the time being, because he will only reload style classes that fit the current size. (Not sure if this explanation is reasonable.)

3.PrntScr screen print this, temporarily not found in bootstrap, if someone found somewhere can inform about it.

4.require.js This is not known to everyone, it should be mainly to improve the speed of web browsing, but for how to use and how to use Bootstrap this temporarily do not understand.

5.! Important's role: Many front-end siege masters should be very clear about this.

Bootstrap.js Reference: Remember to reference the jQuery library first, and be clear about the order.

Of course, there must be other problems. I can't remember them for the time being. Remember these six first.

At this point, the study of "how to understand CSS knowledge in Bootstrap 3.0" is over, hoping to solve everyone's doubts. Theory and practice can better match to help you learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.