Visual Force无法正常工作的Twitter Bootstrap(无法加载资源)

Question

Visual Force无法正常工作的Twitter Bootstrap(无法加载资源)

iJa*_*ade 0 jquery salesforce visualforce twitter-bootstrap

我试图整合Twitter Bootstrap与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>

Run Code Online (Sandbox Code Playgroud)

但我得到的并不是什么bootstrap.当我检查chrome中的url时,开发人员控制台会说出failed to load resource所有bootstrap文件.我可能会出错任何一点

Answer 1

eye*_*eam 5

我已经下载了这个库.看起来这个zip文件包含一个名为"bootstrap"的目录,并且只有那个目录下你有"css","js"等.这意味着你必须要重新打包它或引用完整的相对路径(声音愚蠢,"完全相对", 我知道).我建议使用后者,因为每当你想上传新版本的lib时,这意味着更少的工作.我和jQuery mobile一样.

如果类似的前缀{!URLFOR($Resource.Bootstrap, 'bootstrap/css/bootstrap.css')}不起作用 - 试试这个:

单击静态资源上的"查看文件"(应该提示您使用zip文件保存窗口).复制路径.看起来很像https://na5.salesforce.com/resource/1354306153000/jquerymobile.
你可以删除时间戳的东西,仍然可以工作:( https://na5.salesforce.com/resource/jquerymobile我猜他们这样做是为了确保上传新资源后缓存会被破坏).
继续添加尝试导航文件夹结构的目录组件,直到到达有效的方式.在我的情况下它是https://na5.salesforce.com/resource/jquerymobile/jquery.mobile-1.2.0/images/ajax-loader.gif,这给了我一个很好的暗示我应该把什么放入URLFOR.

归档时间：	12 年，10 月前
查看次数：	2006 次
最近记录：	12 年，10 月前