Home  >  Article  >  Web Front-end  >  Does bootstrap css conflict?

Does bootstrap css conflict?

爱喝马黛茶的安东尼
爱喝马黛茶的安东尼Original
2019-07-17 09:53:083410browse

Bootstrap is the most popular CSS framework on the Web. It makes creating beautiful, responsive designs very easy. However, sometimes you don't want to use Bootstrap on the entire website and you only need to use a part of the Bootstrap CSS. If you just add Bootstrap CSS directly to the head, it may conflict with other CSS, resulting in confusing styles.

Does bootstrap css conflict?

#If we can isolate Bootstrap CSS to a specific class, the problem is solved! Just use LESS to add a class name to all Bootstrap CSS.

LESS is a CSS processor that allows you to change variables before compiling to CSS. This allows you to change one variable (e.g. base font size) and LESS will automatically adjust all styles that depend on it (e.g. line height, headings, etc.).

The following shows how to use LESS to customize bootstrap CSS, and then use the class bootstrap-iso to add prefixes to all Bootstrap styles.

Related recommendations: "bootstrap Getting Started Tutorial"

Processing steps:

1. Import the bootstrap css file in the head tag

Replace

with

2. Then wrap the HTML in a div with class bootstrap-iso like this:

The above is the detailed content of Does bootstrap css conflict?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn