Desain Web 1 Oleh Dita Rizki Amalia.

Presentasi berjudul: "Desain Web 1 Oleh Dita Rizki Amalia."— Transcript presentasi:

1 Desain Web 1 Oleh Dita Rizki Amalia

2 Pertemuan Sesi 12-13 Bootstrap Pagination List Group Bootstrap Menu
Bootstrap Navigation

3 Bootstrap Pagination Biasanya digunakan untuk artikel selanjutnya atau sebelumnya atau lain sebagainya. Implementasi dan penggunaannya seperti ini. <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>

4 Bootstrap Pagination Active Pagination Implementasinya:
<ul class="pagination"> <li><a href="#">1</a></li> <li class="active"> <a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>

5 Bootstrap Pagination Disabble pagination
Disabble pagination memungkinkan salah satu atau beberapa pagination dissable / tidak bisa di klick Implementasinya: <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> <li><a href="#">5</a></li> </ul>

6 Bootstrap Pagination Size pagination
Bagaiamana jika kita ingin mengubah ukuran pagination seperti contoh ini. Implementasinya: <ul class="pagination pagination-lg"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <ul class="pagination pagination-sm"> <li><a href="#">1</a></li> <li> <a href="#">2</a></li>

7 Bootstrap Pagination Bootstrap Pager
Apa itu pager di bootstrap ? pager hampir sama dengan pagination. Contohnya seperti ini. Implementasinya: <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>

8 List Group Implementasinya begini. <ul class="list-group">
<li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul>

9 List Group List group dengan badges Implementasinya begini.
<ul class="list-group"> <li class="list-group-item"> <span class="badge">12</span> New</li> <span class="badge">5</span> Deleted</li> <span class="badge">3</span> Warnings</li> </ul>

10 List Group Active dan Linked List Group Implementasinya begini.
<div class="list-group"> <a href="#" class="list-group-item active">First item</a> <a href="#" class="list-group-item">Second item</a> <a href="#" class="list-group-item">Third item</a> </div>

11 List Group Warna list group Implementasinya begini.
<ul class="list-group"> <li class="list-group-item list-group-item-success"> First item</li> <li class="list-group-item list-group-item-info"> Second item</li> <li class="list-group-item list-group-item-warning"> Third item</li> <li class="list-group-item list-group-item-danger"> Fourth item</li> </ul>

12 List Group Warna list group Implementasinya begini.
<ul class="list-group"> <li class="list-group-item list-group-item-success"> First item</li> <li class="list-group-item list-group-item-info"> Second item</li> <li class="list-group-item list-group-item-warning"> Third item</li> <li class="list-group-item list-group-item-danger"> Fourth item</li> </ul>

13 Latihan Buatlah dua buah halaman web gunakan variasi bootstrap berbeda untuk link kedua halaman web tersebut: Gunakan Pagination untuk halaman pertama Gunakan List group untuk halaman kedua

14 Bootstrap Menu Tabs Menu Implementasinya begini.
<ul class="nav nav-tabs"> <li class="active"> <a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul>

15 Bootstrap Menu Tabs Dengan Dropdown Implementasinya begini.
<ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Menu 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul>

16 Bootstrap Menu Pills menu Implementasinya begini.
<ul class="nav nav-pills"> <li class="active"> <a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul>

17 Bootstrap Menu Pills menu vertikal Implementasinya begini.
<div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="#">Home</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div>

18 Bootstrap Menu Pills dengan dropdown menu Implementasinya begini.
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Menu 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li>

19 Bootstrap Navigation Navbar ialah menu di header, contohnya seperti ini. Implementasinya begini. <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </nav> </body>

20 Bootstrap Navigation Navbar di bootstrap ada dua style, yaitu class .navbar-default dan class .navbar-inverse. Implementasinya begini. <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </nav>

21 Bootstrap Navigation Fixed navbar
Fixed berarti dia posisinya tetap, ada dua style fixed yaitu top / atas dan buttom / bawah, class nya ini .navbar-fixed-top ( untuk fixed atas ) dan class .navbar-fixed-buttom Implementasinya begini. <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </nav>

22 Bootstrap Navigation Navbar aligned
Bagaimana kalau kita ingin menu di navbar yang kita buat berada di kanan / align kana ? kita cukup memenggil class .bavbar-right Implementasinya begini. <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </nav>

23 Bootstrap Navigation Collapsing navbar menu
Apa itu collapsing navbar menu ? collapsing navbar menu tidak berpengaruh jika di buka di device yang berosolusi besar seperti laptop, notebook dsb, namun akan terlihat ketika di buka di device yang berosulusi kecil atau screen nya kecil seperti handphone dsb.

24 Bootstrap Navigation Collapsing navbar menu Implementasinya begini.
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#myNavbar"> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul>

25 Bootstrap Navigation Collapsing navbar menu Implementasinya begini.
<ul class="nav navbar-nav navbar-right"> <li><a href="#"> <span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </nav>

26 Latihan Buatlah dua buah halaman web gunakan variasi bootstrap berbeda untuk menu halaman web tersebut: Gunakan navigation dropdown untuk halaman pertama Gunakan collapsing menu bar untuk halaman kedua