2016-01-01 3 views
2

Моя структура папок, как этотCss не импортируется в HTML

index.html CSS/styles.css

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> 

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; 
} 

Однако, похоже, что цвет панели не изменяется вообще. По-видимому, он работает над этим jsfiddle, и я копировал и вставлял код.

http://jsfiddle.net/a0y0qmns/

ответ

3

Просто включите файл в этой последовательности.

<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.

+0

Omg Большое спасибо. Я бы принял этот ответ, когда смогу. Могу ли я спросить, как изменить ширину панели? – aceminer

+0

Просто укажите 'width: 200px;' to '.panel {}'. – ketan

2

просто изменить .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; 
} 

скрипку:http://jsfiddle.net/a0y0qmns/1/

3

просто случай bootstarp Преобладающая пользовательские файлы CSS. В разделе заголовка вашего html разместите свои стили.css ниже bootstrap.css. Затем в styles.css вы должны использовать тот же самый селектор для элемента, который вы хотите переопределить.