Question

我试图将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。任何一点我都会出错

Answer 1

我已经下载了这个库。看起来这个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。

Visual Force无法正常工作的Twitter Bootstrap（无法加载资源）

1 个答案: