Belajar Membuat Template Web Menggunakan Bootstrap

Belajar Membuat Template Web dengan Bootstrap – Bootstrap, siapa sih yang tidak tau. Sebuah framework css yang sangat membantu pendesain website, sehingga pendesain website bisa membuat template website dengan bootstrap, bisa membuat website dengan bootstrap, bisa membuat web responsive dengan bootstrap. Dan bagi kalian yang belum tau apa itu bootstrap kali ini onphpid akan mengajak kalian untuk belajar bootstrap untuk pemula dan di tutorial belajar bootstrap ini kita akan membuat sebuah template website sederhana dengan bootstrap.

Tutorial ini juga tersedia dalam bentuk Video : Membuat Template Web dengan Bootstrap 3

Apa itu bootstrap ?

Bootstrap adalah front-end framework atau framework css yang sengaja dibangun untuk memudahkan pendesain web dalam membuat website atau membuat template website. Framework yang dulu pernah dikenal dengan twitter bootstrap ini dilengkapi dengan komponen-komponen website yang sering digunakan seperti breadcrumb, pagination, modal dialog, navigation bar dan lain-lain yang sangat memudahkan pendesain web saat membuat webiste, bahkan bootstrap ini selalu diunggul-unggulkan dengan fitur website responsive-nya yang memungkinkan kita cukup membuat satu template website saja dan kita bisa memperoleh template yang bisa dibuka atau kompatibel diberbagai device (laptop, handphone, atau tablet).

Manfaat Bootstrap ?

Seperti yang telah terurai di atas template website yang dibangun dengan bootstrap sudah responsif sehingga kita cukup membuat satu buah template lengkap saja dan sudah support atau kompatibel diberbagai browser sekaligus berbagai device baik untuk desktop, laptop, tablet maupun smartphone sekalipun. Template yang kita buat dengan bootstrap ini akan langsung menyesuaikan diri dengan lebar layar dari masing-masing device. Fitur responsif ini juga telah menjadi rekomendasi google guna memperkuat SEO mobile dari website yang kita buat.

Pada tutorial kali ini onphpid akan berbagi sedikit tentang belajar membuat template website bootstrap, tutorial ini dibuat karena onphpid sedang dalam proyek tutorial membuat website yang dapat kalian lihat di cara membuat website. Di tutorial bootstrap ini kiata akan mencoba membuat template website dengan layout dua kolom dengan menggunakan fitur grid dari bootstrap dan tentunya akan kita bahas langkah demi langkah sebagai berikut.

Membuat Template Website dengan bootstrap

Persiapan membuat template dengan bootstrap

  1. Silahkan download source code bootstrap di situs resminya getbootstrap.com yang disediakan oleh bootstrap secara gratis untuk diunduh oleh siapa saja.
  2. Download jquery di jquery.com atau library google. karena bootstrap tidak menyediakan jquery dalam paketan source code-nya. Jquery ini digunakan untuk menjalankan komponen-komponen bawaan bootstrap seperti modal dialog, navigation agar berjalan dengan normal.
  3. Pastikan kalian sudah punya code editor seperti notepad++, dreamweaver atau Sublime Text yang nanti akan kita gunakan untuk membuat template website dengan bootstrap.
  4. Agar lebih terasa bawa kita membuat website, kita akan menggunakan xampp dan file dengan extention php dalam membuat template website ini.
Tutorial ini juga tersedia dalam bentuk Video : Membuat Template Web dengan Bootstrap 3

Memulai membuat template web

  1. Pastikan XAMPP sudah terinstall dan sudah dalam kondisi running.
  2. Buat sebuah folder di htdocs dengan nama template
  3. Buka folder template (baru saja kita buat tadi) dan buatlah sebuah folder baru dengan nama assets dan satu buat file dengan nama index.php
  4. Buatlah dua folder baru di dalam folder assets dengan nama bootstrap dan jquery. Dimana hasil download-an bootstrap akan kita ekstrak di folder bootstrap yang baru kita buat dan hasil download-an jquery akan kita letakkan di folder jquery yang baru kita buat. Tambahkan dua file baru yaitu style.css dan custom.js. Kurang lebih hasil dan pembuatan struktur direktori websitenya adalah sebagai berikut :

Baca Juga Membuat Halaman Login dengan Bootstrap dan PHP

Buka file index.php dan kita akan memulai membuat template websitenya dengan menuliskan kode dibawah ini di file index.php.

Dari script html di atas kita dapat melihat ada komentar tentang jquery lokal dan jquery online maksudnya kita dapat memilih salah satu dari kedua jquery tersebut sesuka hati. kita bisa menggunakan jquery online atau cdn dengan asumsi kita membuat template website dengan bootstrap ini dalam kondisi terhubung dengan internet, jika tidak terhubung maka sebaiknya gunakan jquery lokal saja karena jquery online tidak dapat di unduh jika dalam kondisi offline.

Langkah berikutnya adalah membuat layout website dengan bootstrap bagian header, content dan sidebar serta footer dengan menambahkan kode berikut ini di atas komentar <!–happy code–>. Agar kalian lebih memahami layouting dari bootstrap sebaiknya kalian baca Belajar Grid System Bootstrap 3.

Kode baru di atas adalah kode yang akan membagi header, content, sidebar, dan footer. di dalam system grid bootstrap total lebar layar atau lebar kerja diberi nilai 12 kolom.

