如何与Bootstrap一起使用XSL?

时间:2015-06-04 15:47:15

标签: javascript html xml twitter-bootstrap xslt

所以我正在开发一个网页,该网页从XML文件中获取数据,然后将这些数据的一部分与C#文件一起使用,以创建页面上显示的链接。该页面通过XSLT在表格中显示这些内容。我是Web开发的新手,大约一周前开始学习XML,HTML,Bootstrap和XSLT。目标是重新格式化整个页面,但仍然使用相同的XML来创建链接。我模拟了我希望网站看起来如何,但我不知道如何在Bootstrap中使用XSL来再次正确创建链接。

Bootstrap模拟:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- this is HTML5 Doctype -->
<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- This is setting the width so runs on mobile or desktop -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!-- For IE compatibility -->
<meta name="description" content="">
  <title>SAP Web Application Links [Table View]</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2><p class="text-center">SAP Web Application Server Links </p></h2>
  <p class="text-center">
  
  <!-- here create links between page view -->
 
  <a class="sapmenu" href="F:\Link List Proj\LinksPage\BootstrapTabs.html">Tab View</a> 
  &#160; <!-- spacing -->
  <font class="sapmenu">|</font> <!-- insert vert bar seperation -->
  &#160;
  <a class="sapmenu" href="F:\Link List Proj\LinksPage\BootstrapTable.html">Table View</a>
  </p> 
        
  <table class="table table-hover">   
    <thead>
      <tr>      
 
        <th width="20%">&#160;</th>
        <th width="13%">Production</th>
        <th width="13%">Staging</th>
        <th width="13%">Development</th>
        <th width="13%">Beta</th>
        <th width="13%">Ref Copy</th>
      </tr>
    </thead>
    <tbody>
	 <xsl:for-each select="/sapsyslist/sapsystem[@debug='no']">
      <tr>
        <td>name</td>
        <td><a href="#" target="_blank">PRD</a></td>
        <td><a href="#" target="_blank">STG</a></td>
        <td><a href="#" target="_blank">DEV</a></td>
        <td><a href="#" target="_blank">BETA</a></td>
        <td><a href="#" target="_blank">PRDREF</a></td>
      </tr>
      <tr>
        <td>name</td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
      </tr>
      <tr>
        <td>name</td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
      </tr>
      <tr>
        <td>name </td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
        <td>insert</td>
      </tr>

    </tbody>
   
  </table>
  <br>
  <p class="text-center">
 
 <a class="sapmenu" href="F:\Link List Proj\LinksPage\BootstrapTabs.html">Tab View</a> 
  &#160; <!-- spacing -->
  <font class="sapmenu">|</font> <!-- insert vert bar seperation -->
  &#160;
  <a class="sapmenu" href="F:\Link List Proj\LinksPage\BootstrapTable.html">Table View</a>
  </p> 
  
</div>

</body>
</html>

以及其他标签视图:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- this is HTML5 Doctype -->
<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- This is setting the width so runs on mobile or desktop -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!-- For IE compatibility -->
<meta name="description" content="">

<title>SAP Web Application Links [Tab View]</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
  <h2><p class="text-center">SAP Web Application Server Links </p></h2>
  <p class="text-center">
  
  <!-- here create links between page view -->
 
 <a class="sapmenu" href="F:\Link List Proj\LinksPage\BootstrapTabs.html">Tab View</a> 
  &#160; <!-- spacing -->
  <font class="sapmenu">|</font> <!-- insert vert bar seperation -->
  &#160;
  <a class="sapmenu" href="F:\Link List Proj\LinksPage\BootstrapTable.html">Table View</a>
  </p> 
<div class="bs-example">
    <ul class="nav nav-tabs"> <!-- loop with xslt to make the href part and fill in name -->
        <li class="active"><a data-toggle="tab" href="#Production">Production </a></li>
        <li><a data-toggle="tab" href="#Staging">Staging</a></li>
        <li><a data-toggle="tab" href="#Development">Development</a></li>
        <li><a data-toggle="tab" href="#Beta">Beta</a></li>
        <li><a data-toggle="tab" href="#RefCopy">Ref Copy</a></li>
    </ul>
    <div class="tab-content">
        <div id="Production" class="tab-pane active">
            <h3>Production</h3>
            <p>Insert Systems as Hyperlinks with XML.. 
			
            
            
            </p>
            
        </div>
        <div id="Staging" class="tab-pane">
            <h3>Staging</h3>
            <p>Insert links and systems.</p>
        </div>
        <div id="Development" class="tab-pane">
            <h3>Development</h3>
            <p>Insert links and systems.</p>
        </div>
        <div id="Beta" class="tab-pane">
            <h3>Beta</h3>
            <p>Insert links and systems.</p>
        </div>
        <div id="RefCopy" class="tab-pane ">
            <h3>Ref Copy</h3>
            <p><a href="#" target="_blank">link</a></p>
        </div>        
    </div>
