Jquery Css未导入到html中_Jquery_Html_Css_Twitter Bootstrap

Jquery Css未导入到html中

jquery html css twitter-bootstrap

Jquery Css未导入到html中,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我的文件夹结构是这样的 index.html css/styles.css @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'); .panel-default > .panel-heading-custom { background: #ffaa00; color: #aaa; } Html代码： <!DOCTYPE html> <html lang="e

我的文件夹结构是这样的

index.html css/styles.css

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

.panel-default > .panel-heading-custom {
    background: #ffaa00; color: #aaa;
}

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css" />
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading panel-heading-custom">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

</body>
</html>

然而，面板颜色似乎根本没有变化。显然它在这个JSFIDLE上工作，我复制并粘贴了代码

只需按此顺序包含文件

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link rel="stylesheet" href="css/styles.css" />

styles.css

在

bootstrap.min.css

之后，因为引导css会覆盖样式css

只需将

.panel heading custom

更改为

.panel heading

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
.panel-default > .panel-heading {
  background: #000;
  color: #fff;
}

FIDDLE:

只不过是一个bootstarp凌驾于自定义css文件之上的例子。在html的标题部分，将styles.css放在bootstrap.css下面。然后在styles.css中，您必须对要覆盖的元素使用完全相同的选择器

天哪，非常感谢。如果可以，我会接受这个答案。请问如何更改面板的宽度？只需给出

宽度：200px到面板{}
。