Verzia Typo3: 6.2

Zadanie

Uvedieme príklad nasadenia CSS frameworku Bootstrap.
Použijeme Typo3 objekt FLUIDTEMPLATE a HTML šablónu Jumbotron Template for Bootstrap.

Potrebujeme:

1. vytvoriť Backend layout, ktorý bude svojím rozložením zhodný s HTML šablónou
2. stiahnuť a nahrať do zložky fileadmin/ všetky potrebné súbory pre použitú šablónu
3. vytvoriť základnú šablónu pre Typo3
4. nastaviť Typoscript, ktorý spracuje použitú šablónu a naplní ju obsahom stránky

Poznámka: Bude to len jedna stránka (úvodná), ktorá bude zobrazovať štyri obsahové "boxy":

1. hlavičku
2. obsah vľavo
3. obsah v strede
4. obsah vpravo

V zložke fileadmin/user_upload/fluidtemplate_3/ vytvoríme štruktúru zložiek so súbormi Boostrap šablóny:

• css/
  • bootstrap.css
  • jumbotron.css
• js/
  • bootstrap.js
  • ie10-viewport-bug-workaround.js
  • ie-emulation-modes-warning.js
  • jquery.js
• tmpl/
  • Index.html

Súbor Index.html

Všetky CSS a JS súbory ponecháme bez zmien, ale Index.html si upravíme pre potreby FLUIDTEMPLATE:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">Project name</a>
		</div>
	</div>
</nav>
<div class="jumbotron">
	<div class="container">
		<f:format.raw>{header}</f:format.raw>
	</div>
</div>
<div class="container">
	<div class="row">
		<div class="col-md-4">
			<f:format.raw>{contentLeft}</f:format.raw>
		</div>
		<div class="col-md-4">
			<f:format.raw>{contentMiddle}</f:format.raw>
		</div>
		<div class="col-md-4">
			<f:format.raw>{contentRight}</f:format.raw>
		</div>
	</div>
	<hr>
	<footer>
		<p>&copy; Company 2015</p>
	</footer>
</div>

page = PAGE
page {
  includeCSS {
    10 = fileadmin/user_upload/fluidtemplate_3/css/bootstrap.css
    20 = fileadmin/user_upload/fluidtemplate_3/css/jumbotron.css
  }
  includeJS {
    10 = fileadmin/user_upload/fluidtemplate_3/js/ie-emulation-modes-warning.js
  }
  includeJSFooter {
    10 = fileadmin/user_upload/fluidtemplate_3/js/jquery.js
    20 = fileadmin/user_upload/fluidtemplate_3/js/bootstrap.js
    30 = fileadmin/user_upload/fluidtemplate_3/js/ie10-viewport-bug-workaround.js
  }
}

page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/user_upload/fluidtemplate_3/tmpl/Index.html
  variables {
    header < styles.content.get
    contentLeft < styles.content.get
    contentLeft {
      select.where = colPos=1
    }
    contentMiddle < styles.content.get
    contentMiddle {
      select.where = colPos=2
    }
    contentRight < styles.content.get
    contentRight {
      select.where = colPos=3
    }
  }
}