Bootstrap Introduction
27/05/17At first download bootstrap from web site.
There are different types of bootstrap version. e.g. 3, 2, 2.2, 3.3 etc.
We need to study also about Bootstrap documents.
We will download and link it with html file.
We will use bootstrap.min.css and bootstrap.css file as link
We will use bootstrap.min.js and bootstrap.js file as link
We will use only HMTL for bootstrap and we may declare style.css for further customization
Bootstrap is responsive web design.
A responsive website have 3 layer. The large / desktop layer is 1100 pixel, tab layout 700 pixel and mobile layout 480 pixel
Child theme is only for WordPress and when we will buy a theme we will get it.
Child theme is not available for pirated theme or free downloaded theme
Example of Bootstarp Project Image
Example of Bootstarp HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/Untitled-2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" align="center">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us </a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Faq</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3>Header</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
<img alt="Brand" src="images/01.jpg" width="960" height="250">
</div>
<div class="row" >
<div class="col-sm-4" style="background-color:lavender;" align="center" ><i class="fa fa-child" style="font-size:36px" id="icon" ></i><h1>Everything</h1>
<div class="row">
<div class="container">
<h2>Image</h2>
<img src="images/2013-09-11-FINALSoranoAle_Lalla.jpg" class="img-thumbnail" width="304" height="236">
</div>
</div>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;"align="center"><i class="fa fa-dot-circle-o" style="font-size:36px;"id="icon"></i><h1>Is</h1></div>
<div class="col-sm-4" style="background-color:lavender;"align="center"><i class="fa fa-empire" style="font-size:36px"id="icon"></i><h1>Possible</h1></div>
</div>
</div>
</body>
</html>
Example of Bootstarp CSS
@charset "utf-8";
/* CSS Document */
#icon{ color:#F00;}
0 Komentar untuk "Bootstrap WordPress Theme Development Part2"