... just another site around the web ...





Möge eine Gesellschaft, die sich einzig auf die Macht des Geldes stützt, erzittern, wenn sie die Ohnmacht der Justiz gegenüber den Verflechtungen eines Systems erkennt, das den Erfolg, der alle Mittel heiligt, zum Gott erhebt.
- Honore de Balzac

Bootstrap


HelloWorld

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <h1>Hello World!</h1>
                </div>
            </div>
        </div>
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the sites load faster -->
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Container

<div class="container">
  ...
</div>
<div class="container-fluid">
  ...
</div>

Grid

<div class="row">
    <div class="col-md-12">...</div>
</div>
<div class="row">
    <div class="col-md-8">...</div>
    <div class="col-md-4">...</div>
</div>
<div class="row">
    <div class="col-md-6">...</div>
    <div class="col-md-6">...</div>
</div>
<div class="row">
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
    <div class="col-md-4">...</div>
</div>
<div class="row">
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
    <div class="col-md-2">...</div>
</div>

Jumbotron

<div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Tabelle responsive

<div class="table-responsive">
	<table class="table table-bordered">
		...
	</table>
</div>

Screensize-Hacks

<script>
#page {
    border: 0.2em solid silver;
}
#left, #right {
    display: none;
}
@media (min-width:600px) {
    body {
        margin: 1em;
        padding: 1em;
    }
    #page {
        border-radius: 10px;
    }
    #left, #right {
        display: block;
    }
}
</script>

<div class="container-fluid center-block">
    <div class="row">
        <div id="left" class="col-md-2"></div>
        <div id="page" class="col-md-8 col-sm-12 col-xs-12">
            ...Inhalt...
        </div>
        <div id="right" class="col-md-2"></div>
    </div>
</div>

Back-to-Top Button

<script>
    $(document).ready(function(){

        var back_to_top_button = ['<a class="btn btn-default btn-xs" style="display:block; position:fixed; bottom:10px; right:10px; border: 1px solid silver; background: white;" href="#top" title="Back to top"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a>'].join("");
        $("body").append(back_to_top_button);

        $(".back-to-top").hide();

        $(function() {

            $(window).scroll(function() {
                if ($(this).scrollTop() > 150) {
                    $(".back-to-top").fadeIn();
                } else {
                    $(".back-to-top").fadeOut();
                }
            });

            $(".back-to-top").click(function() {
                $("body,html").animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });
    });
</script>








Copyright © 2018

Datenschutz | Impressum