Bootstrap 4 Teknologi Web Dwi Susanto Topik Pengenalan
Bootstrap 4 Teknologi Web Dwi Susanto
Topik • Pengenalan Bootstrap • Instalasi • Pengenalan Layout • Mockup • Membuat Sesuai Mockup • Challenge
Instalasi
Instalasi #2
Instalasi #3
No Installation
What Bootstrap Offer
What Bootstrap Offer
Bootstrap source code
Basic Template <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Welcome to the Room of Woods</title> <link rel="shortcut icon" href="favicon. ico" /> </head> <body> </html>
Add Bootstrap Style <link rel="stylesheet" href="css/bootstrap. min. css"> <script src="js/jquery-3. 3. 1. min. js"></script> <script src="js/bootstrap. min. js"></script> Note: Download Jquery dan simpan dalam folder JS
Wireframe
Set Basic Layout <body> <nav class="navbar-expand-lg navbar-light bg-light"> </nav> <div class="container-fluid"> </div> <footer class="footer"> </footer> </body>
Set Navigation Bar
<nav class="navbar-expand-lg navbar-light bg-light"> <!--Brand--> <a class="navbar-brand col-md-2 mx-0 px-0" href=". /home. html"> Navigation Bar <img class="col-10 px-0" src=". / img/afi-logo. png" alt="company logo" /> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar. Supported. Content" aria-controls="navbar. Supported. Content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="navbar. Supported. Content"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href=". /home. html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown">Collection</a> </li> <li class="nav-item"> <a class="nav-link " href=". /contactus. html"> Contact Us</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
Dropdown Nav <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown">Collection</a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href=". /collections. html">Armchairs </a></li> <li><a class="dropdown-item" href=". /collections. html">Sofa</a></li> <li><a class="dropdown-item" href=". /collections. html">Side Table </a></li> <li><a class="dropdown-item" href=". /collections. html">Coffee Table </a></li> <li><a class="dropdown-item" href=". /collections. html">Table</a></li> <li><a class="dropdown-item" href=". /collections. html">Chair / Stool </a></li> <li><a class="dropdown-item" href=". /collections. html">Side Board </a></li> </ul> </li>
Content
Content Skeletal Structure <div class="container-fluid"> <div class="row"> </div> <div class="row" style="margin-top: 20 px"> <div class="col-lg-9"> </div> <div class="col-lg-3"> </div>
Content Welcome Message <div class="row mt-0"> <div class="col-md-12 text-center display-4"> Welcome to Ashley </div>
Result so far
first column of the second row <div class="col-lg-9"> <div class="card-body"> <img class="img-fluid" src="img/image 1. jpg"> <div class="page-header"> <h 3>Whatever you want <small>Posted on Oct 2</small></h 3> </div> <p></p> <p>Vestibulum porttitor, erat id mattis suscipit, ligula turpis malesuada neque, eget tempor augue felis at felis. Aliquam ut aliquam sem, maximus malesuada ipsum. Phasellus ullamcorper, dolor ullamcorper pulvinar rutrum, arcu augue mattis turpis, et semper nunc eros eget est. Mauris gravida purus sit amet consectetur ultrices. Nulla eget libero a ante placerat rutrum. Sed eros leo, laoreet quis interdum scelerisque, luctus vel elit. Curabitur mollis, eros vel tempus faucibus, ipsum lacus ultricies eros, ac fringilla tortor est sed lorem. Nulla ut dictum lacus, ultricies vestibulum sem. Mauris ut luctus nibh, ut aliquam ligula. Sed id erat ut nisi fermentum luctus in at magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam nec tristique tortor. Nulla a neque eget magna dapibus vehicula. Etiam id erat at risus condimentum semper ut sit amet nulla. Phasellus sodales pharetra maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p></p> <h 4>Some Heading</h 4> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </p> </div>
Result
The second column of the second row <div class="col-lg-3"> <div class="list-group"> <a href="#" class="list-group-item active"> <h 4 class="list-group-item-heading">Sub Header 1</h 4> <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum gravida mi, in condimentum augue fermentum vel. Phasellus et iaculis elit. Vivamus odio ligula, sodales ut finibus auctor, vehicula vel odio. </p> </a> <a href="#" class="list-group-item"> <h 4 class="list-group-item-heading">Sub Header 2</h 4> <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum gravida mi, in condimentum augue fermentum vel. Phasellus et iaculis elit. Vivamus odio ligula, sodales ut finibus auctor, vehicula vel odio. </p> </a> <a href="#" class="list-group-item"> <h 4 class="list-group-item-heading">Sub Header 3</h 4> <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vestibulum gravida mi, in condimentum augue fermentum vel. Phasellus et iaculis elit. Vivamus odio ligula, sodales ut finibus auctor, vehicula vel odio. </p> </a> </div>
Result
Footer <footer class="footer fixed-bottom bg-secondary"> <div class="container text-center mt-3 mb-3"> <span class="text-white">Site Built By XXX</span> </div> </footer>
Final Result
Challenge
- Slides: 28
