Cara Membuat Template Web Dengan Bootstrap

Cara Membuat Template Web Dengan bootstrap

Cara Membuat Template Web Dengan Bootstrap

Bootstrap adalah framework yang menggabungkan antara CSS javaScript dan HTML untuk membuat suatu Library front-end website.
web developer (pengembang web) tidak dapat dipisahkan dengan yang namanya web designer baik itu dari segi optimalisasi tampilan maupun navigasi web.
Saat ini sering kita jumpai berbagai macam template gratis sehingga sering timbul anggapan: daripada buat mending yang udah ada aja, 
mari kita ubah mindset kita :
kenapa memilih Template Design web sendiri?
  1. Pengembangan : saat kita menggunakan template orang lain sering kali kita memiliki kesulitan dalam mengembangkannya karena setiap tempalte memiliki keunikan penggabungan antara  javascript, css dan html masing-masing dalam pembuatannya, sehingga saat kita ingin melakukan perubahan, tidak menutup kemungkinan kita harus memahami struktur buatan orang lain yang memiliki alur pemikiran berbeda dengan kita.
  2. Sesuai keinginan dan kebutuhan : web developer  tentu memiliki kebutuhan masing-masing terhapad web yang dikembangkannya, sehingga sangat menyulitkan untuk mendapakan design web dari orang lain yang sesuai dengan kebutuhan dan keingnan kita.
  3. Membangun brand sendiri : mungkin kita pernah mendengar template mas sugeng sekarang bayangkan template anda yang didengar orang lain.
  4. keuntungan finansial : selain bisa dipakai sendiri template kita juga bisa mendatangakn keuntungan finansial contoh : template berbayar dari mas sugeng.id.
Sebelum Membuat Template Web Dengan Bootstrap 
Bootstrap library bisa didapatkan di https://getbootstrap.com/

membuat tamplian awal navigasi dengan bootstrap

contoh kode tampilan awal navigasi dengan bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<title>Fakultas teknologi Informasi (FTI)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
</head> 
<body>

<div class="container">
<div class="jumbotron">
<h1>Fakultas teknologi Informasi</h1>
<p>fti.unisbank.ac.id</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Teknik Informatika </h3>
<p>VISI  test test test test test test test test test test </p>
<p>selengkapnya 
<a href="https://ti.unisbank.ac.id/">KLIK DISINI</a></p>
</div>
<div class="col-sm-4">
<h3>Sistem Informasi</h3> 
<p>VISI coba coba coba coba coba coba coba coba</p>
<p>selengkapnya 
<a href="https://Ti.unisbank.ac.id/" target="_blank">KLIK DISINI</a></p>
</div>
<div class="col-sm-4">
<h3>Manajemen Informasi</h3>
<p>VISI wow wow wow wow wow wow wow wow wow wow</p>
<p> info lebih lengkap:<br>
info PMB <a href="https://ti.unisbank.ac.id/" target="_blank">KLIK DISINI</a></p>
info KAMPUS <a href="https://ti.unisbank.ac.id/" target="_blank">KLIK DISINI</a></p>
info FTI <a href="https://ti.unisbank.ac.id/" target="_blank">KLIK DISINI</a><br></p>
</div>
</div>
</div>
</body>
</html>
contoh tampilan navigasi bootstrap

membuat tamplian awal menu dan navigasi dengan bootstrap

contoh kode tampilan awal menu dan navigasi dengan bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<style>
/*Remove Navbar's margin button and rounded border */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/*set height of the grid so .sidenav can be 100% (adjust needed) */
.row.content {height: 450px}
/*set gray background color and 100% height */
.sidenav {
padding-top: 20xp;
background-color: #flflfl;
height: 100%;
}
/* set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* on small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px){
.sidenav{
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head> 
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a><li>
<li><a href="#">About</a></li>
<li><a href="#">Projek</a></li>
<li><a href="#">Contack</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon-log-in"></span> login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><a href="#">link</a></p>
<p><a href="#">link</a></p>
<p><a href="#">link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>SELAMAT DATANG </h1>
<p> PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID
PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID  
PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID
PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID
<hr>
<hr3> Test </hr3>
<p>hiya hiya.....</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>IKLAN</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>footer Text</p>
</footer>
</body>
</html>


 contoh tampilan awal menu dan navigasi dengan bootstrap versi dekstop
contoh tampilan awal menu dan navigasi dengan bootstrap versi mobile

membuat tamplian awal menu dan navigasi internal link dengan bootstrap

contoh kode tampilan awal menu dan navigasi internal link dengan bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<style>
/*Remove Navbar's margin button and rounded border */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/*set height of the grid so .sidenav can be 100% (adjust needed) */
.row.content {height: 450px}
/*set gray background color and 100% height */
.sidenav {
padding-top: 20xp;
background-color: #flflfl;
height: 100%;
}
/* set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* on small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px){
.sidenav{
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head> 
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="latB.html">Home</a><li>
<li><a href="latBprofile.html">profile</a></li>
<li><a href="latBproduct.html">product</a></li>
<li><a href="latBservice.html">service</a></li>
<li><a href="latBpcontact.html">contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><a href="https://dikti.go.id" target="_blank"> RISTEK DIKTI</a></p>
<p><a href="https://unisbank.ac.id" target="_blank"> UNISBANK</a></p>
<p><a href="https://fti.unisbank.ac.id" target="_blank"> FTI UNISBANK</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>SELAMAT DATANG </h1>
<p> PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID
PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID  
PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID
PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID PERCOBAAN WAHID
<hr>
<hr3> Motto </hr3>
<p>Mari berbagi pengetahuan sebanyak mungkin</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>IKLAN</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>di produksi oleh Teknik Informatika UNISBANK Semarang
</p>
</footer>
</body>
</html>
contoh versi dekstop


Penjelasan singkat Membuat Template Web Dengan Bootstrap
kode di atas di link ke Bootstrap library yang sudah  di ekstrak di simpan dalam 1 folder baru 
perbedaan 3 contoh Membuat Template Web Dengan Bootstrap 
contoh 1 hanya menampilkan navigasi sederhana 
contoh 2 menampilakn menu dan navigasi
contoh 3 menampilakn menu dan internal link  navigasi

internal link dan navigasi pada contoh Membuat Template Web Dengan Bootstrap bisa sobat ganti kesuai keinginan dan kebutuhan.

cukup sekian artikel tentang Membuat Template Web Dengan Bootstrap


No comments:

Post a Comment

Iklan Atas Artikel

Meta Propeller atas artikel

cara mudah turial kode Java blog website grafika komputer jaringan komputer dan Arduino

Iklan Tengah Artikel 2

Iklan Bawah Artikel