django学习——bootstrap记录

已于 2024-02-05 18:19:48 修改
阅读量1.2k 收藏 25
点赞数 27
文章标签： django 学习 bootstrap
于 2024-02-03 12:08:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whyaibiancheng/article/details/136005313
版权

简单介绍一下学习到的bootstrap和font-Awesom以及jquery

文章目录

一、bootstrap是什么？

别人帮我们写好的一堆css,引入即可使用

如何用？

  1. 下载下来
    这里使用的是v3版本，并且在下载的时候有两个版本，生产版本以及开发版本，开发版本查看源码(就是定义好的css)比较方便，生产版本的文件更加小巧。所以我们使用的是开发版本

  2. 引入
    下载下来创建一个文件结构static/plugins，把插件都放在这个里面。后来有一些图表直接用pycharm里自带的html文件查看工具不能显示，然后改成了用flask框架打开，后来的文件都放在flask文件里，是放在.py同目录下的static下
    使用

<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

在head中引入

二、使用步骤

1.初识

代码如下（示例）：

<input type="button" value="提交">
<input type="button" value="提交" class="btn btn-primary">
<input type="button" value="提交" class="btn btn-success">
<input type="button" value="提交" class="btn btn-danger">
<input type="button" value="提交" class="btn btn-danger btn-xs">
这分别是不同颜色样式以及大小的button

2.导航

这个就是在bootstrap官网找到组件里的导航复制到自己的html文件中，然后在style中将显示的圆角去掉。下面是html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    开发版本-->
    <link rel="stylesheet" href="/templates/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .navbar{
            border-radius: 0;
        }
    </style>
<!--    生产版本<link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css">-->
</head>
<body>
<input type="button" value="提交">
<input type="button" value="提交" class="btn btn-primary">
<input type="button" value="提交" class="btn btn-success">
<input type="button" value="提交" class="btn btn-danger">
<input type="button" value="提交" class="btn btn-danger btn-xs">

<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="#">中国联通</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="#">上海</a></li>
        <li><a href="#">深圳</a></li>
        <li><a href="#">北京</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="#">登陆</a></li>
        <li><a href="#">注册</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>
</body>
</html>

3.博客

这是一个案例这是这个博客大致的样子，只需要一个导航两个栅格和一些面板和媒体meida对象，对象分别包裹在两个栅格里面

栅格

栅格分为响应式和非响应式，响应式在页面宽度达到一定宽度时才会生效，否则就将分成两行显示

  <div class="col col-sm-offset-2 col-md-6" style="background: #2aabd2">111</div>
    <div class="col-md-6" style="background: saddlebrown">222</div>
    栅格的偏移col-sm-offset-2

实际使用的时候栅格是被container包裹着的,而container-fluid使包裹的组件向两边靠拢
最后又找了一个分页，要学会定位元素复制选择outerHTML
这里再强调一下，float-right后需要清除浮动 clear:both

4.登陆

这是需求的大致样子
可以直接在bootstrap的表单上修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/templates/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .account {
            height: 320px;
            width: 500px;
            margin: 0 auto;登陆框居中
            border: 1px solid #dddddd;
            margin-top: 200px;
            padding: 20px 40px;内部距离
            border-radius: 5px;
            box-shadow: 5px 5px 5px #aaa;设置阴影，参数分别为左，右，阴影长度，颜色的参数
        }

        .account h1 {
            margin-top: 5px;
            text-align: center;这里可以令文字组件居中
        }
    </style>

</head>
<body>
<div class="account">

    <h1>用户登陆</h1>
    <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>



    </form>
    <input type="button" value="登陆" class="btn btn-primary" >


</div>
</body>
</html>

5.后台管理

后台样板图
最上面的导航可以用上面的导航修剪得到，然后下面是两个表单和一个分页
第一个表单的foot部分用一个表单替代，第二个是用一个表格替代
注意其中的i标签引用了font-Awesom的图表,例如保存的前面，因为直接用pycharm自带的html文件浏览工具无法查看这个图表，都是显示一个正方形，所以使用的是使用flask框架启动，这样图表就能正常显示了
使用font-Awesom当然也要下载和在文件中导入，导入的方式和bootstrap一样，并且bootstrap也提供了一些图标，只是种类没有font-Awesom多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">

        <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="#">中国联通</a>
        </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">上海</a></li>
                <li><a href="#">深圳</a></li>
                <li><a href="#">北京</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登陆</a></li>
                <li><a href="#">注册</a></li>

            </ul>
        </div>
    </div><!--container-->
