Seri-2a Bootstrap: Semudah Apa Bootstrap?

Akan Membuat apa sih..

Materi dan source code bisa anda dapatkan di http://ilmukomputer.org/wp-content/uploads/2015/04/irul-seri2a-bootstrap.zip

Posting sebelumnya saya sudah memberikan sedikit wawasan terkait dengan template dasar Bootstrap. Sekarang saya akan membahas kemudahan yang anda peroleh ketika anda menggunakan framework ini. Tapi, materi yang saya berikan di seri kedua ini hanya bertujuan untuk memberikan pandangan umum cara menggunakan framework ini, untuk detailnya anda bisa mengikuti seri-seri selanjutnya.

Saya memberikan sedikit contoh kasus cara menyusun tampilan pada gambar berikut ini.

tampilan_web

Pada tampilan web di atas terdiri dari navigasi, jumbotron, dan konten yang tersusun menggunakan grid. Mari kita bahas satu persatu.Pada tampilan web di atas terdiri dari navigasi, jumbotron, dan konten yang tersusun menggunakan grid. Mari kita bahas satu persatu.

Navigasi

Ada  banyak gaya template navigasi di Bootstrap, anda bisa mengatur tata letak menunya, misalnya form search navigasi bisa diletakkan di sisi kiri dan menu yang sebelah kiri bisa dipindah ke kanan atau sebaliknya.
Jika anda jeli ada satu menu yang disebelahnya memiliki ikon. Sebenarnya, ikon tersebut bukan gambar tapi sebuah font, Bootstrap telah menyediakan font yang berbentuk ikon tersebut, ikon ini merupakan produk berbayar dari Glyphicons (website http://glyphicons.com/) tapi creator nya memberikannya free untuk pengguna Bootstrap. Sayangnya, disini tidak akan membahas bagaimana meng-customize ikon tersebut, tapi hanya memberi tahu bagaimana cara menggunakannya di Bootstrap.

Jumbotron

Fungsi dari jumbotron sendiri adalah untuk menginformasikan sesuatu yang penting, setiap pengunjung web harus tahu informasi tersebut ketika pertama kali mengunjungi web. Oleh karenanya, jumbotron biasanya diletakkan di halaman homepage.  Selain itu, tag heading (h1, h2, dan seterusnya) yang berada di jumbotron akan diperbesar ukurannya dari ukuran normal, dengan tujuan memberikan efek eye catching bagi pengunjung.

Konten

Konten,  bisa dikatakan sebagai isi dari web, tidak lagi menggunakan tabel untuk mengatur tata letak layoutnya namun menggunakan layer yang memanfaatkan sistem grid. Lebih detail dengan berbagai contoh terkait sistem grid bisa dilihat di http://960.gs/. Ukuran lebar grid sistem adalah 960 pixel, dari ukuran tersebut dibelah-belah lagi ke dalam 12 dan 16 kolom, dengan menambahkan ukuran tertentu pada margin dan padding. Sedangkan Bootstrap sendiri menggunakan sistem grid 960 dan 12 kolom. Pembahasan grid akan dibahas pada seri-seri berikutnya.

Mari mulai membuat

Ada tiga hal yang harus anda ketahui terlebih dahulu pada framework ini. Bootstrap membagi templatenya ke dalam tiga bagian, diantaranya: CSS, Component dan Javascript . CSS terkait dengan tampilan dan tata letak, kita bisa mengibaratkan seperti tata ruang dan gaya rumah kita, contoh grid sistem. Component terkait dengan item-item yang sudah jadi yang bisa langsung digunakan, kita bisa mengibaratkan seperti perabotan yang harus ada di rumah kita (pintu, jendela, dan lain-lain), contoh menu dan jumbotron. Yang terakhir Javascript, ia terkait dengan polesan yang memperindah item-item yang ada di component, kita bisa mengibaratkannya seperti ornamen-ornamen yang ada di rumah kita, untuk contoh pada kasus ini belum ada, nanti akan kita bahas lebih lanjut pada seri berikutnya.
Baik, saya pikir anda semua sudah tahu dan sudah memiliki bayangan apa yang akan kita buat. Langsung saja kita membangun tampilan seperti gambar diatas.

  1. Persiapkan file yang sudah disisipkan pada seri Bootstrap sebelumnya, atau anda bisa mendownloadnya di http://ilmukomputer.org/2015/04/22/seri-1-bootstrap-persiapkan-dirimu/2.
  2. Kita membuat navigasinya terlebih dahulu, anda bisa langsung copy paste di website Bootstrap menu Component > Navbar atau di laman http://getbootstrap.com/components/#navbar tepat di bawah tag body namun terlebih dahulu hapus tag h1.
  3.  <!-- menu -->
     <nav class="navbar navbar-default">
    <div class="container-fluid">
     <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
     <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="#">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="#">Link <span class="sr-only">(current)</span></a></li>
    	<li><a href="#">Link</a></li>
    	<li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
    	<li><a href="#">Action</a></li>
    	<li><a href="#">Another action</a></li>
    	<li><a href="#">Something else here</a></li>
    	<li class="divider"></li>
    	<li><a href="#">Separated link</a></li>
    	<li class="divider"></li>
    	<li><a href="#">One more separated link</a></li>
    </ul>
    </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
     <input type="text" class="form-control" placeholder="Search"></div>
    <button type="submit" class="btn btn-default">Submit</button>
     </form>
    <ul class="nav navbar-nav navbar-right">
    	<li><a href="#">Link</a></li>
    	<li class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
    	<li><a href="#">Action</a></li>
    	<li><a href="#">Another action</a></li>
    	<li><a href="#">Something else here</a></li>
    	<li class="divider"></li>
    	<li><a href="#">Separated link</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <!-- /.navbar-collapse --></div>
    <!-- /.container-fluid -->
     </nav>
     <!-- /menu -->
    

    berikut ini hasilnya.

  4. Navigasi tersebut, letaknya terlalu pinggir. Mari kita coba supaya letaknya lebih masuk ke dalam dengan membuat sebuah container. Container merupakan tempat atau wadah dimana semua item diletakkan agar memiliki lebar padding dari sisi paling luar browser. Untuk membuat container, anda bisa copy paste kode tersebut di http://getbootstrap.com/css/#overview-container. Letakkan navigasi tersebut di dalam container.
  5.   <!-- container -->
    <div class="container">
      <!-- menu   -->
        <nav class="navbar navbar-default">
    <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <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="#">Brand</a></div>
    ...................</div>
    <!-- /.container-fluid -->
      </nav>
      <!-- /menu --></div>
    <!-- /container
    

    Berikut ini hasilnya, letak navigasi menjadi lebih dalam.
    menu_indent

  6. Selanjutnya menambahkan jumbotron, copy paste code nya di http://getbootstrap.com/components/#jumbotron. Letakkan code tersebut di dalam container tapi tepat di bawah tag penutup nav ().
  7.   <!-- container -->
    <div class="container">
      <!-- menu   -->
        <nav class="navbar navbar-default">
       	...................
        </nav>
      <!-- /menu -->
      <!-- jumbotron -->
    <div class="jumbotron">
    <h1>Hello, world!</h1>
    ...
    
    <a class="btn btn-success btn-lg" href="#" role="button">Learn more</a>
    
    </div>
    <!-- /jumbotron --></div>
    <!-- /container -->
    

    Hasilnya seperti pada gambar berikut.
    jumbotron

  8. Sekarang menambakan glyphicon. Cara untuk menambah ikon tersebut bisa anda lihat di http://getbootstrap.com/components/#glyphicons. Pastikan terlebih dahulu bahwa di dalam folder fonts sudah ada beberapa file berbagai jenis fonts.Anda bisa memilih jenis ikon yang tersedia, dengan merubah class di tag span, misal kita ingin menggunakan ikon user maka ganti code berikut.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

menjadi

<span class="glyphicon glyphicon-user" aria-hidden="true"></span>

dan letakkan kode tersebut di salah satu menu navigasi.

   <!-- container -->
<div class="container">
  <!-- menu   -->
	  .............

      <!-- 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="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Link <span class="sr-only">(current)</span></a></li>
	<li><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Link</a></li>
	<li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
	<li><a href="#">Action</a></li>
	<li><a href="#">Another action</a></li>
	<li><a href="#">Something else here</a></li>
	<li class="divider"></li>
	<li><a href="#">Separated link</a></li>
	<li class="divider"></li>
	<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
..........</div>
<!-- /.navbar-collapse --></div>
<!-- /.container-fluid -->
  </nav>
  <!-- /menu -->

Hasilnya seperti gambar ini.
menu icon
Ini membuktikan bahwa Bootstrap hanya menggunakan permainan class yang ada di setiap tag. Untuk lebih jelasnya, akan dibahas pada seri berikutnya.

BERSAMBUNG….

About irul

Kadang bisa serius amat. Tapi kebanyakan sih sukanya bercanda.

Posted on 28/04/2015, in HTML dan CSS and tagged . Bookmark the permalink. 1 Komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: