yukai08008
yukai08008

Python 全栈系列4 - BS4基础页面

1 说明

计划以BS4的风格进行排版，然后层级的嵌套各个功能到基础页面。
具体来说：

  • 1 基础页面具有导航栏和侧边栏
    • 1 导航栏主要提供页面内的内容导航
    • 2 侧边栏提供以用户为中心的内容导航
  • 2 内容部分
    • 1 以行(row)展示内容
    • 2 每行的内容只有两种形式
      • 1 简单的H5格式文本或者Markdown
      • 2 iframe嵌入网页

灵活性主要在iframe嵌入的网页上：主要有多标签页的网页、步骤条导航、图（由pyecharts或者d3js生成，允许异步拉取数据的网页）、表（DataTables)、由Jquery控制的元素页面。

2 基础页面

基础页面提供了上述的基本框架和模板。粗略的可以分为四部分：

  • 1 Part1 Head
    • 头部，主要引入各种依赖的css和js
  • 2 Part2 nav
    • 提供内面内和页面间的导航，可以把页面内的导航放在靠左的位置，页面间的导航放在靠右的位置
  • 3 Part3 sidenav
    • 可收缩的侧边栏，提供以用户为中心的一些设置，例如DashBoard
  • 4 Part4 Row-Based Content
    • 基于行的内容填充

3 代码解释

第一部分是头部，引入了诸如页面标签，屏幕影响等设置，最主要的部分则是引入了支持后续调用的css和js.



<head>
    
    <link rel="shortcut icon" href="/static/img/general/tem_logo.ico" type="image/x-icon">
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    
    <link rel="stylesheet" href="/static/vendor/Bootstrap/css/bootstrap.min.css">
    <script src="/static/vendor/jquery/jquery.js">script>
    <script src="/static/vendor/Bootstrap/js/popper.min.js">script>
    <script src="/static/vendor/Bootstrap/js/bootstrap.min.js">script>
    
    <link rel="stylesheet" href="/static/vendor/FontAwesome/css/font-awesome.min.css">
    
    
    <link rel="stylesheet" href="/static/vendor/DataTables/css/dataTable.css">
    <script src="/static/vendor/DataTables/js/dataTable.js">script>


    
    <link rel="stylesheet" href="/static/css/page.css">
    <script src="/static/js/page_control.js">script>
    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
        $(document).ready(function () {
            $('[data-toggle="popover"]').popover();
        });
    script>

head>

第二和第三部分从标签上看是挨在一起的，第三部分（sidebar)属于第二部分。这里并没有对标签的导航做任何限制。
第二部分一般从左到右分别显示公司的logo（链接到主页），页面内部的导航和页面间的导航。
第三部分从上到下分别是头像，和各个功能块的链接。



<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-offcanvas fixed-top" style="position: sticky;">




<ul  class="navbar-nav navbar-top">
<button class="navbar-toggler navbar-toggler-right navbar-icon" data-target="#navbar-mobile"
    aria-controls="navbar-mobile" aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon-bar bar1">span>
    <span class="icon-bar bar2">span>
    <span class="icon-bar bar3">span>
button>
ul>


<div class="navbar-collapse collapse ml-auto" id="navbar-mobile">
    <ul class="navbar-nav ml-auto">
        
        <li class="nav-image"><img src="{{url_for('static',filename='img/general/sample.png')}}"
                alt="侧边栏图片"  class="rounded-circle">li>

        
        <li class="nav-item">
            <div class="card bg-primary text-white">
                <div class="card-body"><a href="#" class="card-link text-white">侧边栏链接1a>
                div>
            div>
        li>

    ul>
div>
nav>

第四部分是内容部分，包含在body标签之内。这里的第一行插入了一列，内容是普通文本。（如果想占满一行则修改列的class为col md-12）
行和行之前为了增加一些分隔区域，还插入了一个空的盒子（class = m-5)
元素距离参考
影响距离大小的值有
0,1,2,3,4,5,auto

类名 作用
m-5 等价于{margin:3rem !important}

第二行插入了一个iframe。这个内嵌网页独立与当前页，因此其内容和形式是可以单独设置的。


<body>
    <div class="container">
        
        <div class="row">
            <div class="col">
                First Row First Col
            div>
        div>
        
        
        <div class="m-5">div>
        
        <div class="row">
            <div class="col">
                <iframe src="{{url_for('main.page2')}}" frameborder="0" width="100%" height="500px">iframe>
            div>
        div>
        
        <div class="row">
            <div class="col">
                Third Row ....
            div>
        div>

    div>
body>

不要忘记在视图函数中增加：

# page3_base
@main.route('/page3', methods=['GET', 'POST'])
def page3():
    return render_template('page3_base.html')

4 效果

访问：http://localhost:5000/page3
可以看到，第二行嵌入的是page2的内容。
Python 全栈系列4 - BS4基础页面_第1张图片

你可能感兴趣的:(全栈)