2012-08-16 101 views
0

我想要的图标添加到我的引导代码,但我已经添加了代码:图标在ASP.Net

<li><a href="#"><i class="icon-user"></i>Create Client</a></li> 

作品on Rails的,但不是在ASP。链接没有图标。这是正确的ASP?

我查看如下:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>@ViewData("Title")</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" /> 
     <style type="text/css"> 
      body { 
      padding-top: 60px; 
      padding-bottom: 40px; 
      } 
     </style> 
     <link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" /> 
     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
    </head> 

    <body> 
     <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="#">Courtenay's Laundry</a> 
      <div class="nav-collapse"> 
       <ul class="nav nav-pills"> 
        <li class="active"><a href="/Index">Home</a></li> 

       <!-- Dropdown menu Service --> 
       <li class="dropdown" id="menu1"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> 
         Service 
         <b class="caret"></b> 
        </a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
        </li> 

        <!-- Dropdown menu Clients --> 
        <li class="dropdown" id="menu2"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2"> 
          Customers 
          <b class="caret"></b> 
         </a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Create Customer</a></li> 
          <li><a href="#">Modify Customer</a></li> 
          <li><a href="#">Delete Customer</a></li> 
          <li class="divider"></li> 
          <li><a href="#">View Loyalty</a></li> 
          <li><a href="#">Manually Change Loyalty</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Notify Client</a></li> 
         </ul> 
         </li> 

        <!-- Dropdown menu Management --> 
        <li class="dropdown" id="menu3"> 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#menu3"> 
          Management 
          <b class="caret"></b> 
         </a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Separated link</a></li> 
         </ul> 
         </li> 

        <li class="active"><a href="#">Reporting</a></li> 
       </ul> 
      </div> 
      </div> 
     </div> 
     </div> 


     <div class="container-fluid"> 
     <div class="row-fluid"> 
     <div class="span2"> 
      <div class="well sidebar-nav"> 

      <!--Sidebar content--> 
      <ul class="nav nav-list"> 
      <li class="nav-header">Service Links</li> 
      <li><a href="#"><i class="icon-book icon-white"></i>Book Job</a></li> 
      <li><a href="#"><i class="icon-book"></i>Book Out Job</a></li> 
      <li><a href="#"><i class="icon-random"></i>Station Transfer</a></li> 
      <li class="nav-header">Client Quick Links</li> 
      <li><a href="#"><i class="icon-user"></i>Create Client</a></li> 
      <li><a href="#"><i class="icon-share"></i>Notifications</a></li> 
      <li class="nav-header">Reporting</li> 
      <li><a href="#"><i class="icon-file"></i>Reporting</a></li> 
      <li class="divider"></li> 
      <li><a href="#"><i class="icon-cog"></i>Settings</a></li> 
      </ul> 

      </div> 
     </div> 
     <div class="span10"> 
      @RenderBody()  
     </div> 
     </div> 

    </div> 

     <script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-transition.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-alert.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/bootstrap-modal.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-dropdown.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-scrollspy.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-tab.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-tooltip.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-popover.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-button.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-collapse.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-carousel.js")" type="text/javascript"></script> 
     <script src="@Url.Content("~/Scripts/bootstrap-typeahead.js")" type="text/javascript"></script> 
    </body> 
    </html> 

我:

bootstrap-dropdown.js 
bootstrap.js 
bootstrap.min.js 

在我的脚本文件夹

+0

然后再次检查您的浏览器是否可以找到所有资源。如果没有 - 更改您的网址到适当的路径! – 2012-08-16 21:32:52

回答

2

你确定你已经包含了引导样式?您可以检查您的浏览器控制台是否有任何文件无法加载等。不应该在这里使用什么服务器端语言。否则 - 检查生成的代码并发布。我一直使用Bootstrap使用ASP.Net MVC,并且没有任何问题 - 只要确保你的路径是正确的(我有一种感觉是你的目录文件夹中有一个/ bootstrap文件夹,而且你没有正确地引用它)!

这是一个简单的ASP.NET MVC3'boilerplate'-ish项目。所以你可以很容易地开始。 http://wearereasonablepeople.com/APSMVC3BootstrapBoilerplate.zip

请注意:这里没有花哨的构建脚本,它甚至不包含LESS文件,但无论如何它都可能帮助您入门。

+0

已包含我的视图 – NickP 2012-08-16 21:31:43

+0

视图看起来不错,但由于我看不到剩余的项目,我无法判断您的路径是否真的非常正确:)您使用的是哪种浏览器?通过Chrome,Safari和Firefox,您可以查看是否可以加载所有资源。 – 2012-08-16 21:35:26

+0

你有关于安装bootstrap的教程或其他内容吗?我只是用拖放手动安装它,但我有一种感觉,这是不正确的。用红宝石它只是一个宝石安装。我在我的mac上使用chrome – NickP 2012-08-16 21:35:53