article
.container / .row-fluid / article span8 .well
Quellcode
- Die Ordner (img, css, js) mit ihren Dateien, von Bootstrap und dir, müssen natürlich im Root-Verzeichnis angelegt sein.
jQuery wird über den extern Link geladen. - img = glyphicons-halflings.png | glyphicons-halflings-white.png
- css = bootstrap.min.css | bootstrap-responsive.min.css | your-template.css
- js = html5shiv.js | respond.min.js | bootstrap.min.js | your-template.js
Download bei Bootstrap 2.3.2 | html5shiv.js | response.min.js
Die your-template Dateien erstellst du selbst. Achte auf die Dateien Reihenfolge, welche beim Laden wichtig ist (von oben nach unten).
Grundaufbau index.html
Für die gesamte Zeile 21 "BODY (Dein HTML Inhalt...)" wird der dafür gekenzeichnete "Body Inhalt" HTML5 Code eingetragen.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 & Bootstrap 2.3.2 Demo</title> <!-- dein Titel der Seite -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link type="text/css" rel="stylesheet" href="css/your-template.css"> <!-- deine CSS Datei (???.css) -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- BODY (Dein HTML Inhalt...) -->
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <!-- jQuery wird extern geladen -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/your-template.js"></script> <!-- deine JavaScript Datei (???.js) -->
</body>
</html>
HTML5 BODY (Dein HTML Inhalt...)
HTML5 & Bootstrap 2.3.2
w3developer.de / demopageSubtitle from Page...
Active Page .container / section .well .well-small
section
.container / .row-fluid / section .span4 .offset1 .well
section
.container / .row-fluid / section .span5 .offset1 .well
<a class="scrollTop btn btn-info" href="#" data-toggle="tooltip" title="Zurück zum Seitenanfang"><i class="icon-eject"></i></a>Copyright © 2013 • w3developer.de Design & Developing by w3developer.de
CSS3 your-template.css
/* ==========================================
DEFAULT
========================================== */
.marginTop {
margin-top: 20px;
}
#copyright {
color: #999;
font-size: 11px;
}
.scrollTop {
display: none;
opacity: 0.8;
}
.scrollTop:hover {
opacity: 1;
}
/* ==========================================
BOOTSTRAP OVERRIDE
========================================== */
body {
background-color: #FFFFFF; /* kein weiß zu sehen, wird durch MediaQueries überschrieben */
}
/* ==========================================
MEDIA QUERIES
========================================== */
/* Landscape phones and down (col-xs) */
@media (max-width: 480px) {
body {
background-color: #fdfdfd;
}
}
/* Landscape phone to portrait tablet (col-xs) */
@media (min-width: 481px) and (max-width: 767px) {
body {
background-color: #fbfbfb;
}
}
/* Portrait tablet to landscape and desktop (col-sm) */
@media (min-width: 768px) and (max-width: 979px) {
body {
background-color: #f9f9f9;
}
}
/* Desktop default (col-md) */
@media (min-width: 980px) and (max-width: 1199px) {
body {
background-color: #fbfbfb;
}
}
/* Large desktop (col-lg) */
@media (min-width: 1200px) {
body {
background-color: #fdfdfd;
}
}
JavaScript your-template.js
$(document).ready(function($) {
// dein jQuery/Bootstrap JS
// zB. Tooltip-Bootstrap
$("[data-toggle=tooltip]").tooltip();
// zB. SCROLL TOP JS jQuery
$(function() {
var scrollTop = '.scrollTop';
var a_scrollTop = 'a.scrollTop';
$(scrollTop).css({
'position':'fixed',
'bottom':'15px',
'right':'3px',
'z-index':'1000',
'display':'none'
});
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(scrollTop).fadeIn();
} else {
$(scrollTop).fadeOut();
}
});
$(a_scrollTop).click(function() {
$('body,html').animate({
scrollTop : 0
}, 800);
return false;
});
});
});
})(jQuery);
ScreenShot Vorschau auf Document
