Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Du befindest dich hier: Home » typo3 » templating » bootstrap
Zuletzt angesehen:
typo3:templating:bootstrap

Dies ist eine alte Version des Dokuments!

Inhaltsverzeichnis

Bootstrap

Die folgenden Snippets sind für den Gebrauch des Bootstrap Frameworks gedacht.

http://getbootstrap.com/

Bootstrap 3 Navbar (Basic)

http://getbootstrap.com/examples/navbar/

Dieses TypoScript erstellt die komplette Navbar inklusive Firmenname. Bei Verwendung des Spacers SPC wird dieser als Nav header ausgegeben (nicht wählbare Überschrift im Menü). Über dem Nav header wird eine Trennlinie eingefügt, außer es ist der erste Menüpunkt auf dieser Ebene. 

lib.bootstrapNav = COA
lib.bootstrapNav {
  wrap = <nav class="navbar navbar-default navbar-static-top"> <div class="container"> | </div> </nav>
 
  10 = COA
  10 {
    wrap = <div class="navbar-header"> | </div>
    10 = COA
    10 {
      # Hamburger-Icon:
      wrap = <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</button>
      10 = TEXT
      10.value = <span class="sr-only">Toggle navigation</span>
      20 = TEXT
      20.value = <span class="icon-bar"></span>
      21 < .20
      22 < .20
    }
 
    # Firmenlogo:
    20 = TEXT
    20.value = Projektname
    20.typolink {
      parameter = http://www.example.org/
      ATagParams = class="navbar-brand"
    }
  }
 
  20 = HMENU
  20 {
    special = directory
    special.value = 11
    wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div>
 
    1 = TMENU
    1 {
      expAll = 1
 
      NO = 1
      NO {
        ATagTitle.field = title
        wrapItemAndSub = <li>|</li>
      }
 
      CUR = 1
      CUR {
        ATagTitle.field = title
        wrapItemAndSub = <li class="active">|</li>
      }
 
      ACT < .CUR
 
      IFSUB = 1
      IFSUB {
        ATagTitle.field = title
        ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
        linkWrap = |<b class="caret"></b>
        ATagBeforeWrap = 1
        wrapItemAndSub = <li class="dropdown">|</li>
      }
 
      ACTIFSUB = 1
      ACTIFSUB {
        ATagTitle.field = title
        ATagParams = class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-expanded="false"
        linkWrap = |<b class="caret"></b>
        ATagBeforeWrap = 1
        wrapItemAndSub = <li class="dropdown">|</li>
      }
    }
 
    2 < .1
    2 {
      wrap = <ul class="dropdown-menu">|</ul>
 
      SPC = 1
      SPC {
        wrapItemAndSub.cObject = COA
        wrapItemAndSub.cObject {
          # Keine Trennline, falls erster Menüpunkt dieser Ebene:
          10 = TEXT
          10.value = <li class="dropdown-header">|</li>
          10.if.value.data = register:count_MENUOBJ
          10.if.equals = 1
 
          # ansonsten:
          20 = TEXT
          20.value = <li class="divider"></li><li class="dropdown-header">|</li>
          20.if.value.data = register:count_MENUOBJ
          20.if.equals = 1
          20.if.negate = 1
        }
      }
    }
  }
}

Bootstrap 3 Navbar (mit Sprachmenü)

Dieses Snippet baut ein linksbündiges Seitenmenü sowie ein rechtsbündiges Sprachmenü auf. In der Mobilansicht sind beide Menüs über das selbe Hamburger-Icon aufrufbar.
Mit der CSS-Klasse lang-icon kann man z.B. eine Weltkugel als Button für das Sprachmenü verwenden. 

