Sabtu, 16 Agustus 2014

MEMBUAT WEB DENGAN MENGGUNAKAN BOOTSTRAP V.3

Sobat sekalian mungkin untuk orang yang sudah pernah membuat website sudah tidak asing lagi dengan Framework Bootstrap. Boostrap merupakan style web yang tinggal pake saja, jadi untuk memuat web yang responsive sekalipun gak usah pusing script css-nya gimana....hehehe.
Oh ya gw jelasin dulu apa itu yang namanya web responsive, web responsive merupakan web yang memiliki variasi tampilan untuk berbagai layar. Misalnya kita mau browsing di Desktop, Tablet, dan juga Mobile akan memiliki tampilan yang berbeda-beda. Mungkin orang yang masih awam akan bertanya kenapa kok bisa beda? Bukankah klo beda tampilan informasi jadi acak-acakan nanti? Jawabannya adalah perbedaan yang dimaksud disini adalah dari segi struktur tampilan informasi tetapi untuk informasi yang disampaikan tidak berkurang alias gunanya responsive adalah membuat tampilan di berbagai devisce lebih menarik.
Konsepnya seperti ini, kita punya berbagai device.
Layar Device

Untuk membuat tampilan web di berbagai device ini kita tidak perlu koding untuk masing-masing device jika kita sudah bisa menggunakan yang namanya bootstrap yang saya maksud. Karena walaupun ukuran layar berbeda-beda bootstrap bisa handle semuanya tanpa mengurangi informasi. Dan pastinya yang gak jago CSS gw saranin pake yang satu ini nih....hehhee.
  1. Oke langkah pertama kalian download dulu bootstrapnya disini.
  2. Kemudian Download Jquery Download the compressed, production jQuery 1.11.1
  3. Setelah itu ekstrak boostrap yang sudah kalian download sehingga bentuknya seperti ini.
    4. Hasil Ekstraksi Bootstrap
  4. Setelah itu masukkan JQuery yang telah di download tadi ke folder js diatas, sehingga isinya seperti ini.
    5. Memasukkan file Jquery
  5. Kemudian kita coba membuat halaman simple dengan codingan seperti di bawah ini.
  6. Tuliskan script di bawah ini pada notepad/notepad++ dan simpan dengan nama index.html
    7. 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
    <html>
<head>
<title>Tutorial Pertama</title>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" 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</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-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">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-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 -->
</nav>
<div class="row">
<div class="col-md-8 col-xs-8 col-sm-6">
<h3>Bagian Content</h3>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="col-md-4 col-xs-4">
<h4>Bagian Widget</h4>
</div>


</div>


<div class="well well-sm text-center">Copyright &copy by Indra Tobing</div>
</div>
<script src="js/jquery-1.11.1.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>

</body>

</html>
  7. Jika kalian jalankan di web browser dengan cara double click pada index.html yang disimpan tadi.
  8. Hasilnya adalah seperti pada gambar  bawah ini.
Output
Untuk download source code bisa disini.
Untuk memudahkan kalian mempelajari bootstrap memasang Bootstrap Twitter Offline Docs pada Google Chrome  kalian yaitu di webstore

Posted by at
Labels: , , , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)