Bootstrap 4
---------------------------
1. What Is Bootstrap?
---------------------------
2. Your First Bootstrap Site
getbootstrap.com
download bootstrap
document
starter template
copy paste ask botstrap.html
browse the file
---------------------------
3. The Grid System
---------------------------
4. Introducing Navbars
---------------------------
5. Forms & Tables
---------------------------
6. Bootstrap Components
---------------------------
7. Modals, Popovers & Tooltips
---------------------------
8. ScrollSpy
---------------------------
9. Project - App Landing Page
---------------------------
10. The Free Bootstrap Themes
---------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
--------------
5.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
-------------------------------
5.3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">The first half!</div>
<div class="col-md-6">The second half!</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
--------------
5.4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>
<!--
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<h4>Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
☰
</button>
</nav>
-->
<div class="container" style="margin-top:70px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem ex, placerat eu felis in, eleifend sagittis ligula. Aenean mollis viverra ante, sit amet finibus nibh faucibus eu. Sed egestas elit quis nisl dictum, quis mollis urna condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus mauris dui, eu sodales metus bibendum id. Aliquam aliquet est vel interdum tristique. Quisque vestibulum eros non tortor sodales, quis commodo risus porta. Praesent vel dui mauris.
Maecenas a nisl ut est suscipit eleifend eget vitae urna. Donec varius eleifend velit, non gravida leo tristique vitae. Ut justo nunc, lobortis at arcu ac, iaculis vehicula orci. Maecenas malesuada dui vitae sagittis iaculis. Praesent lacus diam, consectetur a consectetur sit amet, egestas interdum nisi. Donec eget leo felis. Vivamus tincidunt, mauris at aliquam mollis, quam massa faucibus dui, eu luctus elit ipsum in purus. Suspendisse sollicitudin vulputate elit, ac venenatis arcu vulputate a. Morbi felis odio, rutrum malesuada rutrum in, elementum in purus. Donec quis tristique est.
Curabitur metus neque, dignissim sit amet nibh id, semper tristique nunc. Sed dictum mi eu lorem convallis convallis. Quisque sit amet nibh quis libero volutpat pharetra pretium elementum augue. In sollicitudin ante in viverra commodo. Nulla tempor consectetur fermentum. Donec quis diam in sapien efficitur aliquam nec vitae turpis. Curabitur lacinia tempus quam nec laoreet. Morbi sit amet orci tristique, tristique est et, suscipit ex. Etiam vel felis lobortis, porta elit sit amet, consectetur dui. Etiam eu risus venenatis risus ultricies interdum.
Mauris at ex sem. Mauris augue magna, tristique ac pellentesque vitae, porta volutpat nunc. Proin vitae laoreet turpis. Suspendisse aliquet, mi nec condimentum elementum, velit sapien viverra nulla, nec pulvinar erat ante eu nulla. Aliquam sem nunc, convallis ut finibus a, porttitor et dui. Cras enim felis, ultrices non risus ut, congue volutpat magna. Proin scelerisque, neque non blandit semper, augue eros commodo odio, ac dapibus odio nisi sed nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus urna mauris, congue in ex eget, commodo commodo nunc.
Phasellus tellus libero, ornare sed ornare sit amet, vulputate egestas sem. Sed sit amet lorem orci. Sed eros massa, feugiat nec pretium nec, volutpat id turpis. Nullam posuere tortor vel mauris vestibulum, fringilla viverra ante vestibulum. Nam porta non magna vel mollis. Nulla facilisi. Curabitur ut posuere sem. Pellentesque ligula est, imperdiet vel porttitor at, viverra eu nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem ex, placerat eu felis in, eleifend sagittis ligula. Aenean mollis viverra ante, sit amet finibus nibh faucibus eu. Sed egestas elit quis nisl dictum, quis mollis urna condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus mauris dui, eu sodales metus bibendum id. Aliquam aliquet est vel interdum tristique. Quisque vestibulum eros non tortor sodales, quis commodo risus porta. Praesent vel dui mauris.
Maecenas a nisl ut est suscipit eleifend eget vitae urna. Donec varius eleifend velit, non gravida leo tristique vitae. Ut justo nunc, lobortis at arcu ac, iaculis vehicula orci. Maecenas malesuada dui vitae sagittis iaculis. Praesent lacus diam, consectetur a consectetur sit amet, egestas interdum nisi. Donec eget leo felis. Vivamus tincidunt, mauris at aliquam mollis, quam massa faucibus dui, eu luctus elit ipsum in purus. Suspendisse sollicitudin vulputate elit, ac venenatis arcu vulputate a. Morbi felis odio, rutrum malesuada rutrum in, elementum in purus. Donec quis tristique est.
Curabitur metus neque, dignissim sit amet nibh id, semper tristique nunc. Sed dictum mi eu lorem convallis convallis. Quisque sit amet nibh quis libero volutpat pharetra pretium elementum augue. In sollicitudin ante in viverra commodo. Nulla tempor consectetur fermentum. Donec quis diam in sapien efficitur aliquam nec vitae turpis. Curabitur lacinia tempus quam nec laoreet. Morbi sit amet orci tristique, tristique est et, suscipit ex. Etiam vel felis lobortis, porta elit sit amet, consectetur dui. Etiam eu risus venenatis risus ultricies interdum.
Mauris at ex sem. Mauris augue magna, tristique ac pellentesque vitae, porta volutpat nunc. Proin vitae laoreet turpis. Suspendisse aliquet, mi nec condimentum elementum, velit sapien viverra nulla, nec pulvinar erat ante eu nulla. Aliquam sem nunc, convallis ut finibus a, porttitor et dui. Cras enim felis, ultrices non risus ut, congue volutpat magna. Proin scelerisque, neque non blandit semper, augue eros commodo odio, ac dapibus odio nisi sed nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus urna mauris, congue in ex eget, commodo commodo nunc.
Phasellus tellus libero, ornare sed ornare sit amet, vulputate egestas sem. Sed sit amet lorem orci. Sed eros massa, feugiat nec pretium nec, volutpat id turpis. Nullam posuere tortor vel mauris vestibulum, fringilla viverra ante vestibulum. Nam porta non magna vel mollis. Nulla facilisi. Curabitur ut posuere sem. Pellentesque ligula est, imperdiet vel porttitor at, viverra eu nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sem ex, placerat eu felis in, eleifend sagittis ligula. Aenean mollis viverra ante, sit amet finibus nibh faucibus eu. Sed egestas elit quis nisl dictum, quis mollis urna condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus mauris dui, eu sodales metus bibendum id. Aliquam aliquet est vel interdum tristique. Quisque vestibulum eros non tortor sodales, quis commodo risus porta. Praesent vel dui mauris.
Maecenas a nisl ut est suscipit eleifend eget vitae urna. Donec varius eleifend velit, non gravida leo tristique vitae. Ut justo nunc, lobortis at arcu ac, iaculis vehicula orci. Maecenas malesuada dui vitae sagittis iaculis. Praesent lacus diam, consectetur a consectetur sit amet, egestas interdum nisi. Donec eget leo felis. Vivamus tincidunt, mauris at aliquam mollis, quam massa faucibus dui, eu luctus elit ipsum in purus. Suspendisse sollicitudin vulputate elit, ac venenatis arcu vulputate a. Morbi felis odio, rutrum malesuada rutrum in, elementum in purus. Donec quis tristique est.
Curabitur metus neque, dignissim sit amet nibh id, semper tristique nunc. Sed dictum mi eu lorem convallis convallis. Quisque sit amet nibh quis libero volutpat pharetra pretium elementum augue. In sollicitudin ante in viverra commodo. Nulla tempor consectetur fermentum. Donec quis diam in sapien efficitur aliquam nec vitae turpis. Curabitur lacinia tempus quam nec laoreet. Morbi sit amet orci tristique, tristique est et, suscipit ex. Etiam vel felis lobortis, porta elit sit amet, consectetur dui. Etiam eu risus venenatis risus ultricies interdum.
Mauris at ex sem. Mauris augue magna, tristique ac pellentesque vitae, porta volutpat nunc. Proin vitae laoreet turpis. Suspendisse aliquet, mi nec condimentum elementum, velit sapien viverra nulla, nec pulvinar erat ante eu nulla. Aliquam sem nunc, convallis ut finibus a, porttitor et dui. Cras enim felis, ultrices non risus ut, congue volutpat magna. Proin scelerisque, neque non blandit semper, augue eros commodo odio, ac dapibus odio nisi sed nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus urna mauris, congue in ex eget, commodo commodo nunc.
Phasellus tellus libero, ornare sed ornare sit amet, vulputate egestas sem. Sed sit amet lorem orci. Sed eros massa, feugiat nec pretium nec, volutpat id turpis. Nullam posuere tortor vel mauris vestibulum, fringilla viverra ante vestibulum. Nam porta non magna vel mollis. Nulla facilisi. Curabitur ut posuere sem. Pellentesque ligula est, imperdiet vel porttitor at, viverra eu nisl.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
------------
5.5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<form>
<fieldset class="form-group row">
<label for="email" class="col-sm-2">Email address</label>
<div class="col-sm-10">
<input id="email" type="email" class="form-control">
</div>
</fieldset>
<fieldset class="form-group row">
<label for="password" class="col-sm-2">Password</label>
<div class="col-sm-10">
<input type="password" id="password" class="form-control">
</div>
</fieldset>
<fieldset class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
--------------
5.6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<progress class="progress progress-success progress-striped" value="35" max="100">35%</progress>
<div class="row">
<div class="col-sm-3">
<div class="card card-block">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card card-block">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card card-block">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="card card-block">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/en/a/aa/Bart_Simpson_200px.png" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
--------------------
5.7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-name="rob">
Email Rob
</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-name="kirsten">
Email Kirsten
</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-name="tommy">
Email Tommy
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?" data-placement="bottom">Click to toggle popover</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" id="myTooltip">
Tooltip on bottom
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var recipient = button.data('name')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
})
$("#myModal").on("hidden.bs.modal", function (event) {
alert("Modal closed!")
})
$('[data-toggle="popover"]').popover()
$('[data-toggle="tooltip"]').tooltip()
$("#myTooltip").on('shown.bs.tooltip', function() {
alert("Tooltip displayed!")
})
</script>
</body>
</html>
--------------
5.8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<style>
body {
position: relative;
}
#one {
margin-top:70px;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbar-example" data-offset="70">
<nav class="navbar navbar-default bg-faded navbar-fixed-top" id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item active">
<a class="nav-link active" href="#one">One</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#two">Two</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#three">Three</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#four">Four</a>
</li>
</ul>
</nav>
<h2 id="one">Section 1</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum risus sed velit pellentesque placerat. Sed facilisis, dolor in imperdiet dapibus, tortor leo euismod ex, pharetra ultrices mi mauris ac diam. In hac habitasse platea dictumst. Mauris non auctor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt orci vel posuere consectetur. Aenean tristique, dui ac facilisis accumsan, eros risus hendrerit felis, sit amet eleifend velit neque ac felis. Aenean mauris dui, pretium at volutpat vel, semper vel est. Phasellus et tellus eros. Nulla in ullamcorper libero, eu fermentum eros. Phasellus congue diam in neque fringilla, eu aliquam ligula facilisis. Praesent at consequat nibh, ut commodo libero.
Pellentesque ac cursus nibh. Etiam magna ex, ultricies et egestas id, scelerisque et nisi. Aliquam in mattis velit. Vivamus semper tempor fermentum. Donec lorem sapien, pulvinar a laoreet in, ultrices quis turpis. Sed ornare faucibus auctor. Sed est metus, feugiat cursus porta et, posuere non sem. Maecenas sollicitudin sed massa sed accumsan. Maecenas id nisl vitae odio dignissim feugiat in sit amet mi. Vestibulum rhoncus elementum nunc pharetra aliquet.
Morbi commodo urna id nibh sollicitudin, et ultrices mi dapibus. Nunc gravida eros vel hendrerit elementum. Duis lobortis hendrerit eros nec tempus. Sed euismod euismod lectus, nec viverra ipsum tempor tempor. Suspendisse pulvinar convallis facilisis. Aenean dapibus tortor id sem semper, sed tempus nisl tempus. Ut varius enim id sodales fringilla. Maecenas varius semper rhoncus. Cras sed interdum ex.</div>
<h2 id="two">Section 2</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum risus sed velit pellentesque placerat. Sed facilisis, dolor in imperdiet dapibus, tortor leo euismod ex, pharetra ultrices mi mauris ac diam. In hac habitasse platea dictumst. Mauris non auctor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt orci vel posuere consectetur. Aenean tristique, dui ac facilisis accumsan, eros risus hendrerit felis, sit amet eleifend velit neque ac felis. Aenean mauris dui, pretium at volutpat vel, semper vel est. Phasellus et tellus eros. Nulla in ullamcorper libero, eu fermentum eros. Phasellus congue diam in neque fringilla, eu aliquam ligula facilisis. Praesent at consequat nibh, ut commodo libero.
Pellentesque ac cursus nibh. Etiam magna ex, ultricies et egestas id, scelerisque et nisi. Aliquam in mattis velit. Vivamus semper tempor fermentum. Donec lorem sapien, pulvinar a laoreet in, ultrices quis turpis. Sed ornare faucibus auctor. Sed est metus, feugiat cursus porta et, posuere non sem. Maecenas sollicitudin sed massa sed accumsan. Maecenas id nisl vitae odio dignissim feugiat in sit amet mi. Vestibulum rhoncus elementum nunc pharetra aliquet.
Morbi commodo urna id nibh sollicitudin, et ultrices mi dapibus. Nunc gravida eros vel hendrerit elementum. Duis lobortis hendrerit eros nec tempus. Sed euismod euismod lectus, nec viverra ipsum tempor tempor. Suspendisse pulvinar convallis facilisis. Aenean dapibus tortor id sem semper, sed tempus nisl tempus. Ut varius enim id sodales fringilla. Maecenas varius semper rhoncus. Cras sed interdum ex.</div>
<h2 id="three">Section 3</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum risus sed velit pellentesque placerat. Sed facilisis, dolor in imperdiet dapibus, tortor leo euismod ex, pharetra ultrices mi mauris ac diam. In hac habitasse platea dictumst. Mauris non auctor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt orci vel posuere consectetur. Aenean tristique, dui ac facilisis accumsan, eros risus hendrerit felis, sit amet eleifend velit neque ac felis. Aenean mauris dui, pretium at volutpat vel, semper vel est. Phasellus et tellus eros. Nulla in ullamcorper libero, eu fermentum eros. Phasellus congue diam in neque fringilla, eu aliquam ligula facilisis. Praesent at consequat nibh, ut commodo libero.
Pellentesque ac cursus nibh. Etiam magna ex, ultricies et egestas id, scelerisque et nisi. Aliquam in mattis velit. Vivamus semper tempor fermentum. Donec lorem sapien, pulvinar a laoreet in, ultrices quis turpis. Sed ornare faucibus auctor. Sed est metus, feugiat cursus porta et, posuere non sem. Maecenas sollicitudin sed massa sed accumsan. Maecenas id nisl vitae odio dignissim feugiat in sit amet mi. Vestibulum rhoncus elementum nunc pharetra aliquet.
Morbi commodo urna id nibh sollicitudin, et ultrices mi dapibus. Nunc gravida eros vel hendrerit elementum. Duis lobortis hendrerit eros nec tempus. Sed euismod euismod lectus, nec viverra ipsum tempor tempor. Suspendisse pulvinar convallis facilisis. Aenean dapibus tortor id sem semper, sed tempus nisl tempus. Ut varius enim id sodales fringilla. Maecenas varius semper rhoncus. Cras sed interdum ex.</div>
<h2 id="four">Section 4</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum risus sed velit pellentesque placerat. Sed facilisis, dolor in imperdiet dapibus, tortor leo euismod ex, pharetra ultrices mi mauris ac diam. In hac habitasse platea dictumst. Mauris non auctor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tincidunt orci vel posuere consectetur. Aenean tristique, dui ac facilisis accumsan, eros risus hendrerit felis, sit amet eleifend velit neque ac felis. Aenean mauris dui, pretium at volutpat vel, semper vel est. Phasellus et tellus eros. Nulla in ullamcorper libero, eu fermentum eros. Phasellus congue diam in neque fringilla, eu aliquam ligula facilisis. Praesent at consequat nibh, ut commodo libero.
Pellentesque ac cursus nibh. Etiam magna ex, ultricies et egestas id, scelerisque et nisi. Aliquam in mattis velit. Vivamus semper tempor fermentum. Donec lorem sapien, pulvinar a laoreet in, ultrices quis turpis. Sed ornare faucibus auctor. Sed est metus, feugiat cursus porta et, posuere non sem. Maecenas sollicitudin sed massa sed accumsan. Maecenas id nisl vitae odio dignissim feugiat in sit amet mi. Vestibulum rhoncus elementum nunc pharetra aliquet.
Morbi commodo urna id nibh sollicitudin, et ultrices mi dapibus. Nunc gravida eros vel hendrerit elementum. Duis lobortis hendrerit eros nec tempus. Sed euismod euismod lectus, nec viverra ipsum tempor tempor. Suspendisse pulvinar convallis facilisis. Aenean dapibus tortor id sem semper, sed tempus nisl tempus. Ut varius enim id sodales fringilla. Maecenas varius semper rhoncus. Cras sed interdum ex.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
-----------------
5.9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
.jumbotron {
background-image: url(background.jpg);
text-align: center;
margin-top: 50px;
}
#email {
width: 300px;
}
#appSummary {
text-align: center;
margin-top:50px;
margin-bottom: 50px;
}
.card-img-top {
width: 100%;
}
#appStoreIcon {
width: 200px;
}
#footer {
background-color: aqua;
padding-top: 150px;
margin-top: 50px;
text-align: center;
padding-bottom: 150px;
}
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="150">
<nav class="navbar navbar-light bg-faded navbar-fixed-top" id="navbar">
<a class="navbar-brand" href="#">MyApp</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#jumbotron">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Download The App</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="email" placeholder="Email">
<input class="form-control" type="password" placeholder="Password">
<button class="btn btn-success" type="submit">Login</button>
</form>
</nav>
<div class="jumbotron" id="jumbotron">
<h1 class="display-3">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="m-y-2">
<p>Want to know more? Join our mailing list!</p>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<div class="input-group">
<div class="input-group-addon">@</div>
<input type="email" class="form-control" id="email" placeholder="Your email">
</div>
</div>
<button type="submit" class="btn btn-primary">Sign up</button>
</form>
</div>
<div class="container">
<div class="row" id="appSummary">
<h1>Why This App Is Awesome</h1>
<p class="lead">Summary, once again, of your app's awesomeness</p>
</div>
</div>
<div class="container" id="about">
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="fatherandson.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title"><i class="fa fa-anchor"></i> Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="fatherandson.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title"><i class="fa fa-bicycle"></i> Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="fatherandson.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title"><i class="fa fa-birthday-cake"></i> Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="row">
<h2>Download the app!</h2>
<p class="lead">Really, why should I download this app??</p>
<p><a href=""><img id="appStoreIcon" src="App-Store-Icon.png"></a></p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
---------------
No comments:
Post a Comment