2012-08-16 31 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