Using Bootstrap and my own CSS together [closed]

后端未结

关注

 5  1911

太阳男子

相关标签:

5条回答

终归单人心

2020-12-25 14:08
It is all about CSS specificity.

If two properties have the same weight, the latter property is used.

You can override single CSS properties by declaring the property !important.

Example;
```
body {
  background-color: #000 !important;
}
```
It is an easy way to overcome CSS selector weight (or specificity) if you notice that Bootstrap styles overrides yours (helpful for a novice just trying out stuff).

But you should read more about specificity instead - http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/.
0 讨论(0)
发布评论:

提交评论
- 加载中...
清酒与你

2020-12-25 14:09
It would look something like this:
```
<head>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="yourstyle.css" rel="stylesheet" />
</head>
```
You can put as many CSS links as you need. I find it's usually best to put framework CSS files above your own.
0 讨论(0)
发布评论:

提交评论
- 加载中...
借酒劲吻你

2020-12-25 14:15
You can use Bootstrap with your css, just do that (in your head tag):
```

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />


<link rel="stylesheet" href="your-file-css.css" />
```
You can even overwrite some directive, just put them in you file (but isn't a best practice).

Remember, always put the link to bootstrap before the link to your css file.

Sorry for my english
0 讨论(0)
发布评论:

提交评论
- 加载中...
天涯浪人

2020-12-25 14:20

You should add the bootstrap css first and then user your own, but it will be tricky because of the bootstrap's css. Make sure you check always what bootstrap classes does.

0 讨论(0)
发布评论:

提交评论
- 加载中...
天命终不由人

2020-12-25 14:27
You will have the stylesheets order like this, first you will include bootstrap css, then your stylesheet file. Why is that? Because that way you can overwrite the classes from the framework without using !important. You can write your own classes and include them in your layout, you can use bootstrap classes and make adjustments to them as you need. When you mix your classes and bootstrap classes check what attributes are added from their classes, do you need them or not etc...

Example
```
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  /* Your external css file will go here. This is just for testing :) */
  
.mycustombtn{
  background: #000;
}

</style>  


<button type="button" class="btn btn-danger mycustombtn">Danger</button>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题