Nach einigen Recherchen, welches CSS-Framework ich für neue Homepages verwenden soll, habe ich mich für Twitters „Bootstrap“ entschieden. YAML, Blueprint, Unsemantic sind nicht so weit entwickelt und Foundation v4 basiert nicht auf jQuery, welches standardmäßig mein JavaScript-Framework darstellt.
Die Homepage des Frameworks bedindet sich hier:
Ein „Playground“ zum ausprobieren aller Elemente hier:
Das Grundgerüst einer Beispielseite sieht so aus:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test-Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.png">
<!-- Bootstrap -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/meine_styles.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--if lt IE 9>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<!endif-->
</head>
<body style="padding-top: 40px">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Blubb</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Unternehmen</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap Test-Template</h1>
<p class="lead">Ein Beispiel Bootstrap-Dokument.</p>
</div>
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>— mehr folgt in Kürze —
Loading…