0

と統合しようとしてTwitter BootstrapいましたVisual Force ここに私のVisual Forceコードがあります

    <apex:page standardStylesheets="false" showHeader="false" sidebar="false">
  <!-- Begin Default Content REMOVE THIS -->
  <head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"
        type="text/javascript"></script> 
  <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'css/bootstrap.css')}" />
  <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'css/bootstrap.min.css')}" />
  <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'css/bootstrap-responsive.css')}" />
  <apex:stylesheet value="{!URLFOR($Resource.Bootstrap, 'css/bootstrap-responsive.min.css')}" />

  <apex:includeScript value="{!URLFOR($Resource.Bootstrap, 'js/bootstrap.js')}"/>
  <apex:includeScript value="{!URLFOR($Resource.Bootstrap, 'js/bootstrap.min.js')}"/>
</head>
  <body>
  <div id="force">

  <div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="navbar-inner" style="background-image: -webkit-linear-gradient(top, #FF7F24, #DC143C);"> 
        <div class="container"> 
          <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
          </a> 
          <a class="brand" href="#">mypro</a> 
          <div class="nav-collapse collapse"> 
            <ul class="nav"> 
              <li class="active"><a href="http://twitter.github.com/bootstrap/examples/hero.html#">Home</a></li> 
              <li><a href="#">About</a></li> 
              <li><a href="#">Contact</a></li> 
              <li class="dropdown"> 
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Blogs <b class="caret"></b></a> 
                <ul class="dropdown-menu"> 
                  <li><a href="#">Thoughts</a></li> 
                  <li class="divider"></li>                  
                  <li><a href="#">Team Blog</a></li> 
                </ul> 
              </li> 
            </ul> 
            <form class="navbar-form pull-right"> 
              <input class="span2" placeholder="Email" type="text" /> 
              <input class="span2" placeholder="Password" type="password" /> 
              <button class="btn" type="submit">Simple form</button> 
            </form> 
          </div> 
        </div> 
      </div> 
    </div> 

    <div class="container"> 


      <div class="hero-unit"> 
        <h1>Hello, kjhkkhj!</h1> 
        <p>This is a one page demo, showing you how to use Twitter Bootstrap with VF pages, enjoy!</p> 
        For more info on Bootstrap, <a class="btn-custom btn-primary btn-large" href="http://twitter.github.com/bootstrap/">Learn more &raquo;</a> 
      </div> 
    </div> 



    <hr /> 

      <footer><label> 
khkjhkhj, 2012</label> 
      </footer> 

  </div>
  </body>
  <!-- End Default Content REMOVE THIS -->
</apex:page>

しかし、私が得るものはのようなものではありませんbootstrap。Chrome で URL を確認すると、開発者コンソールはfailed to load resourceすべてのブートストラップ ファイルに対して表示されます。私が間違っているところを指摘できますか

4

1 に答える 1

5

ライブラリをダウンロードしました。zipファイルには「bootstrap」と呼ばれる1つのディレクトリが含まれているようで、その下にのみ「css」、「js」などがあります。つまり、再パックするか、完全な相対パスを参照する必要があります（ばかげているように聞こえます、「完全な相対"、 知っている）。ライブラリの新しいバージョンをアップロードしたいときはいつでも作業が少なくて済むので、後者をお勧めします。私はjQueryモバイルと同じです。

のようなプレフィックス{!URLFOR($Resource.Bootstrap, 'bootstrap/css/bootstrap.css')}が機能しない場合は、次を試してください。

  1. 静的リソースの [ファイルを表示] をクリックします (zip ファイルの保存ウィンドウが表示されます)。パスをコピーします。に似ていhttps://na5.salesforce.com/resource/1354306153000/jquerymobileます。
  2. タイムスタンプを削除することもできますが、引き続き機能します: https://na5.salesforce.com/resource/jquerymobile(新しいリソースをアップロードするとすぐにキャッシュが壊れるようにするために削除したと思います)。
  3. 機能するものに到達するまで、フォルダ構造をナビゲートしようとするディレクトリ コンポーネントを追加し続けます。私の場合はそうでhttps://na5.salesforce.com/resource/jquerymobile/jquery.mobile-1.2.0/images/ajax-loader.gifあり、URLFOR に何を入力すればよいかというかなり良いヒントが得られます。
于 2013-01-23T00:00:10.247 に答える