欧美日韩国产第十页,久久视频一区二区

基本框架搭建好了后，我們就要開始豐富頁面內(nèi)容了。最起碼，得有一個用戶登錄的表單不是么？（注冊的事情我們先放一邊。）

一、原生HTML頁面

刪除原來的login.html文件中的內(nèi)容，寫入下面的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄</title>
</head>
<body>

    <div style="margin: 15% 40%;">
        <h1>歡迎登錄！</h1>
       <form action="/login/" method="post">
            <p>
                <label for="id_username">用戶名：</label>
                <input type="text" id="id_username" name="username" placeholder="用戶名" autofocus required />
            </p>
            <p>
                <label for="id_password">密碼：</label>
                <input type="password" id="id_password" placeholder="密碼" name="password" required >
            </p>
            <input type="submit" value="確定">
        </form>
    </div>

</body>
</html>

簡單解釋一下：

form標(biāo)簽主要確定目的地url和發(fā)送方法；
p標(biāo)簽將各個輸入框分行；
label標(biāo)簽為每個輸入框提供一個前導(dǎo)提示，還有助于觸屏使用；
placeholder屬性為輸入框提供默認(rèn)值；
autofocus屬性為用戶名輸入框自動聚焦
required表示該輸入框必須填寫
passowrd類型的input標(biāo)簽不會顯示明文密碼

以上功能都是HTML5原生提供的，可以減少你大量的驗證和JS代碼，更詳細(xì)的用法，請自行學(xué)習(xí)。

特別聲明：所有前端的驗證和安全機(jī)制都是不可信的，惡意分子完全可以脫離瀏覽器偽造請求數(shù)據(jù)！

啟動服務(wù)器，訪問http://127.0.0.1:8000/login/，可以看到如下圖的頁面：

14.png-9.4kB

二、引入Bootstrap

如果你的實際項目真的使用上面的那個頁面，妥妥的被老板打死。代碼雖然簡單，速度雖然快，但沒有CSS和JS，樣子真的令人無法接受，在顏值即正義的年代，就是錯誤。

然而，大多數(shù)使用Django的人都不具備多高的前端水平，通常也沒有專業(yè)的前端工程師配合，自己寫的CSS和JS往往慘不忍睹。怎么辦？沒關(guān)系，我們有現(xiàn)成的開源前端框架！Bootstrap就是最好的框架之一！

前往Bootstrap中文網(wǎng)下載v3.3.7版本代碼。建議同時下載用于生產(chǎn)環(huán)境的Bootstrap和源碼兩種版本。最后的Sass版本根據(jù)需要，自行決定。

用于生產(chǎn)環(huán)境的Bootstrap包含編譯并壓縮后的 CSS、JavaScript 和字體文件，但不包含文檔和源碼文件。這通常是給我們Django項目作為靜態(tài)文件引入的。

而Bootstrap 源碼包含Less、JavaScript 和字體文件的源碼，并且?guī)в形臋n。其中的文檔對我們很有用。

在Django的根目錄下新建一個static目錄，并將解壓后的bootstrap-3.3.7-dist目錄，整體拷貝到static目錄中，如下圖所示：

image.png

由于Bootstrap依賴JQuery，所以我們需要提前下載并引入JQuery，我這里使用的是jquery-3.2.1.js，當(dāng)然別的版本也是可以的。（請自行下載JQuery）

在static目錄下，新建一個css和js目錄，作為以后的樣式文件和js文件的存放地，將我們的jquery文件拷貝到static/js目錄下。

image.png

三、靜態(tài)文件設(shè)置

關(guān)于靜態(tài)文件的設(shè)置，是很多初學(xué)者吐槽最多的地方。以后我們會一點(diǎn)一點(diǎn)講解，這里先按步驟進(jìn)行。

打開項目的settings文件，在最下面添加這么一行配置，用于指定靜態(tài)文件的搜索目錄：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

四、創(chuàng)建base.html模板

既然要將前端頁面做得像個樣子，那么就不能和前面一樣，每個頁面都各寫各的，單打獨(dú)斗。一個網(wǎng)站有自己的統(tǒng)一風(fēng)格和公用部分，可以把這部分內(nèi)容集中到一個基礎(chǔ)模板base.html中。現(xiàn)在，在根目錄下的templates中新建一個base.html文件用作站點(diǎn)的基礎(chǔ)模板。

在Bootstrap文檔中，為我們提供了一個非常簡單而又實用的基本模板，代碼如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

我們將它整體拷貝到base.html文件中。然后修改login/templates/login/login.html文件，刪除原來的所有內(nèi)容，只寫入如下一行代碼：
{% extends 'base.html' %}
模板語言{% extends 'base.html' %}，表示當(dāng)前頁面繼承base.html文件中的所有內(nèi)容。

啟動服務(wù)器，訪問localhost:8000/login/，暫時只能看見下面的內(nèi)容，但沒有關(guān)系，這表示我們的模板繼承系統(tǒng)工作正常。

19.png-12.2kB

五、創(chuàng)建頁面導(dǎo)航條

下面我們?yōu)轫撁嬖黾右粋€導(dǎo)航條，Bootstrap提供了現(xiàn)成的導(dǎo)航條組件，代碼如下：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

顯示效果是這樣的：

23.png-6.4kB

其中有一些部分，比如搜索框是我們目前還不需要的，需要將多余的內(nèi)容裁剪掉。同時，有一些名稱和url地址等需要按我們的實際內(nèi)容修改。最終導(dǎo)航條的代碼如下：

<nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav" aria-expanded="false">
            <span class="sr-only">切換導(dǎo)航條</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Mysite</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="my-nav">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/index/">主頁</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/login/">登錄</a></li>
            <li><a href="/register/">注冊</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

