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 文件包含 1 个名为“bootstrap”的目录，并且只有在该目录下才有“css”、“js”等。这意味着你必须重新打包它或引用完整的相对路径（听起来很愚蠢，“完整的相对“， 我知道）。我推荐后者，因为每当您想上传新版本的库时，这意味着更少的工作。我对 jQuery mobile 也有同样的看法。

如果前缀类似于{!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 回答