</nav>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-body">
            Panel content
        </div>
        <div class="panel-footer">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail3">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="exampleInputPassword3">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                </div>

                <button type="submit" class="btn btn-success"><i class="fa fa-save" aria-hidden="true"></i> 保存</button>这里的i标签使用的是font-Awesome的图表
            </form>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" >
            <i class="fa fa-save" aria-hidden="true"></i> Panel title  
        </div>上面的i标签也是引用font-Awesome

        <div class="bs-example" data-example-id="bordered-table">
            <table class="table table-bordered  table-hover">
                <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>
                        <a href="" class="btn btn-primary btn-xs">编辑</a>
                        <a href="" class="btn btn-danger btn-xs">删除</a>
                    </td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
</body>
</html>

6.blog的最终形态以及jquery

之后在blog中添加了一些图表如下图所示
在这里插入图片描述
star和fire图表可以直接在font-Awesom中搜索，紧接着是calen日历用户以及comment，并且可以通过style修改他们的颜色。

  • javascript包含许多类库，可以使页面动起来
  • bootstrap依赖javascript的类库，叫jquery
    然后下载jquery，将其放在static下，并将其在/body前面引入，此时页面就可以动起来了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .more .more-item {
            display: inline-block;
            margin-right: 20px;
        }
    </style>
</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="#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="#">中国联通</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="#">上海</a></li>
                <li><a href="#">深圳</a></li>
                <li><a href="#">北京</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"><i class="fa fa-search" aria-hidden="true"></i></button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登陆</a></li>
                <li><a href="#">注册</a></li>
                <li>
                    <a  data-toggle="modal" data-target="#myModal">
                        打开
                    </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>
