Question

我是Flask和Html的新手。我已经下载了简单的Bootstrap模板，并在Flask项目中创建了“templates”文件夹。然后我在css模板中添加了“index.html”和js以及Bootstrap个文件夹。

dir: project/backend.py (this is the main Flask app file)
     project/templates/index.html
     project/templates/js/...
     project/templates/css/...

问题在于它不起作用。看起来没有css。

from flask import Flask, render_template,request,url_for
app = Flask(__name__)

@app.route('/')
def index():
    # ico = request.form['search']
    return render_template('index.html')

if __name__ == '__main__':

    app.run(debug=True)

如果它有帮助，这里是index.html代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Navbar with Search</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" rel="home" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
        </ul>
        <button type="button" class="btn btn-default navbar-btn">Button</button>
        <div class="col-sm-3 col-md-3 pull-right">
        <div class="navbar-text">Text</div>
        <form class="ico-search" role="search" name="search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
        </div>

    </div>
</div>


<div class="container">

  <div class="text-center">
    <h1>Bootstrap Template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</div><!-- /.container -->
    <!-- script references -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

如何使网页看起来正确？

网页表现得像没有CSS

0 个答案: