外部CSS文件在引导程序

时间:2017-03-09 23:21:27

标签: css twitter-bootstrap flask

我正在制作一个烧瓶中的Web应用程序并使用bootstrap作为我的前端。外部CSS文件位于应用程序的/ static上。问题是外部CSS中的属性不适用于元素。

form.html

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>

form.html

<div class="jumbotron">
    <div class= "container">
        <h1>Application</h1>
    </div>  
</div>

的style.css

.jumbotron {
    background-color: #191970;
    height: 100px;  
}

2 个答案:

答案 0 :(得分:0)

(我无法发表评论......)来自Configuring Flask to correctly load Bootstrap js and css files

尝试使用:

java   31386 31936    1091r      REG               202,1     96084      29253 /tmp/2810759758739832151.ttf (deleted)
java      31386 31936   1092r      REG              202,1    134200      29296 /tmp/1048743693113440284.ttf (deleted)

他们在这里说的模式是:

<link href="{{ url_for('static', filename='scripts/bootstrap/dist/css/bootstrap.css') }}" rel="stylesheet">

答案 1 :(得分:0)

尝试以这种方式解决:

<head>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="{{ url_for('static', filename='stylesheets/style.css') }}" rel="stylesheet" type="text/css">

</head>

假设您在静态文件夹中有一个文件夹“stylesheets”,其中包含文件style.css