Snippets + Wiki

Benutzer-Werkzeuge

Webseiten-Werkzeuge

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

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
Nächste Überarbeitung		Vorherige Überarbeitung
typo3:templating:bootstrap [2015/06/09 20:32] – [Bootstrap 3 Navbar (mit Sprachmenü)] admintypo3:templating:bootstrap [2016/06/08 00:09] (aktuell) – Seite löschen, Inhalt in aktualisierter Form auf Website (Tutorials) admin
Zeile 1: Zeile 1:
-====== 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. 
- 
-<code typoscript> 
-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 
-        } 
-      } 
-    } 
-  } 
-} 
-</code> 
- 
----- 
- 
-===== 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. 
- 
-<code typoscript> 
-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> 
-        } 
-      } 
-    } 
-  } 
-} 
-</code> 
- 
----- 
- 
-===== Bootstrap 3 Navbar (Multilevel) ===== 
- 
-Erweiterung der Navbar um weitere Ebenen. 
- 
-Quelle: http://bootsnipp.com/snippets/featured/multi-level-navbar-menu 
- 
-**TypoScript:** 
-<code typoscript> 
-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> 
-       
-      IFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li> 
-      IFSUB.linkWrap > 
-      ACTIFSUB.wrapItemAndSub = <li class="dropdown-submenu">|</li> 
-      ACTIFSUB.linkWrap > 
-       
-      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 
-        } 
-      } 
-    } 
-     
-    3 < .2 
-    4 < .2 
-    5 < .2 
-  } 
-} 
-</code> 
- 
-**CSS:** 
-<code css> 
-.dropdown-submenu { 
-    position: relative; 
-} 
- 
-.dropdown-submenu>.dropdown-menu { 
-    top: 0; 
-    left: 100%; 
-    margin-top: -6px; 
-    margin-left: -1px; 
-    -webkit-border-radius: 0 6px 6px 6px; 
-    -moz-border-radius: 0 6px 6px; 
-    border-radius: 0 6px 6px 6px; 
-} 
- 
-.dropdown-submenu:hover>.dropdown-menu { 
-    display: block; 
-} 
- 
-.dropdown-submenu>a:after { 
-    display: block; 
-    content: " "; 
-    float: right; 
-    width: 0; 
-    height: 0; 
-    border-color: transparent; 
-    border-style: solid; 
-    border-width: 5px 0 5px 5px; 
-    border-left-color: #ccc; 
-    margin-top: 5px; 
-    margin-right: -10px; 
-} 
- 
-.dropdown-submenu:hover>a:after { 
-    border-left-color: #fff; 
-} 
- 
-.dropdown-submenu.pull-left { 
-    float: none; 
-} 
- 
-.dropdown-submenu.pull-left>.dropdown-menu { 
-    left: -100%; 
-    margin-left: 10px; 
-    -webkit-border-radius: 6px 0 6px 6px; 
-    -moz-border-radius: 6px 0 6px 6px; 
-    border-radius: 6px 0 6px 6px; 
-} 
-</code> 
- 
-**JavaScript:** 
-<code javascript> 
-$(document).ready( function() { 
-  $("li.dropdown-submenu > a").on("click", function(){ 
-    $("li.dropdown-submenu").removeClass("active"); 
-    $(this).parent().addClass("active"); 
-    return false; 
-  }); 
-}); 
-</code> 
typo3/templating/bootstrap.1433874776.txt.gz · Zuletzt geändert: (Externe Bearbeitung)

Seiten-Werkzeuge