Widodo

Panduan Membuat Landing Page Dengan Bootstrap 3 - Materi 1 Membuat Menu

Panduan Membuat Template Bootstrap

Halo Teman-teman selamat menjalankan ibadah puasa bagi yang menjalankan, dalam kesempatan ini  s-widodo.com akan memberikan panduan membuat template landing page menggunakan framework bootstrap teman-teman sudah tahukan apa itu framework bootstrap? Bootstrap adalah sebuah libray framework CSS yang dibuat kusus untuk bagian pengebang font-web website, bootstrap merupakan salah satu framework HTML, CSS dan Javascript yang populer saat ini. Jadi untuk membuat layout landing page ini kita menggunakan Bootstrap Versi 3

 

Sebelum saya jelaskan lebih lanjut, alangkah baiknya jika teman-teman terlebih dahulu mempelajari HTML/CSS Dasar. Jika teman-teman sudah paham tentang bootstrap kita langsung ke #Materi Pertama.

 

Pertama Download Framework Bootstrap

Sekarang teman-teman download terlebih dahulu framework Bootstrap dibawah ini, pilih link download yang pertama.

Setelah teman-teman mendownload framework bootstrap kemudian exstak pada project anda. disini saya meletakkan pada localhost saya dengan alamat http://localhost/tema, dalam panduan di video saya memilih file framework bootstrap untuk saya pisahkan

 

Cara Menginstall Bootstrap di Project

Untuk menghubungkan atau menginstall bootstrap buat sebuah file HTML yang akan kita hubungkan dengan bootstrap, sekarang teman-teman Add project di editor atau bisa di drag projectnya ke editor kalian masing-masing disini saya menggunakan Sublime Textsetelah itu buat file index.html di dalam folder project teman-teman.

tema/
├── index.html
├── css/
│   ├── bootstrap-min.css
│   ├── style.css
├── js/
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

 

Basic Template

Bootstrap sudah menyediakan source code basic template yang bisa teman-teman ambil dari halaman web bootstrap, disini saya sudah menyediakan Source code basic template, Sekarang Simpan Source Code basic template bootstrap ini di file index.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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <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.3/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.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Sekarang temat-teman ubah titlenya dengan produk yang akan kalian promosikan disini saya menggunakan judul <title>Buat Toko Online Praktis dengan MiniStore</title>

Membuat dan Custom Menu/ Navbar

Untuk membuat menu navbar, framework bootstrap sudah menyediakan struktur code html, kalian kembali ke halaman bootstrap dan klik menu componen sekarang pilih navbar atau kunjungi disiniuntuk lebih cepatnya jika kalian menggunakan Sublime text kalian install Plugin Bootstrap

Sekarang kalian Copy dan simpan Code HTML di bawah code <body> silahkan edit dan hapus beberapa codenya seperti di bawah ini

<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="img/logoweb.png">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Beranda</a></li>
        <li><a href="#">Tentang</a></li>
        <li><a href="#">Layanan</a></li>
        <li><a href="#">Harga</a></li>
        <li><a href="#">Kontak</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Yang terakhir kita akan membuat kode CSS untuk merubah atau Custom Menu Navbar dari bootstrap caranya cukup mudah, sekarang teman-teman new file baru dengan formas CSS simpan file di dalam folder css dengan nama style.css setelah itu silahkan panggil file style.css dalam file index kalian caranya ketik <link rel="stylesheet" type="text/css" href="css/style.css"> dibawah css/bootstrap.min.css

Sekarang kalian Buat struktur code css di file style.css untuk code lengkapnya seperti dibawah ini

body{
	margin:auto;
	padding:0px;

}

/*----------Menu-----------*/
.navbar-default{
	background-color:#383C9C;
	border:none;
	margin:auto;
	border-radius: 0px;
	z-index:+999;
}


.navbar-default .navbar-nav>li>a {
    color:#fff;
    padding:25px 20px;
    font-size:15px;
    font-weight: 600;
}

.navbar-default .navbar-nav>li>a:hover{
	color:#fff;
	background:#1f2394;
}


.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #fff;
    background-color:#1f2394;
}


.navbar-default .navbar-nav li a:focus{
    color: #fff;
}



.navbar-default .navbar-toggle {
    border-color:none;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding:13px 15px;
    margin-top:14px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border:none;
    border-radius:0px;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  color:#fff;
  background:#1f2394;
}


.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border:none;
}


@media screen and (min-width:630px) and (max-width:768px) {
  .navbar-default .navbar-collapse {
      display: inline-block;
      margin:auto!important;
      padding: 0px;
  }
}

@media screen and (max-width:610px) {
  .navbar-default{
    height:68px;
  }

  .navbar-default .navbar-collapse {
  	background: #383C9C;
    padding-left: inherit;
    padding-right: inherit;
    width: 100%;
    margin:auto!important;
    padding: 0px;
    overflow-x:hidden;
    position: absolute;
    top:68px;
    left:0px;

  }

 .navbar-default .navbar-nav>li>a {
    color:#fff;
    padding:15px 30px;
    font-size:15px;
    font-weight: 600;
}

}

Sekian panduan membuat landing page materi 1, untuk tutorial selanjutnya kita akan membahas membuat slider menggunakan bootstrap. Perhatiakn letak direktori file css dan js bootstrap pada saat menghubungkanya teman-teman tidak perlu memakai file bootstrap semua hanya perlu menghubungkan file bootstrap-min.css dan bootstrap-min.js

Jika Artikel ini Bermanfaat silahakn Share keteman-teman lainya.

 #NgodingYuk



0 Komentar


Copyright © 2015 S-widodo.com Digital marketing