All geek questions in one place

Bootstrap Stylesheet for only one div, but still affects other divs

I have included the loading stylesheet in the PHP file that I need for only one div. Problem: It should affect only one div. To achieve this, I placed a link to another CSS before and after the loading stylesheet, as shown below. But it seems that bootstrap.css still affects some elements outside this div. How can I prevent this?

<link rel="stylesheet" href="style/style-1.css" type="text/css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css"> <div class="container"> ... </div> <link rel="stylesheet" href="style-1.css" type="text/css">
+5
source share
2 answers

There is one feature in CSS: scss css "... it is not supported (only Fireofx, I think ... and I think it’s better) ... This allows us to say that the stylesheet applies to only one element.

In your case, but I definitely do not recommend it , you can do something like:

 <div class="container"> <style scoped> //... copy content from bootstrap stylesheet </style> </div>

See an example here: http://css-tricks.com/saving-the-day-with-scoped-css/

or here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet

Check which browsers support it: http://caniuse.com/#feat=style-scoped

+1
source

The concept of loading a secondary CSS file after a CSS loading file will be to redefine certain elements and create your own styles. However, since you want to take only one element from the boot CSS file, you will have to override ALL other elements if you do not want to see bootstrap styles on other elements. This one I DO NOT recommend .

My suggestion is to learn the style for a specific element that you want to use from the bootstrap, and then simply recreate it in your own CSS file.

0
source

Source: https://habr.com/ru/post/1204054/

More articles:


All Articles