2014-10-19 59 views
0

我试图从我的base.html继承此bootstrap(https://github.com/almasaeed2010/AdminLTE)。我用这种形式来做到这一点:在base.html中继承CSS的引导

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title> Dracoin | Dashboard </title> 

     <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> 
     <!-- bootstrap 3.0.2 --> 
     <link href="media/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
     <!-- font Awesome --> 
     <link href="media/bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
     <!-- Ionicons --> 
     <link href="media/bootstrap/css/ionicons.min.css" rel="stylesheet" type="text/css" /> 
     <!-- Morris chart --> 
     <link href="media/bootstrap/css/morris/morris.css" rel="stylesheet" type="text/css" /> 
     <!-- jvectormap --> 
     <link href="media/bootstrap/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" /> 
     <!-- Date Picker --> 
     <link href="media/bootstrap/css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" /> 
     <!-- Daterange picker --> 
     <link href="media/bootstrap/css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" /> 
     <!-- bootstrap wysihtml5 - text editor --> 
     <link href="media/bootstrap/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" /> 
     <!-- Theme style --> 
     <link href="media/bootstrap/css/AdminLTE.css" rel="stylesheet" type="text/css" /> 


     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body class="skin-blue"> 
     <!-- header logo: style can be found in header.less --> 
     <header class="header"> 
      <a href="{% url 'vista_principal' %}" class="logo"> 
       <!-- Add the class icon to your logo image or logo icon to add the margining --> 
       <img src="img/avatar3.png" class="img-circle"/> 
      </a> 
      <!-- Header Navbar: style can be found in header.less --> 
      {% if user.is_authenticated %} 
      <nav class="navbar navbar-static-top" role="navigation"> 
       <!-- Sidebar toggle button--> 
       <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
       <div class="navbar-right"> 
        <ul class="nav navbar-nav"> 
         <!-- Messages: style can be found in dropdown.less--> 
         <li class="dropdown messages-menu"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
           <i class="fa fa-envelope"></i> 
           <span class="label label-success">5</span> 
          </a> 
          <ul class="dropdown-menu"> 
           <li class="header">You have 5 messages</li> 
           <li> 
            <!-- inner menu: contains the actual data --> 
            <ul class="menu"> 
             <li><!-- start message --> 
              <a href="#"> 
               <div class="pull-left"> 
                <img src="img/avatar3.png" class="img-circle" alt="User Image"/> 
               </div> 
               <h4> 
                Support Team 
                <small><i class="fa fa-clock-o"></i> 5 mins</small> 
               </h4> 
               <p>Why not buy a new awesome theme?</p> 
              </a> 
             </li><!-- end message --> 
             <li> 
              <a href="#"> 
               <div class="pull-left"> 
                <img src="img/avatar2.png" class="img-circle" alt="user image"/> 
               </div> 
               <h4> 
                AdminLTE Design Team 
                <small><i class="fa fa-clock-o"></i> 2 hours</small> 
               </h4> 
               <p>Why not buy a new awesome theme?</p> 
              </a> 
             </li> 
             <li> 
              <a href="#"> 
               <div class="pull-left"> 
                <img src="img/avatar.png" class="img-circle" alt="user image"/> 
               </div> 
               <h4> 
                Developers 
                <small><i class="fa fa-clock-o"></i> Today</small> 
               </h4> 
               <p>Why not buy a new awesome theme?</p> 
              </a> 
             </li> 
             <li> 
              <a href="#"> 
               <div class="pull-left"> 
                <img src="img/avatar2.png" class="img-circle" alt="user image"/> 
               </div> 
               <h4> 
                Sales Department 
                <small><i class="fa fa-clock-o"></i> Yesterday</small> 
               </h4> 
               <p>Why not buy a new awesome theme?</p> 
              </a> 
             </li> 
             <li> 
              <a href="#"> 
               <div class="pull-left"> 
                <img src="img/avatar.png" class="img-circle" alt="user image"/> 
               </div> 
               <h4> 
                Reviewers 
                <small><i class="fa fa-clock-o"></i> 2 days</small> 
               </h4> 
               <p>Why not buy a new awesome theme?</p> 
              </a> 
             </li> 
            </ul> 
           </li> 
           <li class="footer"><a href="#">See All Messages</a></li> 
          </ul> 
         </li> 
         <!-- Notifications: style can be found in dropdown.less --> 
         <li class="dropdown notifications-menu"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
           <i class="fa fa-warning"></i> 
           <span class="label label-warning">10</span> 
          </a> 
          <ul class="dropdown-menu"> 
           <li class="header">You have 10 notifications</li> 
           <li> 
            <!-- inner menu: contains the actual data --> 
            <ul class="menu"> 
             <li> 
              <a href="#"> 
               <i class="ion ion-ios7-people info"></i> 5 new members joined today 
              </a> 
             </li> 
             <li> 
              <a href="#"> 
               <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems 
              </a> 
             </li> 
             <li> 
              <a href="#"> 
               <i class="fa fa-users warning"></i> 5 new members joined 
              </a> 
             </li> 

             <li> 
              <a href="#"> 
               <i class="ion ion-ios7-cart success"></i> 25 sales made 
              </a> 
             </li> 
             <li> 
              <a href="#"> 
               <i class="ion ion-ios7-person danger"></i> You changed your username 
              </a> 
             </li> 
            </ul> 
           </li> 
           <li class="footer"><a href="#">View all</a></li> 
          </ul> 
         </li> 
         <!-- Tasks: style can be found in dropdown.less --> 
         <li class="dropdown tasks-menu"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
           <i class="fa fa-tasks"></i> 
           <span class="label label-danger">9</span> 
          </a> 
          <ul class="dropdown-menu"> 
           <li class="header">You have 9 tasks</li> 
           <li> 
            <!-- inner menu: contains the actual data --> 
            <ul class="menu"> 
             <li><!-- Task item --> 
              <a href="#"> 
               <h3> 
                Design some buttons 
                <small class="pull-right">20%</small> 
               </h3> 
               <div class="progress xs"> 
                <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 
                 <span class="sr-only">20% Complete</span> 
                </div> 
               </div> 
              </a> 
             </li><!-- end task item --> 
             <li><!-- Task item --> 
              <a href="#"> 
               <h3> 
                Create a nice theme 
                <small class="pull-right">40%</small> 
               </h3> 
               <div class="progress xs"> 
                <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 
                 <span class="sr-only">40% Complete</span> 
                </div> 
               </div> 
              </a> 
             </li><!-- end task item --> 
             <li><!-- Task item --> 
              <a href="#"> 
               <h3> 
                Some task I need to do 
                <small class="pull-right">60%</small> 
               </h3> 
               <div class="progress xs"> 
                <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 
                 <span class="sr-only">60% Complete</span> 
                </div> 
               </div> 
              </a> 
             </li><!-- end task item --> 
             <li><!-- Task item --> 
              <a href="#"> 
               <h3> 
                Make beautiful transitions 
                <small class="pull-right">80%</small> 
               </h3> 
               <div class="progress xs"> 
                <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> 
                 <span class="sr-only">80% Complete</span> 
                </div> 
               </div> 
              </a> 
             </li><!-- end task item --> 
            </ul> 
           </li> 
           <li class="footer"> 
            <a href="#">View all tasks</a> 
           </li> 
          </ul> 
         </li> 
         <!-- User Account: style can be found in dropdown.less --> 
         <li class="dropdown user user-menu"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
           <i class="glyphicon glyphicon-user"></i> 
           <span>{{user.username}} <i class="caret"></i></span> 
          </a> 
          <ul class="dropdown-menu"> 
           <!-- User image --> 
           <li class="user-header bg-light-blue"> 
            {% if user.userprofile.photo %} 
            <img src="/media/{{user.userprofile.photo}}" width="100px" height="100px"/> 
            {% endif %} 
            <p> 
             {{user.username}} - Standard User 
             <small>{{user.userprofile.email}}</small> 
            </p> 
           </li> 
           <!-- Menu Body --> 
           <li class="user-body"> 
            <div class="col-xs-4 text-center"> 
             <a href="#">XXXX</a> 
            </div> 
            <div class="col-xs-4 text-center"> 
             <a href="#">Sales</a> 
            </div> 
            <div class="col-xs-4 text-center"> 
             <a href="#">XXXX</a> 
            </div> 
           </li> 
           <!-- Menu Footer--> 
           <li class="user-footer"> 
            <div class="pull-left"> 
             <a href="#" class="btn btn-default btn-flat">Profile</a> 
            </div> 
            <div class="pull-right"> 
             <a href="{% url 'vista_logout' %}" class="btn btn-default btn-flat">Sign out</a> 
            </div> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </nav> 
      {% endif %} 
     </header> 
     <div class="wrapper row-offcanvas row-offcanvas-left"> 
      <!-- Left side column. contains the logo and sidebar --> 
      <aside class="left-side sidebar-offcanvas"> 
       <!-- sidebar: style can be found in sidebar.less --> 
       <section class="sidebar"> 
        <!-- Sidebar user panel --> 
        {% if user.is_authenticated %} 
        <div class="user-panel"> 
         <div class="pull-left image"> 
          <img src="/media/{{user.userprofile.photo}}" class="img-circle" alt="User Image" /> 
         </div> 
         <div class="pull-left info"> 
          <p>Hello, {{user.username}}</p> 
          <a href="#"><i class="fa fa-circle text-success"></i> Online</a> 
         </div> 
        </div> 
        <!-- search form --> 
        <form action="#" method="get" class="sidebar-form"> 
         <div class="input-group"> 
          <input type="text" name="q" class="form-control" placeholder="Search..."/> 
          <span class="input-group-btn"> 
           <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button> 
          </span> 
         </div> 
        </form> 
        {% endif %} 
        <!-- /.search form --> 
        <!-- sidebar menu: : style can be found in sidebar.less --> 
        <ul class="sidebar-menu"> 
         <li class="active"> 
          <a href="{% url 'vista_principal' %}"> 
           <i class="fa fa-dashboard"></i> <span>Dashboard</span> 
          </a> 
         </li> 
         <li> 
          <a href="{% url 'vista_aterrizaje' %}"> 
           <i class="fa fa-th"></i> <span>Landing</span> <small class="badge pull-right bg-green">news</small> 
          </a> 
         </li> 
         {% if user.is_authenticated %}      
         <li> 
          <a href="/shop/page/1/"> 
           <i class="fa fa-shopping-cart"></i> <span>Shop</span> 
           <small class="badge pull-right bg-red">5</small> 
          </a> 
         </li> 
         {% endif %} 
         <li> 
          <a href="{% url 'vista_contacto' %}"> 
           <i class="fa fa-comment"></i> <span>Support</span>         
          </a> 
         </li> 
         {% if user.is_authenticated %} 
         <li> 
          <a href="{% url 'vista_logout' %}"> 
           <i class="fa fa-sign-in"></i> <span>Sign out</span>         
          </a> 
         </li> 
         {% else %} 
         <li> 
          <a href="{% url 'vista_login' %}"> 
           <i class="fa fa-sign-in"></i> <span>Sign in</span>         
          </a> 
         </li> 
         {% endif %} 
        </ul> 
       </section> 
       <!-- /.sidebar --> 
      </aside> 

      <!-- Right side column. Contains the navbar and content of the page --> 
      <aside class="right-side"> 
       <!-- Content Header (Page header) --> 
       <section class="content-header"> 
        <h1> 
         Dashboard 
         <small>Control panel</small> 
        </h1> 
        <ol class="breadcrumb"> 
         <li><a href="{% url 'vista_principal' %}"><i class="fa fa-dashboard"></i> Home</a></li> 
         <li class="active">Dashboard</li> 
        </ol> 
       </section> 

       <!-- Main content --> 
       {% block content %} 
       {% endblock %} 
       <!-- /.content --> 
      </aside><!-- /.right-side --> 
     </div><!-- ./wrapper --> 

     <!-- add new calendar event modal --> 


     <!-- jQuery 2.0.2 --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
     <!-- jQuery UI 1.10.3 --> 
     <script src="media/bootstrap/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script> 
     <!-- Bootstrap --> 
     <script src="media/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> 
     <!-- Morris.js charts --> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
     <script src="media/bootstrap/js/plugins/morris/morris.min.js" type="text/javascript"></script> 
     <!-- Sparkline --> 
     <script src="media/bootstrap/js/plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script> 
     <!-- jvectormap --> 
     <script src="media/bootstrap/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script> 
     <script src="media/bootstrap/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script> 
     <!-- jQuery Knob Chart --> 
     <script src="media/bootstrap/js/plugins/jqueryKnob/jquery.knob.js" type="text/javascript"></script> 
     <!-- daterangepicker --> 
     <script src="media/bootstrap/js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script> 
     <!-- datepicker --> 
     <script src="media/bootstrap/js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script> 
     <!-- Bootstrap WYSIHTML5 --> 
     <script src="media/bootstrap/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script> 
     <!-- iCheck --> 
     <script src="media/bootstrap/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script> 

     <!-- AdminLTE App --> 
     <script src="media/bootstrap/js/AdminLTE/app.js" type="text/javascript"></script> 

     <!-- AdminLTE dashboard demo (This is only for demo purposes) --> 
     <script src="media/bootstrap/js/AdminLTE/dashboard.js" type="text/javascript"></script> 

     <!-- AdminLTE for demo purposes --> 
     <script src="media/bootstrap/js/AdminLTE/demo.js" type="text/javascript"></script> 

    </body> 
</html> 

我的问题是只显示的index.html从基本所有的遗产,但我的其他网页(shop.html,contacto.html,landing.html上)与继承的内容只出现base.html,页面不带任何样式。

我试图发现其中的错误,但我无法想象...

使用其他风格从这个页面(http://getbootstrap.com/getting-started/)和传统完美的所有页面中运行,我想。为什么我的其他bootstrap不起作用?我希望我的引导程序可以在所有页面上运行。

提前道歉我广泛的问题,如果我忽略了一些东西。

谢谢!

回答

1

你应该使用绝对路径,为您的所有资产:

<link href="/media/bootstrap/css/bootstrap.min.css" ... 

(注意斜线)。

更妙的是,你应该使用静态标签来自动生成的位置,根据您的STATIC_URL设置:

{% load static %} 
... 
<link href="{% static "bootstrap/css/bootstrap.min.css" %}" ... 
+0

谢谢你的男人,你是最棒的:) – Jhonny 2014-10-19 19:30:06