精华内容
下载资源
问答
  • 本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考,具体如下: 先来看看效果图: 具体代码如下(某管理系统的Bootstrap实现): <!DOCTYPE ...
  • Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单。接下来通过本文给大家介绍Bootstrap表单布局实例代码详解,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
  • bootstrap布局实例

    千次阅读 2019-01-15 23:24:54
    1.路径导航 <!doctype html><html><head><meta charset="utf-8"><title>...link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script typ...

    1.路径导航

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>路径导航</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

    </script>

    </head>

    <body>

    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li class="active">售后</li>
            </ol>
        </div>
    </div>

    </body>
    </html>

    bootstrap布局实例

    2.bootstrap下拉菜单

    (1)dropdown-toggle
    (2)dropdown-menu

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>路径导航</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

    </script>

    </head>

    <body>

    <div class="container">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li class="active">售后</li>
            </ol>
        </div>
    </div>
    <br>
    <br>
    <!--放在一行-->
    <div class="row">
    <!--关联类-->
        <div class="dropdown">
        <!--不用写data-target-->
        <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            菜单目录
            <!--下拉箭头-->
            <span class="caret"></span>
        </div>
            <!--下拉菜单-->
            <ul class="dropdown-menu">
                <li><a href="#">菜单1</a></li>  
                <li><a href="#">菜单2</a></li>
                <li><a href="#">菜单3</a></li>
            </ul>
    </div>
    </div>

    </body>
    </html>

    bootstrap布局实例

    实例:水果节

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>水果节</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript">

    </script>

    </head>

    <body>

    <!--navbar导航条类,navbar-inverse黑色导航条,navbar-static-top消去圆角-->
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <!--定义logo,navbar-header声明logo容器-->
            <div class="navbar-header">
                <!--折叠按钮,data-toggle类,data-target目标,id要加#-->
                <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
                    <!--icon-bar表示横杠-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--navbar-brand,logo样式-->
                <a href="" class="navbar-brand"><img src="images/logo.png" alt="logo"></a>
            </div>
            <!--navbar-collapse折叠样式-->
            <div class="collapse navbar-collapse" id="mymenu">
    
                <!--定义菜单 nav,navbar-nav定义导航条菜单-->
                <ul class="nav navbar-nav">
                    <!--active选中状态-->
                    <li class="active"><a href="#">推荐商品</a></li>
                    <li><a href="#">手机生鲜</a></li>
                    <li><a href="#">抽奖</a></li>
                </ul>
                <!--定义菜单里的表单,navbar-form定义导航条的表单,navbar-right菜单靠右-->
                <form action="" class="navbar-form navbar-right">
                    <!--form-group表单组-->
                    <div class="form-group">
                        <!--按钮组-->
                        <div class="input-group">
                            <input type="text" class="form-control">
                            <!--span下使用bootstrap的组件-->
                            <span class="input-group-btn">
                                <button class="btn btn-default">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
    
        </div>
    </div>
    <!--jumbotron巨幕-->
    <div class="jumbotron">
        <div class="container">
    
            <div class="row">
                <!--栅格设计,适应浏览器缩放-->
                <div class="col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1">
                <!--img-responsive图片缩放-->
                    <img src="images/banner_title.png" alt="标题" class="banner_title img-responsive">
                    <h2 class="banner_detail_title">水果介绍</h2>
                    <P class="banner_detail">出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。</P>
                </div>
                <div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1 hidden-sm hidden-xs">
    
                    <img src="images/basket.png" alt="fruit1" class="img-responsive">
                </div>
            </div>
        </div>
    </div>
    
    <div class="container">
        <div class="row innersty">
    
            <h3 class="text-center">活动图片</h3>
            <p class="text-center">现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置了 aria-hidden="true" 属性。</p>
        <!--row平衡容器的15px边距,它里面的是负padding--> 
        <div class="row  active_list">
    
            <div class="col-lg-3 col-md-3 col-sm-6">
                <!--thumbnail图片的一种样式-->
                <div class="thumbnail">
                    <img src="images/active01.jpg" alt="活动一">
                    <h4>现场采摘活动</h4>
                </div>
            </div>
    
            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                    <img src="images/active02.jpg" alt="活动一">
                    <h4>现场采摘活动</h4>
                </div>
            </div>
    
            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                    <img src="images/active03.jpg" alt="活动一">
                    <h4>现场采摘活动</h4>
                </div>
            </div>
    
            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="thumbnail">
                    <img src="images/active04.jpg" alt="活动一">
                    <h4>现场采摘活动</h4>
                </div>
            </div>
        </div>
        </div>
    </div>
    <div class="container">
        <div class="row goods_list">
    
            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="商品" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="商品" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="商品" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="商品" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="goods_con">
                    <img src="images/goods.jpg" alt="商品" class="img-responsive">
                    <h4>商品名称</h4>
                    <p>¥ 25.00/500g</p>
                </div>
            </div>
        </div>
    </div>

    </body>
    </html>

    CSS文件:

    / CSS Document /
    /调整logo位置/
    .navbar-brand{
    padding: 7px 15px;
    }
    /导航条背景色,边框色/
    .navbar-inverse{
    background-color: #ff722b;
    border-color: #FF722B;
    }
    /导航条列表文字颜色/
    .navbar-inverse .navbar-nav > li > a {
    color: #fff;
    }
    /列表首页选中状态,/
    .navbar-inverse .navbar-nav > .active > a,
    .navbar-inverse .navbar-nav > .active > a:hover,
    .navbar-inverse .navbar-nav > .active > a:focus {
    color: #FFFFFF;
    background-color: #C45923;
    }
    /折叠按钮边框/
    .navbar-inverse .navbar-toggle {
    border-color: #FFFFFF;
    }
    /选中折叠按钮的背景色/
    .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #C45923;
    }
    /导航条 下拉列表 表单的边框颜色/
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #FFFFFF;
    }
    /导航条的底部margin/
    .navbar{
    margin-bottom: 0;
    }
    /巨幕/
    .jumbotron{
    background: url("../images/banner_bg.jpg") center center no-repeat;
    padding: 25px 0;
    }
    /标题位置/
    .banner_title{
    margin-top: 47px;

    }
    /标题位置随浏览器缩放调整/
    @media (max-width:1200px){
    .banner_title{
    margin-top: 30px;
    }
    }

    @media (max-width:992px){
    .banner_title{
    margin-top: 15px;
    }
    }
    /二级标题文字大小,颜色/
    .banner_detail_title{
    font-size: 18px;
    color: #FFFF00;
    }
    /文字内容,大小,颜色,行高/
    .jumbotron .banner_detail{
    font-size: 14px;
    color: #FFFFFF;
    line-height: 28px;
    }
    /第三部分标题位置,大小,颜色/
    .innersty h3{
    margin-top: 0px;
    font-size: 30px;
    color: #333;
    }
    /第三部分内容大小,颜色/
    .innersty p{
    font-size: 14px;
    color: #333;
    }
    /第三部分图片样式,最大图片宽度,适应浏览器缩放,位置调整/
    .active_list .thumbnail{
    max-width: 260px;
    margin: 0 auto 20px;
    }
    /图片下的文字居中/
    .active_list .thumbnail h4{
    text-align: center;
    }
    /第四部分每张图片边框,最大宽度,位置/
    .goods_con{
    border: 1px solid #ddd;
    max-width: 260px;
    margin: 0 auto 20px;
    }
    /图片占方框的百分比/
    .goods_con img{
    width: 100%;
    }
    /栅格占比/
    .goods_list .col-lg-2{
    width: 20%;
    }
    /浏览器缩栅格占比,流动对齐/
    @media (max-width:1200px){
    .goods_list .col-lg-2{
    width: 20%;
    float: left;
    }

    }
    @media (max-width:992px){
    .goods_list .col-lg-2{
    width: 33.33%;
    float: left;
    }

    }
    @media (max-width:768px){
    .goods_list .col-lg-2{
    width: 100%;
    float: left;
    }

    }

    bootstrap布局实例
    bootstrap布局实例

    转载于:https://blog.51cto.com/13742773/2343148

    展开全文
  • bootstrap页面布局

    千次阅读 2018-01-22 21:52:00
    首先,我们必须明确,在这四种角色... 页面布局,去到bootstrap中文网,寻找适合自己的布局实例,然后右击保存页面下载代码,copy代码到自己的项目,然后删删改改,当然完全可以自己用boottrap进行页面布局也是可...

      首先,我们必须明确,在这四种角色登录网站,看到页面是不同,这里不仅涉及到后端的权限控制,还涉及到前端页面的布局,区分好这些角色看的东西哪些是相同的,哪些又是不同的呢,这个必须在这里想明白,所以要做好页面布局

      页面布局,去到bootstrap中文网,寻找适合自己的布局实例,然后右击保存页面下载代码,copy代码到自己的项目,然后删删改改,当然完全可以自己用boottrap进行页面布局也是可以的,主要看你是否要求对前端精深,时刻明确自己的目的,学会借力打力,这样做才有效率,否则事事亲力亲为,尤其是在技术更新迭代如此快的时代,难免会让自己陷入一种不进则退的尴尬境地,把自己定位为一个代码整合者或者是技术整合者,也是一个不失水准的定位,所以我们在这个项目中,直接copy实例代码,封面如下:

     

      目录架构

      在目录架构上,主要是模板渲染和静态文件分类,至于静态文件分类呢,之前图片和css和js什么的,就不用多说了,主要是plugins,放啥呢,放一些前端插件,另外一个就是模板渲染了,为了更好的管理前端代码,肯定是要用到母版继承的,其中base.html主要放一些连接css文件和js文件的静态数据,而其body部分由子版index.html继承,而继承index.html也只定义为页面公用功能部分(菜单)

     

    <!DOCTYPE html>
    <html lang="zh-CN"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <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标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <meta name="description" content="">
        <meta name="author" content="">
        <!--<link rel="icon" href="https://v3.bootcss.com/favicon.ico">-->
    
        <title>Perfect CRM</title>
    
        <!-- Bootstrap core CSS -->
        <link href="/static/css/bootstrap.css" rel="stylesheet">
    
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <link href="/static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    
        <!-- Custom styles for this template -->
        <link href="/static/css/dashboard.css" rel="stylesheet">
    
        <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
        <!--[if lt IE 9]><script src="/static/js/ie8-responsive-file-warning.js"></script><![endif]-->
        <script src="/static/js/ie-emulation-modes-warning.js"></script>
    
    
      </head>
    
    {% block body %}
    {% endblock %}
    
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="/static/js/jquery.js"></script>
        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
        <script src="/static/js/bootstrap.js"></script>
        <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
        <script src="/static/js/holder.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="/static/js/ie10-viewport-bug-workaround.js"></script>
    
    </html>
    base.html
    {% extends 'base.html '%}
    
    {% block body %}
      <body>
    
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Help</a></li>
              </ul>
              <form class="navbar-form navbar-right">
                <input class="form-control" placeholder="Search..." type="text">
              </form>
            </div>
          </div>
        </nav>
    
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
              <ul class="nav nav-sidebar">
                <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Analytics</a></li>
                <li><a href="#">Export</a></li>
              </ul>
              <ul class="nav nav-sidebar">
                <li><a href="">Nav item</a></li>
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
                <li><a href="">More navigation</a></li>
              </ul>
              <ul class="nav nav-sidebar">
                <li><a href="">Nav item again</a></li>
                <li><a href="">One more nav</a></li>
                <li><a href="">Another nav item</a></li>
              </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
              <h1 class="page-header">Dashboard</h1>
    
              <div class="row placeholders">
                <div class="col-xs-6 col-sm-3 placeholder">
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" class="img-responsive" alt="Generic placeholder thumbnail" width="200" height="200">
                  <h4>Label</h4>
                  <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" class="img-responsive" alt="Generic placeholder thumbnail" width="200" height="200">
                  <h4>Label</h4>
                  <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" class="img-responsive" alt="Generic placeholder thumbnail" width="200" height="200">
                  <h4>Label</h4>
                  <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" class="img-responsive" alt="Generic placeholder thumbnail" width="200" height="200">
                  <h4>Label</h4>
                  <span class="text-muted">Something else</span>
                </div>
              </div>
    
              <h2 class="sub-header">Section title</h2>
              <div class="table-responsive">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Header</th>
                      <th>Header</th>
                      <th>Header</th>
                      <th>Header</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1,001</td>
                      <td>Lorem</td>
                      <td>ipsum</td>
                      <td>dolor</td>
                      <td>sit</td>
                    </tr>
                    <tr>
                      <td>1,002</td>
                      <td>amet</td>
                      <td>consectetur</td>
                      <td>adipiscing</td>
                      <td>elit</td>
                    </tr>
                    <tr>
                      <td>1,003</td>
                      <td>Integer</td>
                      <td>nec</td>
                      <td>odio</td>
                      <td>Praesent</td>
                    </tr>
                    <tr>
                      <td>1,003</td>
                      <td>libero</td>
                      <td>Sed</td>
                      <td>cursus</td>
                      <td>ante</td>
                    </tr>
                    <tr>
                      <td>1,004</td>
                      <td>dapibus</td>
                      <td>diam</td>
                      <td>Sed</td>
                      <td>nisi</td>
                    </tr>
                    <tr>
                      <td>1,005</td>
                      <td>Nulla</td>
                      <td>quis</td>
                      <td>sem</td>
                      <td>at</td>
                    </tr>
                    <tr>
                      <td>1,006</td>
                      <td>nibh</td>
                      <td>elementum</td>
                      <td>imperdiet</td>
                      <td>Duis</td>
                    </tr>
                    <tr>
                      <td>1,007</td>
                      <td>sagittis</td>
                      <td>ipsum</td>
                      <td>Praesent</td>
                      <td>mauris</td>
                    </tr>
                    <tr>
                      <td>1,008</td>
                      <td>Fusce</td>
                      <td>nec</td>
                      <td>tellus</td>
                      <td>sed</td>
                    </tr>
                    <tr>
                      <td>1,009</td>
                      <td>augue</td>
                      <td>semper</td>
                      <td>porta</td>
                      <td>Mauris</td>
                    </tr>
                    <tr>
                      <td>1,010</td>
                      <td>massa</td>
                      <td>Vestibulum</td>
                      <td>lacinia</td>
                      <td>arcu</td>
                    </tr>
                    <tr>
                      <td>1,011</td>
                      <td>eget</td>
                      <td>nulla</td>
                      <td>Class</td>
                      <td>aptent</td>
                    </tr>
                    <tr>
                      <td>1,012</td>
                      <td>taciti</td>
                      <td>sociosqu</td>
                      <td>ad</td>
                      <td>litora</td>
                    </tr>
                    <tr>
                      <td>1,013</td>
                      <td>torquent</td>
                      <td>per</td>
                      <td>conubia</td>
                      <td>nostra</td>
                    </tr>
                    <tr>
                      <td>1,014</td>
                      <td>per</td>
                      <td>inceptos</td>
                      <td>himenaeos</td>
                      <td>Curabitur</td>
                    </tr>
                    <tr>
                      <td>1,015</td>
                      <td>sodales</td>
                      <td>ligula</td>
                      <td>in</td>
                      <td>libero</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
    
    </body>
    {% endblock %}
    index.html
    from django.conf.urls import url,include
    from django.contrib import admin
    
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^crm/', include('app01.urls')),
        # url(r'^test/', views.test),
    ]
    PerfectCRM urls.py

     

     

      动态菜单

       要想实现不同角色用户看到菜单项是不一样的,那这里就要实现动态菜单了,那你怎么让它动起来呢,要想知道这个问题的答案,你就必须想清楚这个问题:依据什么动?角色?这个没错,但是你要想登录网站的是角色吗?不是吧,是用户,对,就是用户,用户再绑定某些角色,所以这里我们要依据用户来动,那怎么动呢?首先,我们要获取用户相关信息,然后返回前端,这里就涉及到模板渲染还是js加载,首次页面加载,并且还是页面公共部分,当然首选模板渲染了,另外每个角色加载哪些菜单项,也需要在某个地方进行定义,就在内存了,还是在数据库了?考虑易扩展性以及角色和菜单项之间是多对多的关系,在这里我们就数据库存储菜单关系,所以我们还要增加一张菜单表

    class Role(models.Model):
        '''角色表'''
        name = models.CharField(max_length=32, unique=True)
        menus = models.ManyToManyField('Menu',blank=True)
        def __unicode__(self):
            return self.name
    
        class Meta:
            verbose_name_plural = "角色表"
    
    
    class Menu(models.Model):
        '''菜单'''
        name = models.CharField(max_length=32)
        url_name = models.CharField(max_length=64)  #request url 有别名存别名  没有就存url
    
        def __unicode__(self):
            return self.name
    
        class Meta:
            verbose_name_plural = '菜单表'
    

       动态路由设计好,那接下来就是把它显示到前端了,你会怎么做了?当然是通过后端ORM查询到用户可以有的菜单项,传到前端,然后通过模板语言for循环渲染就可以了。嗯!这样做没错,你忽略一些小细节,这里还可以更简洁一点--直接在前端查询数据并for循环!你可能有些懵逼了,我们来看是怎么回事?还记得定义用户表时,我们的user字段是直接一对一关联到django自带认证系统的一张表吗?

    class UserProfile(models.Model):
        '''账号表'''
        user = models.OneToOneField(User)
        name = models.CharField(max_length=32)
        roles = models.ManyToManyField('Role', blank=True, null=True)
    
        def __unicode__(self):
            return self.name
    
        class Meta:
            verbose_name_plural = "账号表"
    

      django是把request直接嵌在了模板里,而request.user指的就是django自带的这张表,就直接在前端调用{{ request.user }},则显示用户名;既然能在前端调用django自带表,那我们就可以用这张表查询所有的有关用户的信息了,由它查userprofile表是反向查询,一对一反向查询是  表.反向表名(小写).字段,也就是request.user.userprofile.roles,你看就是这么简单

               {% for role in request.user.userprofile.roles.all %}
                  {% for menu in role.menus.all %}
                  <li class="active"><a href="{% url menu.url_name %}">{{ menu.name }}<span class="sr-only">(current)</span></a></li>
                  {% endfor %}
                {% endfor %}
    
    {% extends 'base.html '%}
    
    {% block body %}
      <body>
    
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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="#">Perfect CRM</a>
            </div>
    
            <!--显示登录用户栏-->
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-right">
                <!--留一个显示用户名-->
                <li><a href="#">{{ request.user }}</a></li>
              </ul>
            </div>
          </div>
        </nav>
    
        <div class="container-fluid">
          <div class="row">
    
            <!--左侧栏-->
            <div class="col-sm-3 col-md-2 sidebar">
              <ul class="nav nav-sidebar">
                {% for role in request.user.userprofile.roles.all %}
                  {% for menu in role.menus.all %}
                  <li class="active"><a href="{% url menu.url_name %}">{{ menu.name }}<span class="sr-only">(current)</span></a></li>
                  {% endfor %}
                {% endfor %}
              </ul>
            </div>
    
            <!--接下来是内容区-->
    
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
              <!--内容圆饼图区-->
    
              {% block page-content %}
              <h1 class="page-header">Dashboard</h1>
    
              <div class="row placeholders">
                <div class="col-xs-6 col-sm-3 placeholder">
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" class="img-responsive" alt="Generic placeholder thumbnail" width="200" height="200">
                  <h4>Label</h4>
                  <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" class="img-responsive" alt="Generic placeholder thumbnail" width="200" height="200">
                  <h4>Label</h4>
                  <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" class="img-responsive" alt="Generic placeholder thumbnail" width="200" height="200">
                  <h4>Label</h4>
                  <span class="text-muted">Something else</span>
                </div>
                <div class="col-xs-6 col-sm-3 placeholder">
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" class="img-responsive" alt="Generic placeholder thumbnail" width="200" height="200">
                  <h4>Label</h4>
                  <span class="text-muted">Something else</span>
                </div>
              </div>
    
              <!--内容详细数据-->
              <h2 class="sub-header">Section title</h2>
              <div class="table-responsive">
                <table class="table table-striped">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Header</th>
                      <th>Header</th>
                      <th>Header</th>
                      <th>Header</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1,001</td>
                      <td>Lorem</td>
                      <td>ipsum</td>
                      <td>dolor</td>
                      <td>sit</td>
                    </tr>
                    <tr>
                      <td>1,002</td>
                      <td>amet</td>
                      <td>consectetur</td>
                      <td>adipiscing</td>
                      <td>elit</td>
                    </tr>
                    <tr>
                      <td>1,003</td>
                      <td>Integer</td>
                      <td>nec</td>
                      <td>odio</td>
                      <td>Praesent</td>
                    </tr>
                    <tr>
                      <td>1,003</td>
                      <td>libero</td>
                      <td>Sed</td>
                      <td>cursus</td>
                      <td>ante</td>
                    </tr>
                    <tr>
                      <td>1,004</td>
                      <td>dapibus</td>
                      <td>diam</td>
                      <td>Sed</td>
                      <td>nisi</td>
                    </tr>
                    <tr>
                      <td>1,005</td>
                      <td>Nulla</td>
                      <td>quis</td>
                      <td>sem</td>
                      <td>at</td>
                    </tr>
                    <tr>
                      <td>1,006</td>
                      <td>nibh</td>
                      <td>elementum</td>
                      <td>imperdiet</td>
                      <td>Duis</td>
                    </tr>
                    <tr>
                      <td>1,007</td>
                      <td>sagittis</td>
                      <td>ipsum</td>
                      <td>Praesent</td>
                      <td>mauris</td>
                    </tr>
                    <tr>
                      <td>1,008</td>
                      <td>Fusce</td>
                      <td>nec</td>
                      <td>tellus</td>
                      <td>sed</td>
                    </tr>
                    <tr>
                      <td>1,009</td>
                      <td>augue</td>
                      <td>semper</td>
                      <td>porta</td>
                      <td>Mauris</td>
                    </tr>
                    <tr>
                      <td>1,010</td>
                      <td>massa</td>
                      <td>Vestibulum</td>
                      <td>lacinia</td>
                      <td>arcu</td>
                    </tr>
                    <tr>
                      <td>1,011</td>
                      <td>eget</td>
                      <td>nulla</td>
                      <td>Class</td>
                      <td>aptent</td>
                    </tr>
                    <tr>
                      <td>1,012</td>
                      <td>taciti</td>
                      <td>sociosqu</td>
                      <td>ad</td>
                      <td>litora</td>
                    </tr>
                    <tr>
                      <td>1,013</td>
                      <td>torquent</td>
                      <td>per</td>
                      <td>conubia</td>
                      <td>nostra</td>
                    </tr>
                    <tr>
                      <td>1,014</td>
                      <td>per</td>
                      <td>inceptos</td>
                      <td>himenaeos</td>
                      <td>Curabitur</td>
                    </tr>
                    <tr>
                      <td>1,015</td>
                      <td>sodales</td>
                      <td>ligula</td>
                      <td>in</td>
                      <td>libero</td>
                    </tr>
                  </tbody>
                </table>
              </div>
    
              {% endblock %}
            </div>
    
          </div>
        </div>
    
    </body>
    {% endblock %}
    index.html

     

     

      涉及知识点

    • 模板继承,母版写入block块,在子版里继承的block块定义自己的代码,子模板的头行用extends 加  继承的母版 {% extends "base.html" %}   {% block body %}代码{% endblock %}
    • 静态文件路径配置  STATICFILES_DIRS = (os.path.join(BASE_DIR,‘statics’),)
    • APP路由分发  为更好的管理各个app路径分发情况,更好的做法就每个app都有自己的路径分发器,所以就要使用到django中include路由分发了,把项目下urls.py复制一份到APP下,然后在项目的urls.py下用include引流到APP下,url(r'^crm/', include('app01.urls')),
    • url别名,在路由分发器中,有个name参数是进行别名的,可用于前端调用,如果url地址有变,通过别名照样能访问对应的视图,当然别名对于正则匹配的动态url,需要给视图传参的,就不起作用了,在前端调用别名时,使用{% url 别名 %},这样在渲染的时候,就会自动转化成对应的url
    • 一对一查询,正向查 表.字段名  反向查  表.对表的表名(小写).字段名

     

    转载于:https://www.cnblogs.com/xinsiwei18/p/8313433.html

    展开全文
  • Bootstrap3栅格系统布局实例

    千次阅读 2019-05-02 09:34:12
    布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。 先看一个简单实例,来加深对移动设备优先的理解。假设...

    布局实例

    Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。

    先看一个简单实例,来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统:

     
    1. <div class="row">
    2.   <div class="col-md-4">.col-md-4</div>
    3.   <div class="col-md-4">.col-md-4</div>
    4.   <div class="col-md-4">.col-md-4</div>
    5. </div>

    上述代码中,我们仅仅为元素应用了一组 .col-md-* 栅格类,而没有应用任何 .col-xs-*.col-sm-*.col-lg-* 类。

    根据小设备优先的规则,就很容易知道它在小屏幕和超小屏幕上将使用默认的堆叠布局,在大屏幕上将继续使用 .col-md-* 类的布局,即水平排列的三列等宽布局。

    这也很容易验证,通过鼠标调整浏览器窗口的尺寸,一开始让窗口很窄(小于992px)。得到的运行结果如图 2‑1所示:

    小屏幕和超小屏幕堆叠排列

    图2-1 小屏幕和超小屏幕堆叠排列

    随着窗口慢慢增大,当达到 992px 时,它就会就变为水平排列。运行结果如图 2‑2所示:

    中等屏幕和大屏幕水平排列

    图2-2 中等屏幕和大屏幕水平排列

    如果你不希望在小屏幕设备上所有列都堆叠在一起,那就得添加针对超小屏幕的类.col-xs-*。如:

     
    1. <div class="row ">
    2.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    3.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    4.   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    5. </div>

    上述元素应用了 .col-xs-* .col-md-* 栅格类,因此在小屏幕和超小屏幕上将使用.col-xs-*类定义的 6-6-6 布局(由于列数之和大于 12,最后一个 6 列将另起一行排列),在中等屏幕和大屏幕上将使用 .col-md-* 类定义的 4-4-4 布局。

    在小屏幕和超小屏幕上的运行结果如图 2‑3所示:

    小屏幕和超小屏幕布局

    图2-3 小屏幕和超小屏幕布局

    在中等屏幕和大屏幕的运行结果如图 2‑4所示:

    中等屏幕和大屏幕布局

    图2-4 中等屏幕和大屏幕布局

    如果你希望每种不同的屏幕都拥有不同的布局,你就可以同时使用 .col-xs-*.col-sm-*.col-md-*.col-lg-* 类。如:

     
    1. <div class="row ">
    2.   <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">…</div>
    3.   <div class="col-xs-6 col-sm-8 col-md-9 col-lg-10">…</div>
    4. </div>

    上述布局为 4 种类型的屏幕都分别定义了各自的栅格类,因此每种屏幕都将拥有自己的布局。最终的布局结果是,在超小屏幕上将使用.col-xs-* 类定义的 6-6 布局,在小屏幕上使用.col-sm-* 类定义的 4-8 布局,在中等屏幕上使用 .col-md-* 类定义的 3-9 布局,在大屏幕上使用 .col-lg-* 类定义的 2-10 布局。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 如何用bootstrap进行页面布局

    万次阅读 2019-01-18 09:54:25
    如何用bootstrap进行页面布局 开发工具与关键技术:DW2017 bootstrap框架的使用 作者:胡宁淇 撰写时间:2019年1月17日 Bootstrap是一个框架,里面封装一些页面布局常用到的代码 在这个橙色的框内有各种封装好的...

    如何用bootstrap进行页面布局

    开发工具与关键技术:DW2017 bootstrap框架的使用
    作者:胡宁淇
    撰写时间:2019年1月17日
    

    Bootstrap是一个框架,里面封装一些页面布局常用到的代码

    在这里插入图片描述
    在这里插入图片描述

    在这个橙色的框内有各种封装好的一些样式,比如a标签,input标签,下拉框,接下来我们就来我们就用这个框架来构建一个简单的页面,在使用bootstrap之前我们先要把bootstrap引入我们的项目,我们引用的是bootstrap中的bootstrap.min.css
    在这里插入图片描述

    看到这张图片我们可以把它分成几个部分
    在这里插入图片描述

    我们用container容器来装下整个内容
    在这里插入图片描述

    接下来就是头部,头部我们是用了bootstrap里面的一个警示框样式,直接把代码复制过来
    在这里插入图片描述

    第一行里面又有两列,给div标签的类名·都是bootstrap封装好的样式,不过要使用这些类
    一定要先把bootstrap.min.css引用进来
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    这就是上图代码所实现的效果
    在这里插入图片描述

    下面内容的布局与以上布局基本一致,只需稍微改动里面的标签,在此就不再一一赘述

    为了使页面更加花里胡哨,便给container和其他标签设置了一些样式。
    在这里插入图片描述
    在使用bootstrap之后我们可以看到css的代码量并不多,我们不用再去书写大量的代码,只需要学会如何使用
    Bootstrap框架,这样就能节省大量的时间,让程序员集中精力去思考逻辑处理

    展开全文
  • Bootstrap 布局组件 1、Bootstrap字体图标 (1)、字体图标列表链接  http://www.mscto.com/bootstrap/bootstrap-glyphicons.html (2)、用法  如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本...
  • [](https://img.tnblog.net/arcimg/aojiancc/7f15a608d1e945feabe68a1013494848.jpg)外层div使用row,里边使用col就可以实现均分了,有n个就n等分,这样想要做均分的布局就非常方便了tn3#比如3个col就是三等分```.col....
  • Bootstrap 页面布局

    千次阅读 2015-11-26 09:37:39
    Bootstrap 网格系统(Grid System)的工作原理 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格...
  • 本文是在bootstrap布局(二)的基础上增加的功能。 管理员用户id是4,地址栏输入:localhost:8090/sysmenu/4 普通用户id是6,地址栏输入:localhost:8090/sysmenu/6 平台搭建如下: 二 数据库设计 1. t_...
  • Bootstrap 初学 实例

    2017-03-13 15:20:31
    hrml代码 Bootstrap 初学 .jumbotron{ text-align: center; background: #1FC952;... 我的第一个 Bootstrap 页面 重置窗口大小,查看响应式效果! 第一列 Bootstrap CSS
  • 主要介绍了Bootstrap实现前端登录页面带验证码功能,结合完整实例形式分析了Bootstrap前端登录页面带验证码界面布局与功能实现相关操作技巧,需要的朋友可以参考下
  • Bootstrap布局

    千次阅读 2018-03-04 21:34:29
    Bootstrap布局Bootstrap提供了两种类型的布局容器,一种是固定宽度的布局容器,一种是流式布局...固定布局在整个页面上居中显示。如:&lt;body&gt; &lt;div class="container"&gt; .....
  • Bootstrap是什么?Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架,那么,Bootstrap如何...Bootstrap表单布局Bootstrap提供了下列类型的表单布局:垂直表单(默认)、内联表单、水平表单、垂直或基本表单基...
  • jquery mobile 实例bootstrap 搭建响应式手机软件交谈聊天页面样式
  • 主要介绍了bootstrap实现的自适应页面简单应用,结合具体实例形式分析了基于bootstrap的列表布局结构页面实现与使用技巧,需要的朋友可以参考下
  • BootStrap 篇(二)BootStrap 布局组件

    千次阅读 2018-02-26 15:31:44
    更多 BootStrap 详情请移步菜鸟教程 1.Bootstrap 字体图标(Glyphicons) 字体图标 2.Bootstrap 下拉菜单 如需使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单: ...
  • Bootstrap 网页实例

    千次阅读 2017-09-19 13:35:00
    <link rel="stylesheet" href="css/bootstrap.min.css" /> body { padding-top: 50px; padding-bottom: 40px; color: #5a5a5a; } /* 下面是左侧导航栏的代码 */ .sidebar { position: fixed; top: 51px...
  • 尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程。 因此,本人用...
  • 本文给大家介绍使用BootStrap实现用户登录界面UI,布局风格采用左右各一半的风格设计,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
  • Bootstrap栅格系统通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。栅格系统的工作原理如下: “行(row)”必须包含在 .container (固定宽度)或 .container...
  • Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。 <div class="container" style="background: palegoldenrod"> 今天星期五 </div> <div class=...
  • Bootstrap栅格布局

    2020-03-31 10:48:57
    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局, 你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理: “行(row)”必须包含在 .container (固定...
  • 栅格系统(布局)Bootstrap内置了...它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:行(row)必须包含在...
  • Bootstrap案列:首页界面

    2021-02-07 21:06:00
    在自学Bootstrap之后我开始完成一个旅游网项目的首页界面,本博文主要演示实现的具体过程。 首先导入BootStra的环境 <!--引入本地的bootstrap——css--> <link href="../js/bootstrap-3.3.7-dist/css/...
  • 参考菜鸟教程"Bootstrap页面标题"实例,构建页面标题。 第二步 导航栏 参考菜鸟教程“BootStrap导航栏”实例,在页面标题后添加导航栏。 第三步 主体内容部分的布局 参考菜鸟教程“网格系统-嵌套列”实例布局方式...
  • Bootstrap 布局组件Bootstrap 字体图标(Glyphicons)什么是字体图标?字体图标是在 Web 项目中使用的图标字体。获取字体图标Bootstrap 3.x 版本,在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: ...
  • Bootstrap 辅助类: 文本: .text-muted "text-muted" 类的文本样式   .text-primary "text-primary" 类的文本样式   .text-success "text-success" 类的...
  • 初见bootstrap,iframe框架简单布局

    万次阅读 2017-08-17 19:13:29
    初见bootstrap,比hui框架好用很多,现在还在探索阶段。 iframe框架布局,还有很多地方需要改进。 很多内容还来不及写,后期慢慢补上。 浏览器运行效果大概如下: index页面代码如下: <!DOCTYPE ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,623
精华内容 2,649
关键字:

bootstrap页面布局实例