パイソン - ジャンゴ - 本のリストを修正するためにブートストラップスタイルを使用して

まず、元book_list.htmlコードを変更します。

<！DOCTYPE HTML> 
<！ - =（0042）URL https://v3.bootcss.com/examples/dashboard/から保存- > 
<HTML LANG = "ZH-CN"> 
<ヘッド> 
    の<meta http対応当量= "Content-Typeの"コンテンツ= "text / htmlの;のcharset = UTF-8"> 

    <META HTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1"> 
    <！ -上述3个メタ标签*必须*放在最前面、任何其他内容都*必须*跟随其后！ - > 
    <メタ名= "説明"コンテンツ= ""> 
    <META NAME = "著者"コンテンツ= ""> 
    <リンクのrel = "アイコン"のhref = "https://v3.bootcss.com/favicon.ico"> 

    <タイトル>书籍列表管理</ TITLE> 
    <！ -コアCSSブートストラップ- > 
    <リンクのhref = "/静的/ストラップ/ CSS / bootstrap.min.css"のrel = "スタイルシート"> 
    <！ -このためのカスタムスタイルテンプレート- >
    <リンクのhref = "/静的/ dashboard.css" REL = "スタイルシート"> 
    <リンクREL = "スタイルシート"のhref = "/静的/ fontawesome / CSS /フォントawesome.min.css"> 
</ HEAD> 

<BODY > 
<NAVクラス= "ナビゲーションバーナビゲーションバー-逆ナビゲーションバー固定トップ"> 
    <DIV CLASS = "コンテナ流体"> 
        <DIV CLASS = "ナビゲーションバーヘッダを"> 
            <ボタンタイプ= "ボタン"クラス= "ナビゲーションバー、トグル崩壊した」データトグルを= "崩壊"のデータターゲット= "＃のナビゲーションバー" 
                    ARIA-拡大= "false"のアリア・コントロール= "ナビゲーションバー"> 
                <スパンクラス= "SR-のみ">トグルナビゲーション</ span>の
                < 
            </ button>の 
                <スパンクラス= "アイコンバー"> </ span>を
                <スパンクラス= "アイコンバー"> </ span>の 
            <フォームクラス= "ナビゲーションバー形式のナビゲーションバーの右に" >
            <a class="navbar-brand" href="https://v3.bootcss.com/examples/dashboard/#">图书管理系统</a>の
        </ div> 
        <DIV ID = "ナビゲーションバー"クラス=」ナビゲーションバー-崩壊崩壊"> 
            <ulのクラス=" NAVナビゲーションバー-NAVナビゲーションバー右"> 
                <LI> <a href="https://v3.bootcss.com/examples/dashboard/#">ダッシュボード</a>に</ LI> 
                <LI> <a href="https://v3.bootcss.com/examples/dashboard/#">設定する</a>ます。</ li> 
                <LI> <のhref = "https：//でv3.bootcss.com/examples/dashboard/#">Profileする</a>ます。</ li> 
                <LI> <のhref = "https://v3.bootcss.com/examples/dashboard/#">ヘルプする</a>ます。</ li> 
            </ ulの> 
                の<input type = "text"クラス= "フォームコントロール"プレースホルダ= "検索..."> 
            </フォーム>
        </ div> 
    </ div> 
</ NAV> 