lib.bootstrapNav = COA
lib.bootstrapNav {
  wrap = <nav class="navbar navbar-default navbar-static-top"> <div class="container"> | </div> </nav>
 
  10 = COA
  10 {
    wrap = <div class="navbar-header"> | </div>
    10 = COA
    10 {
      # Hamburger-Icon:
      wrap = <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">|</button>
      10 = TEXT
      10.value = <span class="sr-only">Toggle navigation</span>
      20 = TEXT
      20.value = <span class="icon-bar"></span>
      21 < .20
      22 < .20
    }
 
    # Firmenlogo:
    20 = TEXT
    20.value = Projektname
    20.typolink {
      parameter = http://www.example.org/
      ATagParams = class="navbar-brand"
    }
  }
 
  20 = COA
  20 {
    wrap = <div id="navbar" class="navbar-collapse collapse"> | </div>
 
    # Seitenmenü:
    10 = HMENU
    10 {
      special = directory
      special.value = 11
      wrap = <ul class="nav navbar-nav"> | </ul>
 
      1 = TMENU
      1 {
        expAll = 1
 
        NO = 1
        NO {
          ATagTitle.field = title
          wrapItemAndSub = <li>|</li>
        }
 
        CUR = 1
        CUR {
          ATagTitle.field = title
          wrapItemAndSub = <li class="active">|</li>
        }
 
        ACT < .CUR
 
        IFSUB = 1
        IFSUB {
          ATagTitle.field = title
          ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
          linkWrap = |<b class="caret"></b>
          ATagBeforeWrap = 1
          wrapItemAndSub = <li class="dropdown">|</li>
        }
 
        ACTIFSUB = 1
        ACTIFSUB {
          ATagTitle.field = title
          ATagParams = class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-expanded="false"
          linkWrap = |<b class="caret"></b>
          ATagBeforeWrap = 1
          wrapItemAndSub = <li class="dropdown">|</li>
        }
      }
 
      2 < .1
      2 {
        wrap = <ul class="dropdown-menu">|</ul>
 
        SPC = 1
        SPC {
          wrapItemAndSub.cObject = COA
          wrapItemAndSub.cObject {
            # Keine Trennline, falls erster Menüpunkt dieser Ebene:
            10 = TEXT
            10.value = <li class="dropdown-header">|</li>
            10.if.value.data = register:count_MENUOBJ
            10.if.equals = 1
 
            # ansonsten:
            20 = TEXT
            20.value = <li class="divider"></li><li class="dropdown-header">|</li>
            20.if.value.data = register:count_MENUOBJ
            20.if.equals = 1
            20.if.negate = 1
          }
        }
      }
    }
 
    # Sprachmenü:
    20 = HMENU
    20 {
      special = language
      special.value = 0,1
 
      addQueryString = 1
      addQueryString.exclude = id
      addQueryString.method = GET
 
      wrap = <ul class="nav navbar-nav navbar-right"><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="lang-icon"></span> <span class="caret"></span></a>|</li></ul>
 
      1 = TMENU
      1 {
        wrap = <ul class="dropdown-menu" role="menu">|</ul>
        NO = 1
        NO {
          wrapItemAndSub = <li>|</li>
          stdWrap.cObject = TEXT
          stdWrap.cObject {
            value = Deutsch || English
          }
        }
        ACT < .NO
        ACT {
          wrapItemAndSub = <li class="active">|</li>
        }
      }
    }
  }
}

Bootstrap 3 Navbar (Multilevel)

Erweiterung der Navbar um weitere Ebenen. Basiert auf SmartMenus jQuery, daher gibt es ein paar Änderungen in der Syntax (z.B. keine data-toggle=„dropdown“).

Zusätzlich zum Standard-Bootstrap werden folgende Dateien benötigt:

  • jquery.smartmenus.bootstrap.css
  • jquery.smartmenus.min.js
  • jquery.smartmenus.bootstrap.min.js

Demo: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-static-top.html

Funktionsweise: In der Mobilansicht sorgt der erste Klick auf eine Seite mit Unterebene für das Öffnen der Unterebene. Klickt man ein zweites Mal auf den Seitennamen, wird die dort verlinkte Seite geladen.

TypoScript: 

lib.bootstrapNav = COA
lib.bootstrapNav {
  wrap = <div class="navbar navbar-default" role="navigation"> <div id="header"> | </div> </div>
 
  10 = COA
  10 {
    wrap = <div class="navbar-header"> | </div>
    10 = COA
    10 {
      # Hamburger-Icon:
      wrap = <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | </button>
      10 = TEXT
      10.value = <span class="sr-only">Toggle navigation</span>
      20 = TEXT
      20.value = <span class="icon-bar"></span>
      21 < .20
      22 < .20
    }
 
    # Firmenlogo:
    20 = TEXT
    20.value = Projektname
    20.typolink {
      parameter = http://www.example.org/
      ATagParams = class="navbar-brand"
    }
  }
 
  20 = COA
  20 {
    wrap = <div class="navbar-collapse collapse"> | </div>
 
    # Seitenmenü:
    10 = HMENU
    10 {
      special = directory
      special.value = 11
      wrap = <ul class="nav navbar-nav"> | </ul>
 
      1 = TMENU
      1 {
        expAll = 1
 
        NO = 1
        NO {
          ATagTitle.field = title
          wrapItemAndSub = <li>|</li>
        }
 
        CUR = 1
        CUR {
          ATagTitle.field = title
          wrapItemAndSub = <li class="active">|</li>
        }
 
        CURIFSUB = 1
        CURIFSUB {
          ATagTitle.field = title
          ATagParams = class="sub-arrow"
          linkWrap = |<span class="caret"></span>
          ATagBeforeWrap = 1
          wrapItemAndSub = <li class="active">|</li>
        }
 
        ACT < .CUR
 
        IFSUB = 1
        IFSUB {
          ATagTitle.field = title
          ATagParams = class="sub-arrow"
          linkWrap = |<span class="caret"></span>
          ATagBeforeWrap = 1
          wrapItemAndSub = <li>|</li>
        }
 
        ACTIFSUB = 1
        ACTIFSUB {
          ATagTitle.field = title
          ATagParams = class="sub-arrow"
          linkWrap = |<span class="caret"></span>
          ATagBeforeWrap = 1
          wrapItemAndSub = <li class="active">|</li>
        }
 
        SPC = 1
        SPC.linkWrap = <li class="dropdown-header">|</li>
      }
 
      2 < .1
      2 {
        wrap = <ul class="dropdown-menu">|</ul>
 
      }
 
      3 < .2
      4 < .3
      5 < .4
      6 < .5
    }
  }
}
typo3/templating/bootstrap.1435348235.txt.gz · Zuletzt geändert: (Externe Bearbeitung)

Seiten-Werkzeuge