2016-12-25 15 views
0

を動作しません。画像は、私は私は2つのバージョンを作ったブートストラップ</p> <p>でカルーセルを使用

1つはhtml静的ファイルです。

他はDjangoフレームワークであり、

しかし、私は次のような結果を行うためにはDjangoを使用することはできません。

以下はhtml静的ファイルです。

<! DOCTYPE html> 
<html > 
<head lang="zh-Hant-TW"> 
<title></title> 
<meta name="viewport" content="width=device-width ,initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

</head> 
    <body> 
     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
       <div class="panel panel-warning"> 
        <div class="panel-heading">Most Popular Products</div> 
        <div class="panel-body"> 
         <div id="bestSellers" class="carousel slide" data-ride="carousel"> 
          <ol class="carousel-indicators"> 
           <li data-target="#bestSellers" data-slide-to="0" class="active"></li> 
           <li data-target="#bestSellers" data-slide-to="1"></li> 
           <li data-target="#bestSellers" data-slide-to="2"></li> 
           <li data-target="#bestSellers" data-slide-to="3"></li> 
          </ol> 

          <div class="carousel-inner"> 
           <div class="item active"> 
            <img src="images/spring.jpg" alt="First slide" class="img-responsive"> 
            <div class="carousel-caption">Product 1</div> 
           </div> 
           <div class="item"> 
            <img src="images/summer.jpg" alt="First slide" class="img-responsive"> 
            <div class="carousel-caption">Product 2</div> 
           </div> 
           <div class="item"> 
            <img src="images/autumn.jpg" alt="First slide" class="img-responsive"> 
            <div class="carousel-caption">Product 3</div> 
           </div> 
           <div class="item"> 
            <img src="images/winter.jpg" alt="First slide" class="img-responsive"> 
            <div class="carousel-caption">Product 4</div> 
           </div> 
          </div> 

          <a class="left carousel-control" href="#bestSellers" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
          </a> 
          <a class="right carousel-control" href="#bestSellers" data-slide="next"> 
           <span class="glyphicon glyphicon-chevron-right"></span> 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 













     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
       <div class="panel panel-warning"> 
        <div class="panel-heading">Weather data</div> 
        <div class="panel-body"> 
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
         <ol class="carousel-indicators"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
         </ol> 
         <div class="carousel-inner" role="listbox"> 
         <div class="carousel-item active"> 
          <img src="images/spring.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 1</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/summer.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 2</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/autumn.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 3</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/winter.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 4</div> 
         </div> 
         </div> 
         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
          </a> 
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
           <span class="glyphicon glyphicon-chevron-right"></span> 
          </a> 
         </div> 
        </div> 
      </div> 
     </div> 
    </body> 
</html> 

----------------------- Djangoのコード------- ------------------------------

 <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
       <div class="panel panel-warning"> 
        <div class="panel-heading">Weather data</div> 
        <div class="panel-body"> 
         <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
         <ol class="carousel-indicators"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
         </ol> 
         <div class="carousel-inner" role="listbox"> 
         <div class="carousel-item active"> 
          <img src="images/spring.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 1</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/summer.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 2</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/autumn.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 3</div> 
         </div> 
         <div class="carousel-item"> 
          <img src="images/winter.jpg" alt="First slide" class="img-responsive"> 
          <div class="carousel-caption">data 4</div> 
         </div> 
         </div> 
         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
           <span class="glyphicon glyphicon-chevron-left"></span> 
          </a> 
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
           <span class="glyphicon glyphicon-chevron-right"></span> 
          </a> 

         </div> 
        </div> 
      </div> 
     </div> 


    </body> 
</html> 

以下はdjanoピースコードです。違いは画像にあります形式

他のコードは同じです

しかし、djangoの結果は、ページからフールされた4つの縦の画像です。

どうすれば修正できますか?

答えて

1

静的ファイルを使用する場合は、tutorialを経由する必要があります。要するに、あなたはテンプレートの上部にsrc="{% static url '(path)/(name).(format)" %}"

を使用する必要が

あなたも{% load staticfiles %}をする必要がありますし、あなたの静的なパスコース+ URLの構成を適切に設定する必要があります。

+0

はい私は実際に私のローカルファイルに追加されました、私は私の質問に追加された忘れてしまったhaha.btw問題はまだ存在する –

関連する問題

 関連する問題