<DIV CLASS = "コンテナ流体"> 
    <DIV CLASS = "行"> 
        <DIV CLASS = "COL-SM-3 COL-MD-2サイドバー"> 
            <！ -アクティブ表示当前页面、会加亮- > 
            <ULクラス= "NAV NAV-サイドバー"> 
                <LI> <a href="/publisher_list/">出版社列表页</a>の</ LI> 
                <李クラス= "アクティブ"> <a href="/book_list/">书籍列表</a>の</ LI> 
                <LI> <a href="/author_list/">作者列表</a>の</ LI> 
            </ UL> 

        </ div> 
        <divのクラス=」COL-SM-9 COL-SM-オフセット-3 COL-MD-10 COL-MD-オフセット2メイン"> 
            <H1 CLASS ="ページヘッダ">书籍管理页面</ H1> 

            <DIV CLASS ="パネルパネルの主">
                <！ -デフォルトのパネルの内容- > 
                <divのクラス= "パネルの見出し">书籍列表<Iクラス= "FA FA-親指タックプルライト"> </ I> </ div> 
                <divのクラス= "パネル体"> 
                    <DIV CLASS = "行"スタイル= "マージン底：15ピクセル"> 
                        <DIV CLASS = "COL-MD-4"> 
                            <DIV CLASS = "入力グループ"> 
                                の<input type =」テキスト「クラス= 『フォームコントロール』プレースホルダ= 『検索...』> 
                                <スパンクラス= 『入力グループ-BTN』> 
                                    <ボタンクラス=」BTN BTN-デフォルト」タイプ= "ボタン">搜索</ボタン>  
                                </ span>を
                            </ div> <！ - /入力グループ- > 
                        </ div> <！ - /.col-md-4 - > 
                        <！ -跳转到另一页面、添加新的书籍- > 
                        <DIV CLASS = "COL-MD-1プルライト"> 
                            <a href="/add_book/" class="btn btn-success">新增する</a> 
                        </ DIV> 

                    </ DIV> <！ - /.row - > 

                    <テーブルクラス= "テーブルのテーブルボーダー"> 
                        <THEAD> 
                        <TR> 
                            <TH>＃</番目> 
                            <TH>番号</番目>
                            <番目>タイトル</目> 
                            <目>を押してタイトル</目>
                            操作</目> <目> 
                        </ TR> 
                        </ THEAD>
                        <！ -从原先的book_list.html拷贝过来的代码- > 
                        <TBODY> 
                        {book_list％以下で書籍の％} 
                            <TR> 
                                <TD> {{forloop.counter}} </ TD> 
                                <TD> {{ book.id}} </ TD> 
                                <TD> {{book.title}} </ TD> 
                                <TD> {{book.publisher.name}} </ TD> 
                                <TD> 
                                    <クラス= "BTN btn-危険」HREF = "/ del_book /？ID = {{book.id}}">删除</a>の
                                    <a class="btn btn-info" href="/edit_book/?id={{ book.id }}">编辑する</a>
                                </ TD>
                            </ TR> 
                        {％ENDFOR％}
                        </ TBODY> 
                    </ TABLE> 

                    <NAV ARIAラベルは、= "ページナビゲーション"クラス= "テキスト右"> 
                        <ulのクラス= "改ページ"> 
                            <LI> 
                                <HREF = "＃" ARIAラベル= "前"> 
                                    <スパンARIA-隠さ="真の">«</ span>を
                                する</a> 
                            ます。</ li> 
                            <LI> <a href="#"> 1 </a>に</ LI> 
                            <LI> <A HREF = "＃"> 2 </a>の</ LI> 
                            <LI> <a href="#"> 5 </a>に</ LI> 
                            <LI>HREF = "＃"> 2 </a>の</ LI> 
                            <LI> <a href="#"> 3 </a>に</ LI>
                            <LI> <a href="#"> 4 </a>にます。</ li> 
                                <a href="#" aria-label="Next"> 
                                    <スパンARIA-隠さ= "真の">»</ span>の
                                </a>の
                            </ LI> 
                        </ UL> 
                    </ NAV> 
                </ div> 

            </ div> 
        </ div> 
    </ div> 
</ div> 