</div>
<br>
  <p class="text-center">
 
 <a class="sapmenu" href="F:\Link List Proj\LinksPage\BootstrapTabs.html">Tab View</a> 
  &#160; <!-- spacing -->
  <font class="sapmenu">|</font> <!-- insert vert bar seperation -->
  &#160;
  <a class="sapmenu" href="F:\Link List Proj\LinksPage\BootstrapTable.html">Table View</a>
  </p> 
</div>
</body>
</html>                                		

如何在这些Bootstrap显示中通过XSL生成链接,这样我就不必在每个链接中手动复制。 (因此将来只需要更改XML文件)

XSLT文件:(当前从XML创建表格显示)

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
  <html>
    <head>   	
      <link rel="stylesheet" type="text/css" href="css/saplinks.css" />
      <title>SAP Web Application Links [Table View]</title>
    </head>
    <body>
    <!--
        This is an XSLT template file. Fill in this area with the
        XSL elements which will transform your XML to XHTML.
    -->
      <h2 align="center">        
          SAP Web Application Server Links        
      </h2>
      <p align="center">
        <a class="sapmenu" href="Default.aspx?format=table.xslt">Table View</a>
        &#160;
        <font class="sapmenu">|</font>
        &#160;
        <a class="sapmenu" href="Default.aspx?format=list.xslt">List View</a>
      </p>
      <table>
        <tr>
          <th width="20%">&#160;</th>
          <th width="13%">Ref Copy</th>          
          <th width="13%">Beta</th>
          <th width="13%">Development</th>
          <th width="13%">Staging</th>
          <th width="13%">Production</th>
        </tr>
        <xsl:for-each select="/sapsyslist/sapsystem[@debug='no']">
          <tr>
            <td>
              <font class="description">
                <xsl:value-of select="@description"/>
              </font>
            </td>
