精华内容
下载资源
问答
  • 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

    展开全文
  • 今天主要说下页面布局,这是最基础的东西了,当我们设计一个站点时,应该为它设计一个全局性的统一的规范页面,这种页面我们叫它布局页,而在页面上体现出来的东西,就是布局的元素,在bootstrap里当然也是不可...
  • 本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考,具体如下: 先来看看效果图: 具体代码如下(某管理系统的Bootstrap实现): <!DOCTYPE ...
  • bootstrap简单的页面布局

    千次阅读 2018-09-25 19:55:56
    1.布局结构(头部固定,内容分为左右结构) 2.结果展示 3.HTML代码 &lt;div class="logo"&gt; logo &lt;/div&gt; &lt;div class="container-fluid"&gt; &lt;...

    1.布局结构(头部固定,内容分为左右结构)

    2.结果展示

    3.HTML代码

    <div class="logo">
        logo
    </div>
    <div class="container-fluid">    
        <div class="row main">
            <div class="col-md-3 nav">nav</div>
            <div class="col-md-9 content">
                <div class="content-body">content</div>
            </div>
        </div>
    </div>

    4.CSS样式

    • 代码分为格式化代码(用于清除不同浏览器兼容性问题)
    • 布局代码(用于界面布局的代码)
    <style>
    
            /*淘宝CSS格式化代码*/
            body,
            h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
                margin: 0;
                padding: 0;
            }
    
            body, button, input, select, textarea {
                font: 12px/1.5 tahoma, arial, \5b8b\4f53;
            }
    
            h1, h2, h3, h4, h5, h6 {
                font-size: 100%;
            }
    
            address, cite, dfn, em, var {
                font-style: normal;
            }
    
            code, kbd, pre, samp {
                font-family: couriernew, courier, monospace;
            }
    
            small {
                font-size: 12px;
            }
    
            ul, ol {
                list-style: none;
            }
    
            a {
                text-decoration: none;
            }
    
            a:hover {
                text-decoration: underline;
            }
    
            sup {
                vertical-align: text-top;
            }
    
            sub {
                vertical-align: text-bottom;
            }
    
            legend {
                color: #000;
            }
    
            fieldset, img {
                border: 0;
            }
    
            button, input, select, textarea {
                font-size: 100%;
            }
    
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
    
            /*布局CSS代码*/
    
            body, html {
                background: #EAEEF2;
                width: 100%;
                height: 100%;
                color: lightblue;
            }
    
            .container-fluid {
                background: aquamarine;
                height: 100%;
            }
    
            .logo {
                background: black;
                font-size: 40px;
                padding-left: 20px;
                height: 60px;
                min-height: 60px;
                width: 100%;
                position: fixed;
                top: 0;
                right: 0;
                z-index: 100;
            }
    
            .nav {
                background: white;
                font-size: 30px;
                height: 100%;
                width: 15%;
                float: left;
                position: relative;
                margin-right: -100%;
                box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1);
            }
    
            .content {
                height: 100%;
                width: 85%;
                margin-left: 15%;
            }
    
            .content-body {
                padding-left: 15px;
                padding-right: 15px;
                background: white;
                height: 100%;
                font-size: 300px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
                overflow: auto;
            }
    
            .main {
                background: #F8F8F8;
                height: 100%;
                padding-top: 68px;
                padding-bottom: 6px;
            }
    
        </style>

     

    展开全文
  • Bootstrap 页面布局

    千次阅读 2015-11-26 09:37:39
    Bootstrap 网格系统(Grid System)的工作原理 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格...

    Bootstrap 网格系统(Grid System)的工作原理

    • 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
    • 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
    • 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
    • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4

    .container 类用于固定宽度并支持响应式布局的容器。

    复制
    <div class="container">
      ...
    </div>

    .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

    复制
    <div class="container-fluid">
      ...
    </div>

    展开全文
  • Bootstrap弹性页面布局

    千次阅读 2019-05-17 14:37:49
    Bootstrap弹性页面布局 所谓的弹性布局就是适应多款浏览器 不同的宽度布局的显示相对来说占的百分比是一样的 甚至宽度不足时还会自动换行剩余元素等分空间 使得页面布局在不同的浏览器中显示不混乱 在这里我要讲的是...

    Bootstrap弹性页面布局

    所谓的弹性布局就是适应多款浏览器
    不同的宽度布局的显示相对来说占的百分比是一样的
    甚至宽度不足时还会自动换行剩余元素等分空间
    使得页面布局在不同的浏览器中显示不混乱
    在这里我要讲的是利用bootstrap插件进行弹性布局
    Bootstrap布局是给元素添加封装好样式的类名
    弹性布局第一步布局是给最外层的元素添加类名container-fluid
    container-fluid自带的样式如下图
    在这里插入图片描述
    它是一个宽度是100%也就是整个页面的一个盒子
    并且自带左右内边距各15px
    接着第二层的元素添加类名row和justify-content-around
    row和justify-content-around自带样式如下图
    在这里插入图片描述
    row自带的样式display:flex既是弹性布局的标志又是弹性布局的开始
    没有display:flex这样式其他的所有弹性样式设置了都没效果
    有了display:flex后row自带的样式flex-wrap:wrap就有效果了
    flex-wrap:wrap是自动换行的意思
    flex-wrap是个组合属性flex-wrap后第一个输入代表是元素的排序方向第二个是是否换行
    第一个不输入就默认按主轴方向排序元素
    row这个类自带样式就是默认按主轴方向排序并且多余换行
    justify-content-around自带样式justify-content:space-around!important
    意思是子元素左右等分剩余空间,等分空间的布局让人看起来比较舒适美观
    justify-content:space-around要与display:flex同时设置,上面也说到了display:flex是弹性布局的标志没有display:flex样式justify-content:space-around样式就没有效果
    同时justify-content:space-around样式是设置在父级元素上控制第一层子元素的
    所以justify-content:space-around要与display:flex同时设置
    也就是类名row和类名justify-content-around要添加在同一个元素上
    下面就给你看一下那代码图
    在这里插入图片描述
    container-fluid和row两个类连着使用的代表意义是
    在一个盒子里按每行的方式进行布局
    container-fluid代表的是一个盒子
    row代表的是盒子里的行
    要想在一行中放多少个元素
    就在带有row的元素里进行多少个元素的布局
    要想加多一行布局就在container-fluid里加多一个row
    这样的弹性布局不仅可以适应不同浏览器还可以适应手机端
    如下手机端布局图
    在这里插入图片描述

    展开全文
  • 世界上并没有完美的程序,但是我们并不因此而沮丧,因为写程序就是一个不断追求完美的过程。 ...为了使背景图片铺满整个body而不出现多个重复,则将body的background-size的宽高都设置为100% 为了不因为内部div的...
  • Bootstrap】实现 Bootstrap 基本布局

    万次阅读 2018-12-08 11:18:26
    创建基本的页面 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp
  • 本文主要给出了一个用Bootstrap实现表格分页的方案,也实现了基本的页面布局例子。 软件开发中分页是常用的,写一个分页控件虽然不难但是也比较麻烦。分页的基本原理是将数据库表中的数据以分页的形式显示在页面...
  • 如何用bootstrap进行页面布局

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

    千次阅读 2018-12-18 11:50:53
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> welcome DOOLAR <span class="caret"></span> ...
  • bootstrap各种布局模板(html文件)。下载后解压,打开文件夹找到index.html文件查看。然后根据自己想要的在文件夹中找到对应的文件用编辑器打开查看即可。
  • Bootstrap页面缩小布局改变的问题

    千次阅读 2020-02-10 19:59:13
    Bootstrap作为一个广泛使用的前端框架,其核心响应式布局更是受到很多人喜爱,但在使用的同时,很多人被其页面缩小时会改变布局所困扰,下面我就向大家说说应该怎样解决这个问题(亲测完美解决)。 少扯淡,多干货!...
  • bootstrap布局是应用得很广泛的一种网页布局方法,下面通过本文给大家介绍bootstrap页面缩小变形的快速解决办法,需要的朋友参考下吧
  • 1.bootstrap里面可以进行页面的排版和很多样式的设置,非常好用 http://www.runoob.com/try/bootstrap/layoutit/ 2.页面中时间设置,通过日历来传递日期参数,通过laydate.js来实现,很好用 ...
  • bootstrap界面布局

    2017-02-10 16:13:43
    bootstrap界面布局
  • 嵌套布局:  在一行中,有三列,每一列都有对应的BS栅格系统中的格子,以下例中因为 .row中的div对应的class分别是span4,span4,span4,所以其每一列对应的格子数是  4,4,4  现在有一个需求,要在第三列中另外再...
  • 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...
  • 这是一款jQuery+Bootstrap布局购物车结算页面代码,支持商品数量加减、全选、自动计算金额等。
  • Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单。接下来通过本文给大家介绍Bootstrap表单布局实例代码详解,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
  • 一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
  • BootStrap 篇(二)BootStrap 布局组件

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

    千次阅读 2018-03-04 21:35:03
    流式布局同理,将Bootstrap的流式栅格放到 class="container-fluid" 的流式容器中,即可创建流式布局。流式布局将填满整个视口宽度。如:&lt;div class="container-fluid"&gt; &lt...
  • Bootstrap 布局组件 1、Bootstrap字体图标 (1)、字体图标列表链接  http://www.mscto.com/bootstrap/bootstrap-glyphicons.html (2)、用法  如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本...
  • Bootstrap页面模板 带有滚动效果,鼠标向下拉动时,导航栏会自动出现在顶端
  • bootstrap布局可视化可拖拽
  • bootstrap多列表单布局

    2018-12-28 11:46:24
    这是一个bootstrap多列表单布局的demo,仅供大家参考参考
  • bootstrap简易式操作布局页面实现

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,497
精华内容 9,798
关键字:

bootstrap页面布局