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





Nur wenn wir unseren Egoismus ablegen und beginnen, uns in Geduld und Demut dem Wohle anderer zu widmen, werden wir befreit von all unseren Leiden und Zwängen.
- Dalai Lama

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

Impressum