<!--<div class="container-fluid">和container对应，这个是分散在两边-->
<div class="container clearfix">
    <div class="col-sm-9">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOGQ2OTlkYzdkMyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZDY5OWRjN2QzIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4yNTc4ODMwNzE4OTk0MTQiIHk9IjM2LjQzNTE1OTIwNjM5MDM4Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                <div>
                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                    <i class="fa fa-star" aria-hidden="true" style="color: #f0ad4e"></i>
                    <i class="fa fa-star-o" aria-hidden="true"></i>
                </div>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras
                purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
                fringilla. Donec lacinia congue felis in faucibus.
            </div>
            <div class="more clearfix">
                <div class="more-item">
                    <i class="fa fa-calendar" aria-hidden="true"></i>2021-11-11
                </div>
                <div class="more-item">
                    <i class="fa fa-user" aria-hidden="true"></i> 王泓一
                </div>
                <div class="more-item">
                    <i class="fa fa-comment" aria-hidden="true"></i> 1000
                </div>
                <div class="more-item" style="float: right">
                    <i class="fa fa-comment" aria-hidden="true"></i> 1000
                </div>
            </div>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                             src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOGQ2OTlkYzdkMyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZDY5OWRjN2QzIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4yNTc4ODMwNzE4OTk0MTQiIHk9IjM2LjQzNTE1OTIwNjM5MDM4Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                             data-holder-rendered="true" style="width: 64px; height: 64px;">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">Media heading</h4>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras
                    purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate
                    fringilla. Donec lacinia congue felis in faucibus.
                </div>
            </div>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                             src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOGQ2OTlkYzdkMyB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZDY5OWRjN2QzIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4yNTc4ODMwNzE4OTk0MTQiIHk9IjM2LjQzNTE1OTIwNjM5MDM4Ij42NHg2NDwvdGV4dD48L2c+PC9nPjwvc3ZnPg=="
                             data-holder-rendered="true" style="width: 64px; height: 64px;">
                    </a>

                </div>
                <div class="media-body">
                    <h4 class="media-heading">Media heading</h4>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras
                    purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate
                    fringilla. Donec lacinia congue felis in faucibus.
                </div>
            </div>
            <nav aria-label="...">
                <ul class="pagination">
                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
                    </li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading"><i class="fa fa-fire" aria-hidden="true"
                                          style="color: rebeccapurple;font-size: 18px"></i> Panel heading without
                title
            </div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">Panel heading without title</div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">详细信息</h4>
            </div>
            <div class="modal-body">
                asdasddjlaksjdlkasjdlkajs;dlkajsl;dk
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</body>
</html>
why不是我呀
关注
  • 27
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
◢Django-下载bootstrap3，jquery插件，并使用其写html
m0_62836433的博客
08-02 159
在建立好的django项目下建立static，templates文件夹，将jQuery与bootstrap复制如下路径【static和templates名称不可变】【方面查找与管理】将btn-primary添加至需要颜色的按钮即可【不确定，可在页面上使用开发者工具细看】可对其进行更改，将按钮改为蓝色，自己添加css或者添加它自己的css样式。解压后【min是压缩后的，内容不变，体积小，常使用这两个】3. 建立path，建立view，建立html。文字图标的大小与颜色也是可以进行更改的。
bootstrap + django的简单后台管理系统
COOL66BOY的博客
04-14 7708
文章目录登录页面Form和MiddleForm的书写HTML代码：信息管理页面母版HTML代码管理员信息各种功能页面Ajax数据传输JS部分数据统计页面JS部分文件上传HTML部分代码Python代码部分media配置补充 使用的是django3.0版本，数据库使用的是mysql1.0版本的 项目所包含的文件如下图： 登录页面 需要实现功能： 1、用户输入的用户名，密码和验证码能在后台获取 2、将获取的数据进入到数据库查找 3、成功登录后，将用户存储一个cookie在浏览器的session里面 4
基于python语言的web框架Django+bootstrap实践（二）
Bottomrise的博客
05-23 764
这把，建静态网站，就是说整个博客，能登录，后端编写，前端呈现，导航，分页查看。同类的还有信息发布网站，个人空间etc.，功能有信息发布/信息记录，以及附带的登录\权限\分类\检索\广告\统计\评论。建立web项目，新建Myblog应用。开整。
Django---Django配置Bootstrap
测试-安静
04-07 323
前言 　　好久没写Django了，今天来一篇，前面编写的HTML都是一些普通的页面，什么渲染都没有加上。今天安静介绍一篇可以通过Bootstrap配置HTML页面的上的一些CSS，JS文件内容 Bootstrap Bootstrap，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。 官方文档：https:/...
Django+Bootstrap 博客 首页、详情、评论
weixin_47631745的博客
05-12 286
在这种情况下，需要在生成的模型实例上调用 save()。如果模型具有多对多关系，并且在保存表单时指定了 commit=False ，Django无法立即保存多对多关系的表单数据。新建blog/templatetags文件夹，在这个文件夹下创建一个custom_tags.py文件，存放自定义的模板标签。要解决这个问题，在手动保存表单生成的实例后，可以调用 save_m2m() 来保存多对多的表单数据。8.4.点击分类/标签，左侧博客列表显示对应博客数据。1.4.分类、标签（添加、列表、点击）
Django+Bootstrap 博客注册、登录、登出
weixin_47631745的博客
05-11 380
我们用Django Form建立一个表单，这样可以在代码中控制字段的显示方式、输入校验、错误显示等内容，在/test_blog/blog文件夹下新建一个文件forms.py，在文件中输入以下代码。建立LogUser后，如果让Django 用户认证系统使用我们自定义的用户模型，而不再使用内置的User数据模型，需要通过settings.py中的AUTH_USER_MODEL指定，代码如下。在博客应用程序中有二级URL配置文件，文件为/test_blog/blog/urls.py，代码如下。
python测试开发django-173.bootstrap实现table表格行内编辑（csdn）————程序.pdf
12-03
在本文中，我们将探讨如何使用Python的Django框架结合Bootstrap来实现一个简单的表格行内编辑功能。这个功能主要用于测试开发场景，简化了前端界面的复杂性，仅保留了基本的添加、删除和编辑行的操作。 首先，我们...
Facial-Attendance-System-Django:Django•OpenCV•Bootstrap•人脸识别库
04-24
本项目——"Facial-Attendance-System-Django"，就是一个集成了Django框架、OpenCV图像处理库以及Bootstrap前端框架的面部考勤系统。该系统为学生和教师提供了全面且便捷的考勤解决方案。 **Django框架的运用** ...
Student-management-website-using-Django-and-bootstrap5
05-28
本项目——"Student-management-website-using-Django-and-bootstrap5"，正是利用这两者的优点，实现了一个实用的学生记录管理系统。 **Django框架** Django以其“ Batteries included ”的理念著称，内置了众多...
数据库课设——选修课管理系统
05-29
在本项目“数据库课设——选修课管理系统”中，我们关注的是如何设计并实现一个高效、实用的选课系统，以满足高校学生和教务人员对于选修课程的管理需求。这个系统不仅是一个技术实践，也是对数据库设计、前端交互和...
Django结合Bootstrap完美实现分页效果
01-31
Django结合Bootstrap完美实现分页效果，其中控件的分页根据内容自适应调整
python django+bootstrap实现用户管理系统
06-28
python+django+bootstrap实现的管理系统，注释全，功能强大，又文档说明，导入即可查看源码，初学者必备
基于django+bootstrap4实现的个人博客python(自带的后台管理系统适配手机端)
06-19
Django 自带的后台管理系统，方便对于文章、用户及其他动态内容的管理 文章分类、标签、浏览量统计以及规范的 SEO 设置 用户认证系统，在 Django 自带的用户系统的基础上扩展 Oauth 认证，支持微博、Github 等第三方认证 文章评论系统，炫酷的输入框特效，支持 markdown 语法，二级评论结构和回复功能 信息提醒功能，登录和退出提醒，收到评论和回复提醒，信息管理 强大的全文搜索功能，只需要输入关键词就能展现全站与之关联的文章 RSS 博客订阅功能及规范的 Sitemap 网站地图 实用的在线工具 友情链接和推荐工具网站的展示 缓存系统，遵循缓存原则，加速网站打开速度 RESTful API 风格的 API 接口
选课源代码————毕业设计
03-30
具体技术可能包括Spring Boot、Django、Flask等Web框架，配合MySQL或PostgreSQL等关系型数据库，以及Bootstrap、Vue.js、React等前端框架。 6. **性能优化与安全** 为了提升用户体验，系统可能进行了性能优化，如...
Python + Django4 搭建个人博客（九）：Bootstrap实现博客列表页面
李威威wiwi的博客
08-30 2098
本篇我们在上篇文章列表的模板上进行了一些修改，我们引入了Bootstrap框架的JS和Css静态文件。 在模板上通过模板标签在模板文件中加载了对应的静态文件。 我们还熟悉了django模板继承过程，模板继承的实现步骤如下： 1、在模板子模板（比如：list.html）中使用{% extends "base.html" %}来继承模板base.html的代码。 2、由标签{% block body %}在继承模板的基础上实现自定义模板的内容。 3、由{% endblock %}结束block标签。......
今天的Django教训汇总：安装django-bootstrap4避免静态文件失效-20220228
Season CSDN博客
02-28 1244
流程说明 修改base.py来添加到apps INSTALLED_APPS = [ 'grappelli', 'bootstrap4', 'registration', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', ..
Django+BootStrap下的民居系统开发
小小黑的博客
10-25 669
使用Django开发一个简单的民居系统
Django搭建个人博客：使用 Bootstrap 4 改写模板文件
weixin_34326429的博客
09-19 461
上一章我们的网站页面实在太粗糙，你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量，改写一个大气的博客。 配置Bootstrap 4 Bootstrap是用于网站开发的开源前端框架（“前端”指的是展现给最终用户的界面），它提供字体排印、窗体、按钮、导航及其他各种组件，旨在使动态网页和Web应用的开发更加容易。 Bo...
Django学习6-Bootstrap样式：导航栏、表单、card
热门推荐
qq_19268039的博客
10-26 1万+
Bootstrap的安装 pip install django-bootstrap4安装完成。可以在venv下的lib看到bootstrap4： 然后在setting.py中添加bootstrap应用： INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.con...
django cleaned——data
最新发布
09-03
Django中的`cleaned_data`是一个包含已验证数据的字典。当你在Django中使用表单进行数据验证时，如果所有的验证规则都通过了，那么验证后的数据会存储在`cleaned_data`中。 在Django的视图函数中，你可以通过调用表单对象的`is_valid()`方法来检查表单数据是否有效。如果有效，你可以通过访问表单对象的`cleaned_data`属性来获取验证后的数据。这个属性返回一个包含所有字段的键值对的字典，其中键是字段的名称，值是验证后的数据。 以下是一个简单的示例： ```python from django import forms class MyForm(forms.Form): name = forms.CharField(max_length=100) email = forms.EmailField() def my_view(request): if request.method == 'POST': form = MyForm(request.POST) if form.is_valid(): name = form.cleaned_data['name'] email = form.cleaned_data['email'] # 在这里可以使用验证后的数据进行进一步处理 # ... else: form = MyForm() return render(request, 'my_template.html', {'form': form}) ``` 在上面的例子中，如果表单数据有效，我们可以通过`form.cleaned_data`来获取验证后的数据。在这个例子中，我们可以使用`name`和`email`变量来访问相应字段的验证后数据。 希望这能解答你关于`cleaned_data`的问题。如果还有其他问题，请随时提问！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值