flask+bootstrap部落格設計
阿新 • • 發佈：2019-01-30
上次搭建了一個簡單的基於Django框架的模板，最近修改成flask框架，想在其頁面上增加使用者登入類似cdns的社群，但是越改BUG越多，今天開始重新自己學習前端頁面，反正以後還是要接觸的。
一、在http://www.bootcss.com/下載bootstarp一些靜態檔案，然後可以根據菜鳥教程的bootstrap教程來了解用法
http://www.runoob.com/bootstrap/bootstrap-html-codeguide.html：菜鳥教程
1、首先設計一個部落格的首頁，包含登陸註冊，部落格文章，熱文，標籤，最新文章
程式碼：
<!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標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>個人部落格</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- Bootstrap --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支援 HTML5 元素和媒體查詢（media queries）功能 --> <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --> <!--[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> <nav class="nav navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header" > <a class="navbar-brand" href="index.html"><span class="glyphicon glyphicon-home"></span>首頁</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-erase"></span>我的部落格文章</a></li> <li><a href="#"><span class="glyphicon glyphicon-inbox"></span>後臺系統</a></li> </ul> </div> <div class="navbar-form navbar-right" style="margin-right: 30px;"> <a href="#" class="navbar-link">註冊</a> <a href="#" class="navbar-link">登入</a> </div> </div> </nav> <div class="container-fluid" style="margin-top: 70px;"> <div class="col-md-9"> <div class="list-group"> <div class="list-group-item" style="border: 0;"> <a href="#"><h4>這是標題部分</h4></a> <p> <small>釋出時間: 2016-6-6</small> <small>點選量: <span class="badge">20</span></small> </p> <p class="text-muted">這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分 </p> <p> <span class="badge">關鍵字</span> <span class="badge">關鍵字</span> <span class="badge">關鍵字</span> </p> <a href="#"><h4>這是標題部分</h4></a> <p> <small>釋出時間: 2016-6-6</small> <small>點選量: <span class="badge">20</span></small> </p> <p class="text-muted">這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分這是內容部分 </p> <p> <span class="badge">關鍵字</span> <span class="badge">關鍵字</span> <span class="badge">關鍵字</span> </p> </p> </div> <div style="border: 1px dashed #ddd;"></div> <!-- 分頁 --> <div class="text-center"> <ul class="pagination"> <!-- 向前符號 --> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> </div> </div> <!--/內容--> <div class="col-md-3"> <div id="search" class="sidebar-block search" role="search"> <h2 class="title"><strong>搜尋</strong></h2> <form class="navbar-form" action="search.php" method="post"> <div class="input-group"> <input type="text" class="form-control" size="35" placeholder="請輸入關鍵字"> <span class="input-group-btn"> <button class="btn btn-default btn-search" type="submit">搜尋</button> </span> </div> </form> </div> <div class="sidebar-block recommend"> <h2 class="title"><strong>熱門推薦</strong></h2> <ul> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> </ul> <h2 class="title"><strong>最新文章</strong></h2> <ul> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> <li><a target="_blank" href=""> <span class="thumb"><img src="images/icon/icon.png" alt=""></span> <span class="text">個人技術部落格技術部落格的 ...</span> <span class="text-muted">閱讀(2165)</span></a></li> </ul> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>