320NN Development Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.

====== Bootstrap ======

//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]]