"Aufgabe1"
Bootstrap 4.1.1 Snippet by Zoéneu

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Mein erstes Bootstrap Tutorial</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md"> <a class="navbar-brand" href="#">Hauptseite</a> <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="main-navigation"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Startseite</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Über Mich</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Kontakt</a> </li> </ul> </div> </nav> <div class="meintext"> <h1>Ich lerne Bootstrap auf LerneProgrammieren.de</h1> <p>Bootstrapo Lerno Waro Nocho Nio So Einfacho. Lorem ipsum dolor sit amet, Bootstrapo Lerno Waro Nocho Nio So Einfacho. Lorem ipsum dolor sit amet, Bootstrapo Lerno Waro Nocho Nio So Einfacho. Lorem ipsum dolor sit amet, Bootstrapo Lerno Waro Nocho Nio So Einfacho.</p> <meintext> <button class="btn btn-outline-secondary btn-lg">Geheimer Button</button> </meintext></div> </body> </html>
body { padding: 0; margin: 0; background: #f9f9f9; } /*-- Navigationsleiste --*/ .navbar { background:#005ea9; } .nav-link, .navbar-brand { color: white; cursor: pointer; } .nav-link { margin-right: 1em !important; } .nav-link:hover, .navbar-brand:hover { color: white; text-decoration: underline; } .navbar-collapse { justify-content: flex-end; } .meintext { left: 50%; position: absolute; top: 40%; transform: translate(-50%, -55%); text-align: center; } .meintext h1 { color: #005ea9; } .meintext p { color: #535353; font-size: 1.4rem; line-height: 1.6; }

Related: See More

Material Dashboard

Questions / Comments: