Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- bootstrap:start [2015-01-18 12:31] – angelegt a.kamola
+++ bootstrap:start [2015-07-20 17:54] (aktuell) – "HTML" in "Responsive Design" geändert, "Mehrere Menüs zu einem vereinen" eingefügt a.kamola
@@ Zeile 2: / Zeile 2: @@
 //Bootstrap// ist ein [[html:start|HTML-]], [[css:start|CSS-]] und [[javascript:start|JavaScript-Framework]] von den [[twitter:start|Twitter-Entwicklern]].
+===== Responsive Design =====
+==== Elemente bei bestimmten Bildschirmgrößen verstecken ====
+Das Ausblenden bzw. Verstecken von Elementen bei bestimmten Bildschrimgrößen folgt in Bootstrap einem umgekehrten Denk-Ansatz: Bei welchen Bildschirmgrößen sind welche Elemente **sichtbar**?
+^ Sichtbar auf … ^  lg  ^  md  ^  sm  ^
+| visible-lg |   x  |      |      |
+| visible-md |      |   x  |     |
+| visible-sm |      |      |  x   |
+Quelle: [[https://github.com/twbs/bootstrap/issues/8883|GitHub: Bootstrap: Issue #8883]]
+==== Mehrere Menüs zu einem vereinen ====
+<code javascript>
+$('#example-navbar-1').on('show.bs.collapse', function() {
+	$('#example-navbar-1').append($('#sidebar').html());
+	$('#example-navbar-1 ul').last().removeClass('nav-pills nav-stacked').addClass('navbar navbar-nav');
+});
+$('#example-navbar-1').on('hidden.bs.collapse', function() {
+	$('#example-navbar-1 ul:last-child').remove();
+});
+$(window).on('resize', function() {
+	if (window.innerWidth > 768) {
+		$('#example-navbar-1').collapse('hide');
+	}
+});
+</code>
+Quelle: [[http://stackoverflow.com/questions/21209879/bootstrap-3-multiple-menus-collapse-into-one-for-mobile/21215137#21215137|Stack Overflow: Bootstrap 3: Multiple menus collapse into one for mobile]]
 ===== Links =====
   * [[http://getbootstrap.com/|Bootstrap]]