Membuat Template Dengan Bootstrap Part 1 : Membuat Navigation

A. Pengertian

Template Website merupakan salah satu bahan dokumen atau file yang sangat di butuhkan dalam hal pembuatan website. Pada dasarnya, seorang webmaster perlu mengetahui pengertian template website itu sendiri sebelum membangun sebuah website.

Template atau Theme merupakan dokumen atau file yang berisikan model-model tambahan yang akan muncul pada saat proses pembuatan dokumen lain. Sedangkan Website merupakan situs atau halaman di Internet yang menyediakan informasi dan tertanam pada World Wide Web (www).

Dari pengertian 2 kata diatas, Pengertian Template Website itu adalah sebuah desain tampilan halaman dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai.

Template merupakan salah satu identitas anda. Kita tidak dapat memilih Template yang mengikuti taste kita sendiri, apabila web yang anda tujukan untuk visitor dengan kalangan tertentu. Akan tetapi pemilihan template bebas dapat anda lakukan secara sepihak apabila itu tidak diperuntukan untuk moneytise bahkan mungkin dikhususkan untuk anda sendiri.

B. Tujuan Dan Manfaat

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.

C. Alat dan Bahan

1. Silahkan download source code bootstrap di situs resminya http://getbootstrap.com/ yang disediakan oleh bootstrap secara gratis untuk diunduh oleh siapa saja.

2. Download https://jquery.com/download/. 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 Teks 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 atau Lamp dan file dengan extention php dalam membuat template website ini.

D. Membuat Template Dengan Bootstarap

1. Membuat Template Dengan Bootstrap part 1 : Membuat Navigation

E. Navigation bar

Navbars adalah meta komponen responsif yang berfungsi sebagai header navigasi untuk aplikasi atau situs. Mereka mulai runtuh (dan toggleable) dalam pandangan mobile dan menjadi horisontal sebagai tersedia lebar viewport meningkat.

Script code :

<!DOCTYPE html>
<html lang="en">
<head>
<title>SMK Negeri 1 Mejayan</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="../../portal_smk/img/smk.png">
<meta name="description" content="Portal SMK Negeri 1 Mejayan" />
<meta name="keywords" content="Portal SMK Negeri 1 Mejayan , Bima Zainudin Ikhsan" />
<meta name="author" content="Bima Zainudin Ikhsan" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/w3.css">
<link href="../css/Montserrat" rel="stylesheet" type="text/css">
<link href="../css/lato.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="../css/template.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <img src="../../portal_smk/img/smk.png" width="9%">
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">SEJARAH</a></li>
        <li><a href="#services">PRODUKTIF</a></li>
        <li><a href="#portfolio">PRASARANA</a></li>
        <li><a href="#pricing">PROFILE</a></li>
        <li><a href="#contact">KONTAK</a></li>
      </ul>
    </div>
</div>
</nav>
</body>
</html>

Keterangan :

<link rel="stylesheet" href="../css/bootstrap.min.css">

embedded style sheet hanya saja CSS tidak ditulis dalam satu dokumen tetapi ditulis secara terpisah dengan dokumen HTML dan mempunyai extensi file .css.
agar proses editing terhadap style dokumen dapat dilakukan secara mudah dan terpusat.

<meta name="viewport" content="width=device-width, initial-scale=1">

Jika anda tidak membaca hal lain pada artikel ini, ambilah satu petunjuk berikut: jika anda mendesain secara fleksibel, gunakan viewport meta tag pada <head>. Secara garis besar, tag tersebut akan mengatur layout lintas-perangkat untuk anda dengan sendirinya.

Membuat Template Dengan Bootstrap