<td align="center">
              <xsl:choose>
                <xsl:when test="uri[@env='PRDREF']">
                  <xsl:for-each select="uri[@env='PRDREF']">
                    <xsl:choose>
                      <xsl:when test="shortname!=''">                                                  
                          <xsl:choose>                            
                            <xsl:when test="@priority='1'">
                              <a target="_blank" href="Default.aspx?env=PRDREF&amp;name={../@name}&amp;priority=1">
                                <xsl:value-of select="shortname"/> (Primary)
                              </a>
                              <br/>
                            </xsl:when>
                            <xsl:when test="@priority!=''">
                              <a target="_blank" href="Default.aspx?env=PRDREF&amp;name={../@name}&amp;priority={@priority}">
                                <xsl:value-of select="shortname"/> (Backup)
                              </a> 
                              <br/>
                            </xsl:when>
                            <xsl:otherwise>
                              <a target="_blank" href="Default.aspx?env=PRDREF&amp;name={../@name}">
                                <xsl:value-of select="shortname"/>
                              </a>                              
                            </xsl:otherwise>
                          </xsl:choose>
                      </xsl:when>
                      <xsl:otherwise>
                          <xsl:choose>
                            <xsl:when test="@priority='1'">
                              <a target="_blank" href="Default.aspx?env=PRDREF&amp;name={../@name}&amp;priority=1">
                                Default.aspx?env=PRDREF&amp;name={../@name}&amp;priority=1 (Primary)
                              </a>
                              <br/>
                              </xsl:when>
                            <xsl:when test="@priority!=''">
                              <a target="_blank" href="Default.aspx?env=PRDREF&amp;name={../@name}&amp;priority={@priority}">
                                Default.aspx?env=PRDREF&amp;name={../@name}&amp;priority={@priority} (Backup)
                              </a>
                              <br/>
                            </xsl:when>
                            <xsl:otherwise>
                              <a target="_blank" href="Default.aspx?env=PRDREF&amp;name={../@name}">
                                Default.aspx?env=PRDREF&amp;name={../@name}
                              </a>
                            </xsl:otherwise>
                          </xsl:choose>                                                
                      </xsl:otherwise>
                    </xsl:choose>
                  </xsl:for-each>
                </xsl:when>
                <xsl:otherwise>
                  N/A
                </xsl:otherwise>
              </xsl:choose>
            </td>            
            <td align="center">
              <xsl:choose>
                <xsl:when test="uri[@env='BETA']">
                  <xsl:for-each select="uri[@env='BETA']">
                    <xsl:choose>
                      <xsl:when test="shortname!=''">                                                  
                          <xsl:choose>                            
                            <xsl:when test="@priority='1'">
                              <a target="_blank" href="Default.aspx?env=BETA&amp;name={../@name}&amp;priority=1">
                                <xsl:value-of select="shortname"/> (Primary)
                              </a>
                              <br/>
                            </xsl:when>
                            <xsl:when test="@priority!=''">
                              <a target="_blank" href="Default.aspx?env=BETA&amp;name={../@name}&amp;priority={@priority}">
                                <xsl:value-of select="shortname"/> (Backup)
                              </a> 
                              <br/>
                            </xsl:when>
                            <xsl:otherwise>
                              <a target="_blank" href="Default.aspx?env=BETA&amp;name={../@name}">
                                <xsl:value-of select="shortname"/>
                              </a>                              
                            </xsl:otherwise>
                          </xsl:choose>
                      </xsl:when>
                      <xsl:otherwise>
                          <xsl:choose>
                            <xsl:when test="@priority='1'">
                              <a target="_blank" href="Default.aspx?env=BETA&amp;name={../@name}&amp;priority=1">
                                Default.aspx?env=BETA&amp;name={../@name}&amp;priority=1 (Primary)
                              </a>
                              <br/>
                              </xsl:when>
                            <xsl:when test="@priority!=''">
                              <a target="_blank" href="Default.aspx?env=BETA&amp;name={../@name}&amp;priority={@priority}">
                                Default.aspx?env=BETA&amp;name={../@name}&amp;priority={@priority} (Backup)
                              </a>
                              <br/>
                            </xsl:when>
                            <xsl:otherwise>
                              <a target="_blank" href="Default.aspx?env=BETA&amp;name={../@name}">
                                Default.aspx?env=BETA&amp;name={../@name}
                              </a>
                            </xsl:otherwise>
                          </xsl:choose>                                                
                      </xsl:otherwise>
                    </xsl:choose>
                  </xsl:for-each>
                </xsl:when>
                <xsl:otherwise>
                  N/A
                </xsl:otherwise>
              </xsl:choose>
            </td>
            <td align="center">
              <xsl:choose>
                <xsl:when test="uri[@env='DEV']">
                  <xsl:for-each select="uri[@env='DEV']">
                    <xsl:choose>
                      <xsl:when test="shortname!=''">
                        <xsl:choose>
                          <xsl:when test="@priority='1'">
                            <a target="_blank" href="Default.aspx?env=DEV&amp;name={../@name}&amp;priority=1">
                              <xsl:value-of select="shortname"/> (Primary)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:when test="@priority!=''">
                            <a target="_blank" href="Default.aspx?env=DEV&amp;name={../@name}&amp;priority={@priority}">
                              <xsl:value-of select="shortname"/> (Backup)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:otherwise>
                            <a target="_blank" href="Default.aspx?env=DEV&amp;name={../@name}">
                              <xsl:value-of select="shortname"/>
                            </a>
                          </xsl:otherwise>
                        </xsl:choose>
                      </xsl:when>
                      <xsl:otherwise>
                        <xsl:choose>
                          <xsl:when test="@priority='1'">
                            <a target="_blank" href="Default.aspx?env=DEV&amp;name={../@name}&amp;priority=1">
                              Default.aspx?env=DEV&amp;name={../@name}&amp;priority=1 (Primary)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:when test="@priority!=''">
                            <a target="_blank" href="Default.aspx?env=DEV&amp;name={../@name}&amp;priority={@priority}">
                              Default.aspx?env=DEV&amp;name={../@name}&amp;priority={@priority} (Backup)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:otherwise>
                            <a target="_blank" href="Default.aspx?env=DEV&amp;name={../@name}">
                              Default.aspx?env=DEV&amp;name={../@name}
                            </a>
                          </xsl:otherwise>
                        </xsl:choose>
                      </xsl:otherwise>
                    </xsl:choose>
                  </xsl:for-each>
                </xsl:when>
                <xsl:otherwise>
                  N/A
                </xsl:otherwise>
              </xsl:choose>
            </td>
            <td align="center">
              <xsl:choose>
                <xsl:when test="uri[@env='STG']">
                  <xsl:for-each select="uri[@env='STG']">
                    <xsl:choose>
                      <xsl:when test="shortname!=''">
                        <xsl:choose>
                          <xsl:when test="@priority='1'">
                            <a target="_blank" href="Default.aspx?env=STG&amp;name={../@name}&amp;priority=1">
                              <xsl:value-of select="shortname"/> (Primary)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:when test="@priority!=''">
                            <a target="_blank" href="Default.aspx?env=STG&amp;name={../@name}&amp;priority={@priority}">
                              <xsl:value-of select="shortname"/> (Backup)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:otherwise>
                            <a target="_blank" href="Default.aspx?env=STG&amp;name={../@name}">
                              <xsl:value-of select="shortname"/>
                            </a>
                          </xsl:otherwise>
                        </xsl:choose>
                      </xsl:when>
                      <xsl:otherwise>
                        <xsl:choose>
                          <xsl:when test="@priority='1'">
                            <a target="_blank" href="Default.aspx?env=STG&amp;name={../@name}&amp;priority=1">
                              Default.aspx?env=STG&amp;name={../@name}&amp;priority=1 (Primary)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:when test="@priority!=''">
                            <a target="_blank" href="Default.aspx?env=STG&amp;name={../@name}&amp;priority={@priority}">
                              Default.aspx?env=STG&amp;name={../@name}&amp;priority={@priority} (Backup)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:otherwise>
                            <a target="_blank" href="Default.aspx?env=STG&amp;name={../@name}">
                              Default.aspx?env=STG&amp;name={../@name}
                            </a>
                          </xsl:otherwise>
                        </xsl:choose>
                      </xsl:otherwise>
                    </xsl:choose>
                  </xsl:for-each>
                </xsl:when>
                <xsl:otherwise>
                  N/A
                </xsl:otherwise>
              </xsl:choose>
            </td>
            <td align="center">
              <xsl:choose>
                <xsl:when test="uri[@env='PRD']">
                  <xsl:for-each select="uri[@env='PRD']">
                    <xsl:choose>
                      <xsl:when test="shortname!=''">
                        <xsl:choose>
                          <xsl:when test="@priority='1'">
                            <a target="_blank" href="Default.aspx?env=PRD&amp;name={../@name}&amp;priority=1">
                              <xsl:value-of select="shortname"/> (Primary)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:when test="@priority!=''">
                            <a target="_blank" href="Default.aspx?env=PRD&amp;name={../@name}&amp;priority={@priority}">
                              <xsl:value-of select="shortname"/> (Backup)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:otherwise>
                            <a target="_blank" href="Default.aspx?env=PRD&amp;name={../@name}">
                              <xsl:value-of select="shortname"/>
                            </a>
                          </xsl:otherwise>
                        </xsl:choose>
                      </xsl:when>
                      <xsl:otherwise>
                        <xsl:choose>
                          <xsl:when test="@priority='1'">
                            <a target="_blank" href="Default.aspx?env=PRD&amp;name={../@name}&amp;priority=1">
                              Default.aspx?env=PRD&amp;name={../@name}&amp;priority=1 (Primary)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:when test="@priority!=''">
                            <a target="_blank" href="Default.aspx?env=PRD&amp;name={../@name}&amp;priority={@priority}">
                              Default.aspx?env=PRD&amp;name={../@name}&amp;priority={@priority} (Backup)
                            </a>
                            <br/>
                          </xsl:when>
                          <xsl:otherwise>
                            <a target="_blank" href="Default.aspx?env=PRD&amp;name={../@name}">
                              Default.aspx?env=PRD&amp;name={../@name}
                            </a>
                          </xsl:otherwise>
                        </xsl:choose>
                      </xsl:otherwise>
                    </xsl:choose>
                  </xsl:for-each>
                </xsl:when>
                <xsl:otherwise>
                  N/A
                </xsl:otherwise>
              </xsl:choose>
            </td>
          </tr>          
        </xsl:for-each>
      </table>
      <p align="center">
        <a class="sapmenu" href="Default.aspx?format=table.xslt">Table View</a>
        &#160;
        <font class="sapmenu">|</font>
        &#160;
        <a class="sapmenu" href="Default.aspx?format=list.xslt">List View</a>
      </p>
    </body>
  </html>
</xsl:template>

</xsl:stylesheet> 

0 个答案:

没有答案