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


DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0838 1157 5876, atau bisa pesan secara online di sini)

Admin Ilmuwebsitecom

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

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