Facebook Ilmuwebsite

Belajar Bootstrap Dasar Bag.1 : Membuat Layout Web Jadi Lebih Efisien

Web Design "will never die" :), bidang yang satu ini tidak pernah surut dari terobosan-terobosan terbaru. Setiap tahun selalu ada saja teknologi yang diperkenalkan oleh para foundernya, yang kemudian di gratiskan untuk di pakai bebas. Dan luar biasa antusiasme dari web developer dan web designer dunia. Gotong royong betul-betul terasa di dunia web development ini. Dan kita semua menjadi terbantu. Betul?

Bootstrap pun merupakan salah satu produk gotong royong, yang dengan kemudahannya para web designer jadi betul-betul terbantu, seingga bekerja jadi jauh lebih efisien. Baiklah sebelum kita lompat ke berbagai jenis fasilitas yang memudahkan dalam dunia web development, ada baiknya kita pelajari HTML framework yang satu ini. Bootstrap.

Bootstrap merupakan framework CSS, yang didalamnya telah disediakan komponen-komponen interface dasar dalam pembuatan halaman website. Bootstrap sudah dirancang sedemikian rupa, bahkan bisa dikatakan, bootstrap ini dibuat berdasarkan hasil rangkuman pekerjaan para web designer. Merangkum langkah kerja yang akhirnya memudahkan pekerjaan para web designer.

Web designer tidak lagi dipusingkan oleh pembuatan layout yang betul-betul dari nol sama sekali tanpa pondasi apapun, yang pada akhirnya hal ini malah membuat kerja jadi jauh lebih lama. Biasanya pembuatan layout halaman depan saja membutuhkan seharian full, tapi dengan bootstrap Anda bisa membuatnya jadi lebih singkat.

Bootstrap adalah pondasi, menghasilkan kemudahan dan efisiensi pekerjaan. Masih penasaran dengan cara kerja bootstrap? Kita akan lanjut lebih dalam.

Sebelumnya kita akan download terlebih dahulu file-file yang dibutuhkan, silahkan download langsung di http://getbootstrap.com/

Pilih yang Download Bootstrap, untuk yang lainnya kita akan bahas lain waktu. Kemudian letakkan pada satu direktori ...







Setelah itu silahkan langsung ekstrak


Sehingga struktur direktorinya nanti akan menjadi seperti ini ...



Langkah selanjutnya adalah menggunakan fasilitas bootstrap ini ke dalam file htmlnya.

Persiapkan halaman HTML

<!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>Bootstrap 101 Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Kemudian kita akan sisipkan bagian-bagian yang diperlukan, agar kita bisa menggunakan fasilitas bootstrap ini. Kode lengkapnya adalah seperti ini ...

<!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>Bootstrap 101 Template</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>
    <h1>Hello, world!</h1>

    <!-- 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>

Baiklah untuk kali ini kita akan cukupkan sekian, kita lanjutkan pekan yang akan datang. Namun, jika Anda ingin melihat fasilitas apa saja sih yang disediakan oleh bootstrap? Silahkan kunjungi http://getbootstrap.com/examples/theme/

Dengan bootstrap pekerjaan Anda jauh lebih efisien. :).


Loka Dwiartara
Founder Kaffah.biz
Admin Ilmuwebsite.com


Posting Komentar

7 Komentar

  1. Artikel anda sangat menarika sekali :D,Saya juga mempunyai tulisan yang sejenis mengenai Jurnal Serupa yang bisa anda kunjungi
    di http://ejournal.gunadarma.ac.id , Happy Sharing :D

    BalasHapus
  2. Artikel yang bermanfaat nih, patut dicoba.. thanks

    BalasHapus
  3. Kalo pake bootstrap itu harus html atau bisa php?

    BalasHapus
    Balasan
    1. Terutama harus bisa PHP dulu bos ^_^
      http://rickynotes.com

      Hapus
  4. keren banget mas..
    ilmunya bermanfaat.

    BalasHapus
  5. Artikel nya sangat menarik untuk dipelajari, untuk teman teman yang belum terlalu memahami HTML dan CSS bisa mampir ke blog sederhana kami

    BalasHapus