【django入门】 09 Bootstrap设计页面

引入Bootsrap

  • 创建静态文件的目录，放入Bootstrap文件

  • Html开头声明引入静态文件

  • <head>内引入Bootstrap CSS
  • <body>内“先后”引入Jquery js、Bootstrap js，并置于<body>的“末尾”

    Bootstrap V3.0、V4.0 需要Jquery支持；V5.0不再依赖
    注意区分，script引用是src=""，css引用是href=""


改造Bootstrap

复制导航条

改造导航条

  • 删除<li class="dropdown">等多余组件
  • 删除<div class="container-fluid">中的“-fluid”，使navbar居中
  • <a class="navbar-brand"> 标题改为“用户管理系统”
  • ……略……（参考最终效果）

效果如下

新建按钮“新建部门”

<div class="container">
    <div style="margin-bottom: 10px">
        <a class="btn btn-primary" href="#">新建部门</a>
    </div>
</div>

复制带表格的面版

改造带表格的面版

  • <table class="table table-bordered"> table-bordered即有边框的表格
  • btn btn-primary即蓝底按钮；btn btn-danger即红底按钮；btn btn-success即绿底按钮
  • Bootstrap V3 四种标准尺寸：btn-/xs/sm/{null(or md)}/lg/(xs)

为表格标题添加图标

  • 在中文文档中找到表格样式的图标，其名为glyphicon glyphicon-th-list
  • 新建<span>，限定其class为glyphicon glyphicon-th-list

效果如下


来源：BV1NL41157 武沛齐《2022 B站最详细django3教程(django从入门到实践)》P23

posted @ 2022-02-11 11:48  navii  阅读(274)  评论(0)    收藏  举报