Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
| Beide Seiten, vorherige ÜberarbeitungVorherige ÜberarbeitungNächste Überarbeitung | Vorherige Überarbeitung | ||
| typo3:templating:bootstrap [2015/06/09 20:20] – CSS class Korrektur admin | typo3: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:// | ||
| - | |||
| - | ===== Bootstrap 3 Navbar (Basic) ===== | ||
| - | |||
| - | http:// | ||
| - | |||
| - | Dieses TypoScript erstellt die komplette Navbar inklusive Firmenname. Bei Verwendung des Spacers '' | ||
| - | |||
| - | <code typoscript> | ||
| - | lib.bootstrapNav = COA | ||
| - | lib.bootstrapNav { | ||
| - | wrap = <nav class=" | ||
| - | |||
| - | 10 = COA | ||
| - | 10 { | ||
| - | wrap = <div class=" | ||
| - | 10 = COA | ||
| - | 10 { | ||
| - | # Hamburger-Icon: | ||
| - | wrap = <button type=" | ||
| - | 10 = TEXT | ||
| - | 10.value = <span class=" | ||
| - | 20 = TEXT | ||
| - | 20.value = <span class=" | ||
| - | 21 < .20 | ||
| - | 22 < .20 | ||
| - | } | ||
| - | |||
| - | # Firmenlogo: | ||
| - | 20 = TEXT | ||
| - | 20.value = Projektname | ||
| - | 20.typolink { | ||
| - | parameter = http:// | ||
| - | ATagParams = class=" | ||
| - | } | ||
| - | } | ||
| - | |||
| - | 20 = HMENU | ||
| - | 20 { | ||
| - | special = directory | ||
| - | special.value = 11 | ||
| - | wrap = <div id=" | ||
| - | | ||
| - | 1 = TMENU | ||
| - | 1 { | ||
| - | expAll = 1 | ||
| - | | ||
| - | NO = 1 | ||
| - | NO { | ||
| - | ATagTitle.field = title | ||
| - | wrapItemAndSub = < | ||
| - | } | ||
| - | |||
| - | CUR = 1 | ||
| - | CUR { | ||
| - | ATagTitle.field = title | ||
| - | wrapItemAndSub = <li class=" | ||
| - | } | ||
| - | | ||
| - | ACT < .CUR | ||
| - | | ||
| - | IFSUB = 1 | ||
| - | IFSUB { | ||
| - | ATagTitle.field = title | ||
| - | ATagParams = class=" | ||
| - | linkWrap = |<b class=" | ||
| - | ATagBeforeWrap = 1 | ||
| - | wrapItemAndSub = <li class=" | ||
| - | } | ||
| - | | ||
| - | ACTIFSUB = 1 | ||
| - | ACTIFSUB { | ||
| - | ATagTitle.field = title | ||
| - | ATagParams = class=" | ||
| - | linkWrap = |<b class=" | ||
| - | ATagBeforeWrap = 1 | ||
| - | wrapItemAndSub = <li class=" | ||
| - | } | ||
| - | } | ||
| - | |||
| - | 2 < .1 | ||
| - | 2 { | ||
| - | wrap = <ul class=" | ||
| - | | ||
| - | SPC = 1 | ||
| - | SPC { | ||
| - | wrapItemAndSub.cObject = COA | ||
| - | wrapItemAndSub.cObject { | ||
| - | # Keine Trennline, falls erster Menüpunkt dieser Ebene: | ||
| - | 10 = TEXT | ||
| - | 10.value = <li class=" | ||
| - | 10.if.value.data = register: | ||
| - | 10.if.equals = 1 | ||
| - | | ||
| - | # ansonsten: | ||
| - | 20 = TEXT | ||
| - | 20.value = <li class=" | ||
| - | 20.if.value.data = register: | ||
| - | 20.if.equals = 1 | ||
| - | 20.if.negate = 1 | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | ---- | ||
| - | |||
| - | ===== Bootstrap 3 Navbar (mit Sprachmenü) ===== | ||
| - | |||
| - | <code typoscript> | ||
| - | |||
| - | </ | ||
| - | |||
| - | ---- | ||
| - | |||
| - | ===== Bootstrap 3 Navbar (Multilevel) ===== | ||
| - | |||
| - | Erweiterung der Navbar um weitere Ebenen. | ||
| - | |||
| - | Quelle: http:// | ||
| - | |||
| - | **TypoScript: | ||
| - | <code typoscript> | ||
| - | lib.bootstrapNav = COA | ||
| - | lib.bootstrapNav { | ||
| - | wrap = <nav class=" | ||
| - | |||
| - | 10 = COA | ||
| - | 10 { | ||
| - | wrap = <div class=" | ||
| - | 10 = COA | ||
| - | 10 { | ||
| - | # Hamburger-Icon: | ||
| - | wrap = <button type=" | ||
| - | 10 = TEXT | ||
| - | 10.value = <span class=" | ||
| - | 20 = TEXT | ||
| - | 20.value = <span class=" | ||
| - | 21 < .20 | ||
| - | 22 < .20 | ||
| - | } | ||
| - | |||
| - | # Firmenlogo: | ||
| - | 20 = TEXT | ||
| - | 20.value = Projektname | ||
| - | 20.typolink { | ||
| - | parameter = http:// | ||
| - | ATagParams = class=" | ||
| - | } | ||
| - | } | ||
| - | |||
| - | 20 = HMENU | ||
| - | 20 { | ||
| - | special = directory | ||
| - | special.value = 11 | ||
| - | wrap = <div id=" | ||
| - | | ||
| - | 1 = TMENU | ||
| - | 1 { | ||
| - | expAll = 1 | ||
| - | | ||
| - | NO = 1 | ||
| - | NO { | ||
| - | ATagTitle.field = title | ||
| - | wrapItemAndSub = < | ||
| - | } | ||
| - | |||
| - | CUR = 1 | ||
| - | CUR { | ||
| - | ATagTitle.field = title | ||
| - | wrapItemAndSub = <li class=" | ||
| - | } | ||
| - | | ||
| - | ACT < .CUR | ||
| - | | ||
| - | IFSUB = 1 | ||
| - | IFSUB { | ||
| - | ATagTitle.field = title | ||
| - | ATagParams = class=" | ||
| - | linkWrap = |<b class=" | ||
| - | ATagBeforeWrap = 1 | ||
| - | wrapItemAndSub = <li class=" | ||
| - | } | ||
| - | | ||
| - | ACTIFSUB = 1 | ||
| - | ACTIFSUB { | ||
| - | ATagTitle.field = title | ||
| - | ATagParams = class=" | ||
| - | linkWrap = |<b class=" | ||
| - | ATagBeforeWrap = 1 | ||
| - | wrapItemAndSub = <li class=" | ||
| - | } | ||
| - | } | ||
| - | |||
| - | 2 < .1 | ||
| - | 2 { | ||
| - | wrap = <ul class=" | ||
| - | | ||
| - | IFSUB.wrapItemAndSub = <li class=" | ||
| - | IFSUB.linkWrap > | ||
| - | ACTIFSUB.wrapItemAndSub = <li class=" | ||
| - | ACTIFSUB.linkWrap > | ||
| - | | ||
| - | SPC = 1 | ||
| - | SPC { | ||
| - | wrapItemAndSub.cObject = COA | ||
| - | wrapItemAndSub.cObject { | ||
| - | # Keine Trennline, falls erster Menüpunkt dieser Ebene: | ||
| - | 10 = TEXT | ||
| - | 10.value = <li class=" | ||
| - | 10.if.value.data = register: | ||
| - | 10.if.equals = 1 | ||
| - | | ||
| - | # ansonsten: | ||
| - | 20 = TEXT | ||
| - | 20.value = <li class=" | ||
| - | 20.if.value.data = register: | ||
| - | 20.if.equals = 1 | ||
| - | 20.if.negate = 1 | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | | ||
| - | 3 < .2 | ||
| - | 4 < .2 | ||
| - | 5 < .2 | ||
| - | } | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | **CSS:** | ||
| - | <code css> | ||
| - | .dropdown-submenu { | ||
| - | position: relative; | ||
| - | } | ||
| - | |||
| - | .dropdown-submenu> | ||
| - | top: 0; | ||
| - | left: 100%; | ||
| - | margin-top: -6px; | ||
| - | margin-left: | ||
| - | -webkit-border-radius: | ||
| - | -moz-border-radius: | ||
| - | border-radius: | ||
| - | } | ||
| - | |||
| - | .dropdown-submenu: | ||
| - | display: block; | ||
| - | } | ||
| - | |||
| - | .dropdown-submenu> | ||
| - | display: block; | ||
| - | content: " "; | ||
| - | float: right; | ||
| - | width: 0; | ||
| - | height: 0; | ||
| - | border-color: | ||
| - | border-style: | ||
| - | border-width: | ||
| - | border-left-color: | ||
| - | margin-top: 5px; | ||
| - | margin-right: | ||
| - | } | ||
| - | |||
| - | .dropdown-submenu: | ||
| - | border-left-color: | ||
| - | } | ||
| - | |||
| - | .dropdown-submenu.pull-left { | ||
| - | float: none; | ||
| - | } | ||
| - | |||
| - | .dropdown-submenu.pull-left> | ||
| - | left: -100%; | ||
| - | margin-left: | ||
| - | -webkit-border-radius: | ||
| - | -moz-border-radius: | ||
| - | border-radius: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | **JavaScript: | ||
| - | <code javascript> | ||
| - | $(document).ready( function() { | ||
| - | $(" | ||
| - | $(" | ||
| - | $(this).parent().addClass(" | ||
| - | return false; | ||
| - | }); | ||
| - | }); | ||
| - | </ | ||