<DIV CLASS = "モーダルフェード"のtabindex = " - 1"役割= "ダイアログ" ID = "myModal"> 
    <DIV CLASS = "モーダルダイアログ"ロール=」文書"> 
        <DIV CLASS ="モーダル・コンテンツ"> 
            <DIV CLASS ="モーダルヘッダ」>
                <ボタンタイプ= "ボタン"クラス= "クローズ"データ・解任= "モーダル" ARIAラベル= "閉じる"> <スパンアリア-隠された= "true"を>×</ span>を
                </ button>の
                <H4クラス= "モーダルタイトル">用户信息</ H4> 
            </ div> 
            <DIV CLASS = "モーダル体"> 
                <フォームクラス= "フォーム水平"> 
                    <DIV CLASS = "フォームグループ"> 
                        邮箱</ label>は<= "inputEmail3"クラス= "COL-SM-2コントロールラベル"のラベル> 
                        <DIV CLASS = "COL-SM-10"> 
                            の<input type = "メール"クラス= "フォームコントロール"ID =" inputEmail3"プレースホルダ= "メール">は
                        </ DIV> 
                    </ DIV>inputPassword3"クラス= "COL-SM-2コントロールラベル">密码</ label>は
                        <DIV CLASS = "COL-SM-10"> 
                    <divのクラス= "フォームグループ">
                        <= "COL-SM-2コントロールラベル" = "inputPassword3"クラスのラベル>密码</ラベル> 
<！ -コアJavaScriptのブートストラップ
                            <input type = "パスワード"クラス= "フォームコントロール" ID = "inputPassword3"プレースホルダ= "パスワード"> 
                        </ div> 
                    </ div> 
                </ FORM> 
            </ div> 
            <DIV CLASS = "モーダル・フッタ" > 
                <ボタンタイプ= "ボタン"クラス= "BTN BTN-デフォルトの"データ・解任= "モーダル">取消</ button>の
                <ボタンタイプ= "ボタン"クラス= "BTN BTN-主">保存</ボタン> 
            </ div> 
        </ div> <！ - /.modal-content - > 
    </ div> <！ - /.modal-dialog - > 
</ div> <！ - /。モーダル- > 

============================================== ==== - > 
<！ -ページ読み込みが速くなるよう、文書の最後に配置- >
<スクリプトSRC = "/静的/ jqueryの-3.3.1.js"> </ SCRIPT> 
<スクリプトSRC = "/静的/ストラップ/ JS / bootstrap.min.js"> </ SCRIPT> 

</ body> 
</ HTML>

解像度を変更します。

業績：

再びadd_book.htmlを変更

<!DOCTYPE html>
<!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ -->
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="https://v3.bootcss.com/favicon.ico">

    <title>添加书籍</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/dashboard.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<!-- 以上 head 部分从 book_list.html 赋值过来并加以修改 -->

<!-- 以下 body 部分可从 Bootstrap 网站上找相关代码 -->
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <div class="panel panel-primary">
                <div class="panel-heading">添加书籍</div>
                <div class="panel-body">
                    <form class="form-horizontal" action="/add_book/" method="post">
                        <div class="form-group">
                            <label for="book_title" class="col-sm-2 control-label">书名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="book_title" name="book_title"
                                       placeholder="书名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">出版社</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="publisher">
                                    {% for publisher in publisher_list %}
                                        <option value="{{ publisher.id }}">{{ publisher.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


</div>

</body>
</html>

步骤：

先写一个 container

找一个面板，在 Bootstrap 的组件中可找到

复制代码，并进行修改

现在需要一个 form 表单，在 Bootstrap 的全局 CSS 样式中找

复制下面的代码，替换面板代码中的 Panel content，并进行修改

先修改 email 处

<div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
</div>

修改为：

<div class="form-group">
    <label for="book_title" class="col-sm-2 control-label">书名</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="book_title" name="book_title" placeholder="书名">
    </div>
</div>

再来修改 password 处，这里需要用到下拉列表，还是去 Bootstrap 上找

在 “菜单” -> "被支持的控件" 处

复制代码，并进行修改

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
</div>

修改为：

<div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">出版社</label>
    <!-- 下拉列表 -->
    <div class="col-sm-10">
        <select class="form-control" name="publisher">
            {% for publisher in publisher_list %}
                <option value="{{ publisher.id }}">{{ publisher.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>

接着修改剩下的部分

最后在 form 表单处添加 action 和 method

运行效果：

パイソン - ジャンゴ - 本のリストを修正するためにブートストラップスタイルを使用して

おすすめ