Latihan Menggunakan Bootstrap

Latihan
Menggunakan Bootstrap

1. Struktur File akan seperti berikut :

2. Pada file index.html, tambahkan code seperti berikut :
<!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.0">
<title>PlanUrTrip</title>


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

<link href="css/StyleSheet.css" rel="stylesheet">
</head>
<body>
<div class="container">

<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PlanUrTrip</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Flights</a></li>
<li><a href="#contact">Hotels</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown">Packages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Trafalgar</a></li>
<li class="divider"></li>
<li><a href="#">Contiki</a></li>
<li><a href="#">Club med</a></li>

<li><a href="#">Cruises</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown">Locations <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Maldives</a></li>
<li><a href="#">Malaysia</a></li>
<li><a href="#">Thailand</a></li>
<li><a href="#">Singapore</a></li>
<li><a href="#">Egypt</a></li>
<li><a href="#">America</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">Mexico</a></li>
</ul>
</li>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div id="myCarousel" class="carousel slide">


<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="img/basic-pic1.jpg" alt="First slide">
<div class="carousel-caption">
<h1>Brazil.</h1>
<p>The beaches of Brazil continue to be some of this South
American country’s most coveted, longed-for tourist attractions.</p>
<p><a class="btn btn-large btn-primary" href="#">Sign up
today</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/basic-pic2.jpg" alt="Second slide">
<h1>Mexico.</h1>
<p>One of the world’s great civilizations, Mexico is a melange of
Mesoamerican cultures and modern indigenous tribes, Spanish traditions and a
vibrant modern economy, the biggest in Latin America after Brazil.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn
more</a></p>
</div>
</div>
</div>
<div class="item active">
<img src="img/basic-pic3.jpg" alt="Third slide">
<h1>Arches National Park USA.</h1>
<p>Located just 5 miles (8 km) north of Moab is Arches National
Park, which contains the world's largest concentration of natural sandstone
arches.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse
gallery</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/basic-pic4.jpg" alt="fourth slide">
<h1>Sahara Desert.</h1>
<p>The Sahara is the largest subtropical hot desert and third
largest desert after Antarctica and the Arctic.</p>
gallery</a></p>
</div>
</div>
</div>
<div class="item">
<img src="img/basic-pic5.jpg" alt="fifth slide">
<h1>Thailand.</h1>
<p>Sand Sea Resort, a magic land of the sea where you can have
your own privacy in one of the most beautiful places of the world.</p>
gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-
slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-
slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>


<div class="container marketing">


<div class="row">
<div class="col-lg-4">
<img alt="brazil" src="img/basic-pic1.jpg" class="img-circle"
width="200px" height="200px"/>
<h2>Brazil</h2>
<p style="text-align:justify">The beaches of Brazil continue to be
some of this South American country’s most coveted, longed-for tourist
attractions. Some are frequented by locals and tourists alike, littered with
bronzed bodies on pristine white sand and in the waters of the Atlantic. Others
are nestled away, remote, and empty, providing an idyllic escape for those
wanting to bask in the serenity of the natural beauty.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<img alt="brazil" src="img/basic-pic2.jpg" class="img-circle" width="200px"
height="200px"/>
<h2>Mexico</h2>
<p style="text-align:justify">One of the world’s great civilizations,
Mexico is a melange of Mesoamerican cultures and modern indigenous tribes,
Spanish traditions and a vibrant modern economy, the biggest in Latin America
after Brazil. Mexico’s landscapes are just as diverse, from the shimmering blue
coastline of Baja California and the iconic cactus-strewn deserts of the
north.</p>
</div>
<img alt="brazil" src="img/basic-pic3.jpg" class="img-circle"
width="200px" height="200px"/>
<h2>USA</h2>
<p style="text-align:justify">Located just 5 miles (8 km) north of Moab
is Arches National Park, which contains the world's largest concentration of
natural sandstone arches. Although over 2,000 arches are located within the
park's 76,518 acres, the park also contains an astounding variety of other
geological formations. Colossal sandstone fins, massive balanced rocks.
</div>
</div>
<div id="abt">
<div class="panel-body">
<h3>About Us</h3>
PlanUrTrip India's emerging online travel company was founded in the year 2012.
Created to empower the traveller with instant booking and comprehensive
choices, the company began its journey in the US-India travel market. It aimed
to offer a range of best-value products and services along with cutting-edge
technology and dedicated round-the-clock customer support. <p><a class="btn
btn-default" href="#">View details »</a></p>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>© 2014 PlanUrTrip, Inc. · <a href="#">Privacy</a>
· <a href="#">Terms</a></p>
</div>
</div>
</div>
</footer>


<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

3. Pada file css/StyleSheet.css, isi dengan code seperti berikut :
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it

into place. */
.navbar-wrapper {
position: relative;
z-index: 15;
}
/* CUSTOMIZE THE CAROUSEL

-------------------------------------------------- */
/* Carousel base class */

.carousel {
margin-bottom: 60px;
/* Negative margin to pull up carousel. 90px is roughly margins and height of

navbar. */
margin-top: -90px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */

.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Pad the edges of the mobile views a bit */

.marketing {
padding-left: 15px;
padding-right: 15px;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-left: 10px;
margin-right: 10px;
}
.navbar .nav > li > a{

color: #fff;
text-shadow: none;
}
.navbar .nav > li > a:hover{

color: #666;
}
.navbar .nav .active > a{

color: #666;
background: none;
}
.navbar .nav .active > a:hover{

background: none;
footer
{
background-color: black;
padding: 50px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Remove the edge padding needed for mobile */

.marketing {
padding-left: 0;
padding-right: 0;
}
/* Navbar positioning foo */

.navbar-wrapper {
margin-top: 20px;
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */

.carousel-caption p {
font-size: 21px;
line-height: 1.4;
}

Latihan Menggunakan Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Latihan Menggunakan Bootstrap

Uploaded by

Copyright:

Available Formats

Latihan

<li><a href="#">Club med</a></li>

<div id="myCarousel" class="carousel slide">

<div class="container marketing">

<!-- Bootstrap core JavaScript

/* Special class on .container surrounding .navbar, used for positioning it

/* CUSTOMIZE THE CAROUSEL

/* Carousel base class */

/* Negative margin to pull up carousel. 90px is roughly margins and height of

/* Declare heights because of positioning of img element */

/* Pad the edges of the mobile views a bit */

.navbar .nav > li > a{

.navbar .nav > li > a:hover{

.navbar .nav .active > a{

.navbar .nav .active > a:hover{

@media (min-width: 768px) {

/* Remove the edge padding needed for mobile */

/* Navbar positioning foo */

/* Bump up size of carousel content */

You might also like