What are the three cores of bootstrap?

Bootstrap makes front-end development faster and easier. All developers can get started quickly, all devices can be adapted, and all projects are applicable.

Although you can directly use the CSS style sheet provided by Bootstrap, don't forget that the source code of Bootstrap is developed based on the most popular CSS preprocessing scripts - Less and Sass. You can use precompiled CSS files to develop quickly, or you can customize the styles you need from the source code. (Recommended learning: Bootstrap video tutorial)

With the help of Bootstrap, your website and application can quickly and effectively adapt to mobile phones, tablets, and PC devices through the same code, all of which are It is the result of CSS Media Query.

Bootstrap provides comprehensive and beautiful documentation. Here you can find all the detailed documentation about HTML elements, HTML and CSS components, and jQuery plugins.

Three core components of Bootstrap

Basic CSS: Set the global CSS style, basic HTML elements can be styled through class and get enhanced effects; and Advanced grid system;

Components: countless reusable components, including font icons, drop-down menus, navigation, warning bars, pop-up boxes and more;

JS plug-in: Bootstrap It comes with 13 jQuery plug-ins, which give "life" to components in Bootstrap.

Mobile first

Mobile first is the most significant change in Bootstrap 3.

In previous Bootstrap versions (until 2.x), you needed to manually reference another CSS to make the entire project mobile-friendly.

It’s different now. Bootstrap 3’s default CSS itself is mobile-friendly.

Bootstrap 3 is designed with mobile first, desktop second. This is actually a very timely shift as more and more users are now using mobile devices.

In order to make a website developed with Bootstrap mobile-friendly and ensure proper drawing and touch-screen scaling, the viewport meta tag needs to be added to the head of the web page.

As shown below:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width attribute controls the width of the device. Assuming that your website will be viewed by devices with different screen resolutions, setting it to device-width ensures that it renders correctly on different devices.

initial-scale=1.0 ensures that when the web page is loaded, it will be rendered at a 1:1 ratio without any scaling.

On mobile device browsers, you can disable the zooming function by adding user-scalable=no to the viewport meta tag

For more Bootstrap related technical articles, please visit Learn in the Bootstrap Tutorial column!

The above is the detailed content of What are the three cores of bootstrap?. For more information, please follow other related articles on the PHP Chinese website!