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.

Quelle: http://bootsnipp.com/snippets/featured/multi-level-navbar-menu

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
  }
}

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;
}

JavaScript: 

$(document).ready( function() {
  $("li.dropdown-submenu > a").on("click", function(){
    $("li.dropdown-submenu").removeClass("active");
    $(this).parent().addClass("active");
    return false;
  });
});
typo3/templating/bootstrap.1433874776.txt.gz · Zuletzt geändert: (Externe Bearbeitung)

Seiten-Werkzeuge