砍掉了很多內(nèi)容，不過沒關(guān)系，有需要的話隨時可以增加。

下面用上面的代碼，替換掉base.html中的h1標(biāo)簽。再次刷新頁面，顯示效果如下：

20.png-14.1kB

為什么會這樣，因為Bootstrap的CSS和JS文件沒有被正常導(dǎo)入！

六、使用Boostrap靜態(tài)文件

通過{% static '相對路徑' %}這個Django為我們提供的靜態(tài)文件加載方法，可以將頁面與靜態(tài)文件鏈接起來。當(dāng)然，還有一種辦法是使用CDN，如果有可靠的源，也是可以使用的。

最后，base.html內(nèi)容如下：

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>{% block title %}base{% endblock %}</title>

    <!-- Bootstrap -->
    <link href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    {% block css %}{% endblock %}
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-nav" aria-expanded="false">
            <span class="sr-only">切換導(dǎo)航條</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Mysite</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="my-nav">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/index/">主頁</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/login/">登錄</a></li>
            <li><a href="/register/">注冊</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    {% block content %}{% endblock %}


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{% static 'bootstrap-4.0.0-dist/js/bootstrap.min.js' %}"></script>
  </body>
</html>

要點(diǎn)：

通過頁面頂端的{% load staticfiles %}加載后，才可以使用static方法；
通過{% block title %}base{% endblock %}，設(shè)置了一個動態(tài)的頁面title塊；
通過{% block css %}{% endblock %}，設(shè)置了一個動態(tài)的css加載塊；
通過{% block content %}{% endblock %}，為具體頁面的主體內(nèi)容留下接口；
通過{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}將樣式文件指向了我們的實際靜態(tài)文件，下面的js腳本也是同樣的道理。

更多的前端頁面知識，實在難以一言述盡，只能一點(diǎn)點(diǎn)解說，所以需要大家具備一定的基礎(chǔ)。做Django開發(fā)，其實就是全棧開發(fā)，沒有一定的前端能力，是做不好的。

好了，現(xiàn)在刷新下我們的頁面，可以看到如下的效果：

21.png-10.5kB

由于Bootstrap以移動端優(yōu)先的特性，我們的這個頁面是可以動態(tài)調(diào)整的，嘗試縮放一下屏幕大小，導(dǎo)航條會自動折疊和展開，也就是說你寫的前端頁面可以在手機(jī)、ipad上正常訪問，但是IE.....，我們忘記它吧，哭。

七、設(shè)計登錄頁面

當(dāng)前的登錄頁面只有網(wǎng)站的整體導(dǎo)航條，還沒有添加最主要的登錄表單。

Bootstarp提供了一個基本的表單樣式，代碼如下：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

外觀如下：

25.png-17.5kB

我們結(jié)合Bootstrap和前面自己寫的form表單，修改login/templates/login/login.html成符合項目要求的樣子：

{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}登錄{% endblock %}
{% block css %}<link href="{% static 'css/login.css' %}" rel="stylesheet"/>{% endblock %}


{% block content %}
    <div class="container">
        <div class="col-md-4 col-md-offset-4">
          <form class='form-login' action="/login/" method="post">
              <h2 class="text-center">歡迎登錄</h2>
              <div class="form-group">
                <label for="id_username">用戶名：</label>
                <input type="text" name='username' class="form-control" id="id_username" placeholder="Username" autofocus required>
              </div>
              <div class="form-group">
                <label for="id_password">密碼：</label>
                <input type="password" name='password' class="form-control" id="id_password" placeholder="Password" required>
              </div>
              <button type="reset" class="btn btn-default pull-left">重置</button>
              <button type="submit" class="btn btn-primary pull-right">提交</button>
          </form>
        </div>
    </div> <!-- /container -->
{% endblock %}

說明：

通過{% extends 'base.html' %}繼承了‘base.html’模板的內(nèi)容；
通過{% block title %}登錄{% endblock %}設(shè)置了專門的title；
通過block css引入了針對性的login.css樣式文件；
主體內(nèi)容定義在block content內(nèi)部
添加了一個重置按鈕。
在static/css目錄中新建一個login.css樣式文件，這里簡單地寫了點(diǎn)樣式，不算復(fù)雜。

body {
  background-color: #eee;
}
.form-login {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-login .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-login .form-control:focus {
  z-index: 2;
}
.form-login input[type="text"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-login input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

刷新頁面，效果如下：

26.png-39.9kB

這個UI算不上好看，同樣可以稱為簡陋，但是比較純粹，你完全可以在這個基礎(chǔ)上，定制一些自己的CSS樣式，比如添加個背景圖，就像我下面這樣。這些工作不是本項目實戰(zhàn)的重點(diǎn)，大家可以自行設(shè)計。

27.png-507.5kB

原文：http://www.liujiangblog.com/course/django/107

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Django 學(xué)習(xí)五：前端頁面設(shè)計

Django 學(xué)習(xí)五：前端頁面設(shè)計

一、原生HTML頁面

二、引入Bootstrap

三、靜態(tài)文件設(shè)置

四、創(chuàng)建base.html模板

五、創(chuàng)建頁面導(dǎo)航條

六、使用Boostrap靜態(tài)文件

七、設(shè)計登錄頁面

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Django 學(xué)習(xí)五：前端頁面設(shè)計

一、 原生HTML頁面

二、引入Bootstrap

三、靜態(tài)文件設(shè)置

四、創(chuàng)建base.html模板

五、創(chuàng)建頁面導(dǎo)航條

六、使用Boostrap靜態(tài)文件

七、設(shè)計登錄頁面

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、原生HTML頁面

二、引入Bootstrap

三、靜態(tài)文件設(shè)置

四、創(chuàng)建base.html模板

六、使用Boostrap靜態(tài)文件