Thursday , December 14 2017
Home / Bootstrap / Modifikasi Jumbotron Bootstrap (source code)

Modifikasi Jumbotron Bootstrap (source code)

Acehline – Modifikasi Jumbotron Bootstrap

Masih Seputar Boostrap, kali saya akan membahasa cara modifikasi tampilan default jumbotron bootstrap,  jika menggunakan jumbotron bawaan dari bootstrap tampilan akan seperti pada gambar dibawah ini.Modifikasi Jumbotron
Dengan Kode Awalnya seperti dibawah :

<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
Navbar Template for Bootstrap
<!-- Bootstrap core CSS -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- Custom styles for this template -->
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!-- [if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- [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]-->
 

<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar"></button><button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span></button>
<a class="navbar-brand" href="#">Project name</a></div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">Dropdown </a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>

<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.
<a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs »</a>
</div>
</div>

<!-- /container -->
<!-- Bootstrap core JavaScript ================================================== -->

Agar tampilan lebih menarik, saya menambah/merubah beberapa kode pada :

  1. Header
  2. Content
  3. Footer

Kode setelah perubahan/penambahan

<!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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Tutorial Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
</head>
<body>

<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="http://www.acehline.or.id">Acehline</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tutorial <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Computer</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Networking</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="#">Static top</a></li>
<li><a href="#">Fixed top</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
</div>
<!-- /container -->
<div class="container">
<div class="jumbotron">
<center>
<img src="http://www.acehline.or.id/wp-content/uploads/2015/12/acehline.png" class="img-responsive">
<h1>Acehline Community</h1>
Kami tidak menciptakan sesuatu yang baru, namun hanya melanjutkan untuk menjadi lebih baik tidak untuk menghancurkan ataupun menjatuhkan.<a href="http://www.acehline.or.id/manifesto/"> Read More</a>
<a class="btn btn-lg btn-info" href="http://twitter.com/acehline" role="button">Twitter »</a>
<a class="btn btn-lg btn-primary" href="http://facebook.com/acehline.or.id" role="button">Facebook »</a>
<a class="btn btn-lg btn-warning" href="http://acehline.or.id" role="button">Website »</a>
</center>
</div>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
Copyleft © 2015 by :
<a href="http://www.acehline.or.id" target="_blank">Acehline Community</a> - Spirit Of Open Source
</div>
</div>
<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

Tampilan setelah di Edit Modifikasi Jumbotron
Download Source Kode

566 total views, 1 views today

About ab4nxc

Check Also

Bagaimana Cara Membuka Situs Yang di Blokir

Cara membuka situs yang diblokir – Saat ini provider Internet seperti Telkom, Smartfren, Aha dan …

Leave a Reply

Your email address will not be published. Required fields are marked *