How can I use XSL in tandem with Bootstrap?

Question

so I am working on a web page that takes data from an XML file and then uses parts of this data with a C# file to create the links that are displayed on the page. The page displays these in a table via XSLT. I am super new to web development and started learning XML, HTML, Bootstrap, and XSLT about a week ago. The goal is to reformat the whole page but still using the same XML to create the links. I made a mock up for how I want the site to look but I don't know how to use XSL within the Bootstrap to properly create the links once more.

Bootstrap mock up:

<!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>

Along with an additional tab view:

<!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>

How can I produce the links via XSL inside these Bootstrap displays so I don't have to manually copy in each link. (so only the XML file needs to change in the future)

XSLT file: (what currently creates the table display from 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>

I am trying to understand your question better, and here is what I have understood so far: * You have a XML file that contains some data * You want to use that data in the webpage (HTML file) that you are creating. * The data in the XMl file is to displayed as a table. *The table is generated using XSLT * Now you want to use the table inside the HTML file along with the links that is generate via XSLT, is that correct? — bbh, Jun 04 '15 at 17:22
Yeah I want to take the data from XML and display it. Currently that display is done with an XSLT file but I want to use Bootstrap (sleeker) but I'm having trouble taking the info from XML and using Bootstrap to dynamically create the table of a size I need. The XSLT file does this with loops but I don't know how to do that with Bootstrap so I was curious if I could use the XSLT inside the Bootstrap to do what I want with the data. I'll include the XSLT above. — calebben3, Jun 04 '15 at 17:29
No, you cannot use XSLT inside bootstrap. Bootstrap is set of CSS files with some additional js provided as a framework to build pages (you probably know that already). You are actually doing two things here, a) building a web page and b) create an HTML table from XML using XSLT. You now have to combine them together into a single HTML page. That might be tricky without taking programming support. But here is one big hack, if you are proficient in XML and XSLT. You could build your entire web page in XML and then create an XSLT which can produce an HTML with bootstrap code. — bbh, Jun 04 '15 at 17:36
There is an SO thread that kinda solves some part of your problem, you can check this here: http://stackoverflow.com/questions/28398651/how-to-generate-markup-inside-of-xslattribute-text. But for anything more, I will need more time to answer. — bbh, Jun 04 '15 at 18:26
I'll look into that example more - I'm still super new at all this so hopefully it will help after some study. — calebben3, Jun 04 '15 at 19:02
Good luck calebben. After further analysis...looks like XML to HTML via XSLT (that includes bootstrap tags) should solve your problem. You will then have to deal with only one source file to manage data and bootstrap will automatically take care of look and feel. — bbh, Jun 05 '15 at 06:14

How can I use XSL in tandem with Bootstrap?

0 Answers0