Kita akan memulai mengisi bagian header dengan mengganti komentar <!– isi header–> dengan kode berikut :

 

kemudian kita akan mengisi kolom konten dengan mengganti komentar <!– isi content –> dengan kode berikut :

 

kemudian pada kolom sidebar silahkan ganti komentar <!– isi sidebar –> dengan kode berikut :

kemudian pada bagian footer silahkan ganti <!– isi footer –> dengan kode berikut :

dan untuk sentuhan terakhir kita akan memberikan style secara custom agar halaman kita tampak lebih baik. silahkan tulis kode berikut di file style.css

Sekian tutorial membuat template website dengan bootstrap. untuk hasilnya bisa dilihat di bawah ini.

Demo

referensi belajar bootstrap

https://id.wikipedia.org/wiki/Twitter_Bootstrap

http://getbootstrap.com

Cara Membuat Domain pengganti Localhost
Cara Membuat Website | Halaman Komentar

  • Ane sendiri baru belajar web desain gan, blom masuk ke materi bootstrap. masih berkutik di CSS.
    Nice info gan, jadi punya persiapan buat belajar bootstrap 🙂

    • kalo begitu jangan segan-segan buat balik ke sini gan 😀

  • keren gan ijin bookmark nanti saya pelajari bikin template dengan bootstrap ini

    • iya silahkan silahkan. semoga mahir bikin template web pake bootstrapnya gan 😀

  • ari

    mantaf nihh, kaya gampang ya padahal pas di praktekin susah :3

    • hehehe. kalo mau ae buatin template web pake bootstrap bisa PM hheheh

  • Nah iya, Bootstrap itu framework fav gw. Kalo yang masih baru belajar diusahain jangan make framework dulu, supaya tau dasar-dasarnya.

  • Rumah Murah

    wah makasih banyak ya gan
    salam dari kami,
    daftarperumahanmurah.com

  • Cynthia Diana Sinaulan

    cara ngerunning nya gimana ya?

  • Tri fadilah Rahman

    Untuk script custom.js-nya di artikelnya tidak diikut sertakan…

    • karena template masih sederhana jadi custom.js (sebenarnya) belum diperlukan. namun jika akan hendak menambahkan “carousel” dari bootstrap misalnya.. agan bisa menambahkan JS untuk menjalankan carousel kedalam custom.js.

  • HABIB LUTFI PAMUNGKAS H A B O

    mas yang di download yang mana aja ya? saya bingung untuk download yang jquerynya.

  • Santi Nurmayanti

    kenapa ya sidebar nya di bawah gak kesampig?

    • apakah css dari bootstrap, dan style.css sudah dimasukan?

    • Santi Nurmayanti

      Sekarang sudah hehe ada yg salah nempatin tadi

      Mau tanya gan kalau ingin buat slider gimana ya? Gagal terus terus satu lagi hehe cara buat berita pakai dynamic table biasanya kan ke bawah nah kalau mau k samping gmana?

    • untuk slider agan bisa liat di link berikut

      http://www.dumetschool.com/blog/membuat-carousel-atau-slider-pada-bootstrap

      kalau untuk table kesamping

      bisa pakai

      isi

    • Santi Nurmayanti

      mas kalau pengen menjadi submenu yang diubah bagian mananya?

    • dibagian menu
      contoh :

      Lorem

      submenu

      …dst…

    • Santi Nurmayanti

      Sudah berapa kali nyoba mas tapi ttp gak bisa? Apa style.css nya ditambahin?

    • iya betul memang harus di tambah in cssnya. karena di onphpid belum ada tutorialnya mbak bisa cek di csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

  • Fubuki Aida

    mana fungsi bootstrapnya ms? ini lebih ke cssnya. nggak pake bootsrappun ini bisa dijalankan

    • benarkah?

    • Fubuki Aida

      hahaha, baiklah, saya yang salah ternyata mas. makasih banyak. artikelnya membantu 🙂

    • selamat belajar 🙂

  • YoZa D’Corza Soru

    gan ini kenapa ya kok templatenya ga jalan…?
    mohon bantuannya ya..terima kasih

  • YoZa D’Corza Soru

    Gan mohon bantuannya,saya udah ikutin semua petunjuk yang agan kasih,tapi templatenya kok gagal ya…?
    mohon bantuannya gan..terima kasih

    • Maaf YoZa baru sempat membalas.. baik bisa tolong sertakan SS :
      – List File dan Folder latihanmu
      – File (isi) style.css
      – output (halaman browser full screen)

      agar saya bisa mengecek dengan lebih mudah 😀

  • bone aspita

    jquery tidak bisa didownload, ada link lain?

  • wahyu emmoe

    Bagaimana menambahkan file style.css dan custom.js ? Terima kasih

  • Dedi Maulana

    nice tutor bang, dan berhasil, tapi custom.js nya untuk apa ya?

  • Dedi Maulana

    mau tanya lagi, bisa tolong buat tutor login dengan modal bisa gk bang? saya ikutin di w3school gk berhasil. lalu tolong juga buat iframe dan tombol prev dan next di bawah iframe. jadi kalo tombol di tekan situs yg di iframe jalan terus sesuai tombol yg ditekan. terima kasih sebelumnya