ReLast - Klassik

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 © 2024

Datenschutz | Impressum