Facebook Ilmuwebsite

Belajar Bootstrap Dasar Bag.2 : Bootswatch, Custom Style Bootstrap

Pada pertemuan sebelumnya kita telah belajar sedikit sekali mengenai bootstrap.

Bagi Anda yang belum mempelajari bagian 1 silahkan klik http://desainweb.ilmuwebsite.com/2015/03/belajar-bootstrap-dasar-bag1-membuat.html.

Oke, untuk sesi kali ini kita akan mengenal varian dari bootstrap. Varian disini bukan berarti jenis-jenis bootstrap berdasarkan versinya, tapi lebih kepada stylenya, baik bentuk dan pewarnaan dari setiap element-element bawaan bootstrap. Maksudnya bagaimana?

Misalnya seperti ini contohnya, pada bootstrap terdapat header navbar, dengan warna default seperti pada gambar di bawah ini ...


Sedangkan bootswatch memiliki aneka varian warna, yang mungkin saja bisa jadi style yang Anda inginkan ada pada daftar bootstrap stylenya. Anda bisa cek pada bootswatch ...



Untuk menggunakannya mudah sekali, tinggal download saja salah satu varian style yang ingin Anda gunakan, lalu sisipkan dibagian tag headnya seperti ini, dengan menggantikan bootstrap yang sebelumnya sudah di includekan. Jadi cukup bootstrap yang Anda download dari bootswatch saja yang nantinya bisa Anda gunakan.



Setelah itu kita bisa langsung mencobanya, baik kita coba terlebih dahulu membuat menu yang responsive yang mana menu ini adalah elemen bawaan bootstrap. Silahkan buat struktur html yang sudah disisipkan bootstrap custom stylenya nya.  Oh iya jangan sampai lupa untuk mendownload bootstrap terbarunya di sini https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip, yang saat ini saya gunakan adalah versi 3.3.7, meski ada versi 4. Tapi saya sarankan kita menggunakan yang versi ini terlebih dahulu untuk keseragaman pembelajaran. Kedepannya Anda bisa bereksplorasi sendiri. Seperti ini persiapannya ...
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Belajar Bootstrap Bagian 2</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Letakkan custom style dari bootswatch.com di folder css, sehingga nantinya akan menimpa file bootstrap.min.css, silahkan replace saja, sehingga struktur direktorinya nanti akan seperti ini



Lalu kita gunakan elemen navbar, silahkan masuk ke dalam http://getbootstrap.com/components/#navbar-default  yang telah disediakan oleh bootstrap. Seperti ini



<html lang="en">
  <head>
    
    
    
    <title>Belajar Bootstrap Bagian 2</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet"></link>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

 <nav class="navbar navbar-default">
   <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
   <span class="sr-only">Toggle navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Brand</a>
  </div>
<!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
<li class="active"><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Link</a></li>
<li class="dropdown">
     <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#" role="button">Dropdown <span class="caret"></span></a>
     <ul class="dropdown-menu">
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Action</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Another action</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Separated link</a></li>
<li class="divider" role="separator"></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
   <div class="form-group">
     <input class="form-control" placeholder="Search" type="text" />
   </div>
<button class="btn btn-default" type="submit">Submit</button>
    </form>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Link</a></li>
<li class="dropdown">
     <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#" role="button">Dropdown <span class="caret"></span></a>
     <ul class="dropdown-menu">
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Action</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Another action</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Something else here</a></li>
<li class="divider" role="separator"></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2181102712448131086#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
   </div>
<!-- /.container-fluid -->
 </nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

hasilnya nanti akan seperti ini


Apabila Anda coba dibrowser maka jika browser di resize, atau ketika Anda menggunakan device yang resolusi layarnya kecil maka dia otomatis akan menyesuaikan menunya ...



Mudah sekali bukan ya ???

Selamat bereksplorasi, untuk lebih jauh silahkan Anda lihat manual guidenya di sini http://getbootstrap.com/components/

Salam

Loka Dwiartara
ilmuwebsite.com

Posting Komentar

1 Komentar

  1. Terimakasih ilmunya. Menunggu materi bagian 3, kalo bisa sekalian sama pengaplikasian bootstrap di cms macam wordpress.

    BalasHapus