Graham
bemethavinci All the components are here on either
http://www.w3schools.com/bootstrap/default.asp
or
http://getbootstrap.com/components/
This is my basic template
bootstrap css link goes in _headtags
Add your theme css link here also
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="/favicon.ico" rel="icon">
Copy code
This is my basic header
so that the 'active page' feature works you need to create
xtgem_template.css and add at least one class to it
A dummy will do
.dummy{}
Then you add the xt_navigation class to the nav tabs
this allows xtgems code to add the 'active' class to the current page item
This is also where I add the jquery and bootstrap js links because xtgem adds some code to prevent ad blocking above the first javascript on the page and some of that code is not valid in <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class="pull-left" src="YOUR LOGO GOES HERE" alt="logo" /></a>
</div>
<ul id="" class="nav nav-tabs xt_navigation">
<li><a href="/">Home</a></li>
<li><a href="/Blog">Blog</a></li>
<li><a href="/forum">Forum</a></li>
</ul>
</div>
</nav>
Copy code
This is a basic bootstrap 2 column responsive page it goes to single column if the screen width is less than 768px
it is set so that it can be opened using the xtgem building tool if required
you can add blocks to the containers using the building tool
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Bootstrap basic page 2 column</title>
</head>
<body>
<div data-xtcontainer="container" class="container-fluid">
<div data-xtcontainer="row" class="row">
<div data-xtcontainer="col sm 6" class="col-sm-6">
<div data-xtcontainer="panel" class="panel panel-default">
<div data-xtcontainer="panel heading" class="panel-heading">heading</div>
<div data-xtcontainer="panel body" class="panel-body">body</div>
</div>
</div>
<div data-xtcontainer="col sm 6" class="col-sm-6">
<div data-xtcontainer="panel" class="panel panel-default">
<div data-xtcontainer="panel heading" class="panel-heading">heading</div>
<div data-xtcontainer="panel body" class="panel-body">body</div>
</div>
</div>
</div>
</div>
</body>
</html>
Copy code
This is a basic _footer except I have left in my code that moves the auth bar to the footer
<nav class="navbar navbar-default">
<div class="container-fluid">
<div id="auth"><xt:auth /></div>
<br style="clear:both" />
</div>
</nav>
<script>
var auth=document.getElementById("auth");
var style=auth.getElementsByTagName("style");
if (style.length){
var iframe=auth.getElementsByTagName("iframe");
style [0].innerHTML="#xt_auth_iframe {background: transparent;float:right}";
iframe[0].style.maxWidth="200px";
//iframe[0].style.width="100%";
iframe[0].style.overflow="hidden";
iframe[0].style.border="0";
iframe[0].style.height="23px";
iframe[0].style.zIndex="999999999";}
</script>
Copy code
