Selamat siang teman teman..
Berikut ini adalah sourcecode "Membuat Sendiri Web Dengan Bootstrap Ternyata Mudah" yang telah saya upload di youtube sebelumnya. Saya harap teman teman sudah melihat video tersebut. Bagi yang belum melihat video tutorialnya silahkan cek disini.
Tujuan dari pembuatan website (bisa dikatakan desain web dengan bootstrap) ini adalah untuk pembelajaran bagi teman teman yang belum pernah mencoba bootstrap atau bahlan yang sudah mahir dalam menggunakan bootstrap,hehe
Langsung saja kita praktekkan, siapka bahan bahan sesuai dengan tutorial yang ada di youtube. Jika teman teman sudah siapkan bahannya mari kita masak bareng bareng.
Tulis file index.html seperti kode di bawah 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">
<meta name="description" content="reds-script">
<meta name="author" content="reds-script">
<title></title>
<link href="assets/bootstrap.min.css" rel="stylesheet">
<link href="assets/mystyle.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]-->
<script src="assets/jquery-3.1.0.min.js"></script>
<script src="assets/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--navbar-->
<div class="row">
<nav class="navbar navbar-inverse">
<!-- 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="images/logo.png" class="img-logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Beranda <span class="sr-only">(current)</span></a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<!-- -->
<!-- body -->
<div class="row">
<img src="images/header.gif" class="img-header">
</div>
<div class="row" id="section-1">
<div class="col-md-4">
<img src="images/image1.gif" class="img-header">
</div>
<div class="col-md-8 text-center">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="row text-center" id="section-2">
<h1>What is Lorem Ipsum?</h1>
<div class="col-md-4">
<img src="images/poin1.gif" class="img-poin">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-md-4">
<img src="images/poin2.gif" class="img-poin">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-md-4">
<img src="images/poin3.gif" class="img-poin">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div class="row text-center" id="section-3">
<h1>Why do we use it?</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<div class="col-md-offset-4 col-md-4 col-md-offset-4">
<button class="btn btn-danger btn-xl btn-block"> Yes, I Do !</button>
</div>
</div>
<!-- -->
<!-- footer -->
<div class="row" id="footer">
<div class="col-md-6">
<h1>Tentang Kami</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p>
</div>
<div class="col-md-6">
<h1>Hubungi Kami</h1>
<p>Alamat : Jl Lamongan No 67 Lamongan</p>
<p>Tlp : 000 000 000 000</p>
<p>Email : email@email.com</p>
</div>
<div class="col-md-12 text-center">
© reds script | 2018 . Desain Website Dengan Bootstrap
</div>
</div>
<!-- -->
</div>
</body>
</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">
<meta name="description" content="reds-script">
<meta name="author" content="reds-script">
<title></title>
<link href="assets/bootstrap.min.css" rel="stylesheet">
<link href="assets/mystyle.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]-->
<script src="assets/jquery-3.1.0.min.js"></script>
<script src="assets/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!--navbar-->
<div class="row">
<nav class="navbar navbar-inverse">
<!-- 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="images/logo.png" class="img-logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Beranda <span class="sr-only">(current)</span></a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<!-- -->
<!-- body -->
<div class="row">
<img src="images/header.gif" class="img-header">
</div>
<div class="row" id="section-1">
<div class="col-md-4">
<img src="images/image1.gif" class="img-header">
</div>
<div class="col-md-8 text-center">
<h1>What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="row text-center" id="section-2">
<h1>What is Lorem Ipsum?</h1>
<div class="col-md-4">
<img src="images/poin1.gif" class="img-poin">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-md-4">
<img src="images/poin2.gif" class="img-poin">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-md-4">
<img src="images/poin3.gif" class="img-poin">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div class="row text-center" id="section-3">
<h1>Why do we use it?</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<div class="col-md-offset-4 col-md-4 col-md-offset-4">
<button class="btn btn-danger btn-xl btn-block"> Yes, I Do !</button>
</div>
</div>
<!-- -->
<!-- footer -->
<div class="row" id="footer">
<div class="col-md-6">
<h1>Tentang Kami</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.</p>
</div>
<div class="col-md-6">
<h1>Hubungi Kami</h1>
<p>Alamat : Jl Lamongan No 67 Lamongan</p>
<p>Tlp : 000 000 000 000</p>
<p>Email : email@email.com</p>
</div>
<div class="col-md-12 text-center">
© reds script | 2018 . Desain Website Dengan Bootstrap
</div>
</div>
<!-- -->
</div>
</body>
</html>
Kemudian tulis juga file mystyle.css
.img-logo{
height: 40px;
width: 50px;
margin-top: -10px;
}
.img-header{
width: 100%;
margin-top: -20px;
}
.img-poin{
text-align: center;
}
#section-1{
padding: 50px 0px;
background: #e7e7e7;
}
#section-2{
padding: 50px 0px;
}
#section-3{
padding: 50px 0px;
background: #428bca;
color: #e7e7e7;
}
#footer{
background: #222;
color: #ccc;
}
.container{
background: #fff;
box-shadow: 0px 0px 9px #222;
}
.navbar{
border-radius: 0px;
}
height: 40px;
width: 50px;
margin-top: -10px;
}
.img-header{
width: 100%;
margin-top: -20px;
}
.img-poin{
text-align: center;
}
#section-1{
padding: 50px 0px;
background: #e7e7e7;
}
#section-2{
padding: 50px 0px;
}
#section-3{
padding: 50px 0px;
background: #428bca;
color: #e7e7e7;
}
#footer{
background: #222;
color: #ccc;
}
.container{
background: #fff;
box-shadow: 0px 0px 9px #222;
}
.navbar{
border-radius: 0px;
}
