[TYPO3-german] Gridelements & Bootstrap 3 & HTML Ausgabe / View Helper

Fri Mar 27 14:48:12 CET 2015

Ich habe vor kurzem die neuen Möglichkeiten mit Gridelements und Bootstrap entdeckt und wollte mir mal einige Ordner im fileadmin erstellen, damit ich die Basis dann nur noch für neue Installationen hineinkopieren brauche.

- Bootstrap habe ich bereits angelegt und verbunden.
- Gridelements habe ich nach dieser Anleitung für Bootstrap angelegt:
   https://www.merec.org/typo3/twitter-bootstrap-3-grid-mit-grid-elements-fuer-typo3

Damit ich eine große Basisspalte zum einfügen der Gridelemente habe, habe ich diese über Backendlayouts erstellt und der Spalte 0 zugewiesen - Hinweis hatte ich hier gefunden: http://www.pas-solutions.ch/typo3/typo3-6-0-inhaltsspalten-fur-ein-ubersichtliches-backend-anpassen/

0 = (styles.content.get)
1 = (styles.content.getLeft)
2 = (styles.content.getRight)
3 = (styles.content.getBorder)

Soweit ich das verstanden habe, brauche ich nun in der Index.htm (von bootstrap) eine classe und einen viewhelper, damit Inhalte angezeigt werden. 

Code / HTML:
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Navigation ein-/ausblenden</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">{siteName}</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Start</a></li>
            <li><a href="#ueber">Über</a></li>
            <li><a href="#kontakt">Kontakt</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container-fluid">
  <div class="row">
  <h1>{sometext}</h1>
  <f:format.raw>{content}</f:format.raw>
</div>
  </div>

Code / Setup.ts:
<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/Page/gridelements/bootstrap3_grid/setup.ts">

# Default PAGE object:
page = PAGE
page {
  includeCSS.bootstrapTheme = fileadmin/Page/template/bootstrap/css/bootstrap.min.css
  includeCSS.bootstrapCustom = fileadmin/Page/template/bootstrap/css/starter-template.css

  includeJS.jquery = fileadmin/Page/template/bootstrap/js/jquery.js
  includeJSFooter.bootstrap = fileadmin/Page/template/bootstrap/js/bootstrap.js

    10 = FLUIDTEMPLATE
    10 {
        file = fileadmin/Page/template/bootstrap/index.htm
        layoutRootPath = fileadmin/Page/template/layouts/
        partialRootPath = fileadmin/Page/template/partials/

    variables {
      siteName = TEXT
      siteName.value = TestserverTS1 (setupts)

      content < styles.content.get
      }    
     }
}

Weiterhin habe ich ansatzweise verstanden, dass man viewhelper "format"verwenden kann.
http://wiki.typo3.org/De:ViewHelper

Das Layout erscheint auch, allerdings werden die Inhalte nicht in Tabellen angelegt, sondern untereinander.
Vermutlich muss man nun einen Wrap oder eine andere class zuweisen, aber ob sich dann das Design vollständig anpasst,
sprich Spaltenzahl ändern = Design frontend angepasst ist mir noch nicht wirklich klar.

Würde mir jemand verraten, wo und wie ich am besten fortsetzte?

Wünsche ein schönes Wochenende.