Bootstrap is a free UI framework for a quick and easy web development.

Bootstrap provides design templates based on HTML and CSS for layouts, forms, buttons, tables, navigation, dialog boxes, image carousels, and more, as well as additional JavaScript plugins. On the basis of Bootstrap, you can easily create websites with the "responsive design" – the websites that look equally well on all types of devices, from small phones to desktop computers.

 

Rapid adaptation of the website for mobile devices using Bootstrap

Let’s take as an example a simple template with fixed width, menu, sidebar, content and footer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="" />
<meta name="description" content="" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" media="screen" href="/file/theme/css/screen.css" />
</head>
 
<body>
 
<!--header -->
<div id="header-wrap" ><div id="header" >
<a name="top"></a>
<h1 id="logo-text"><a href="#" title=""></a></h1>
<p id="slogan"></p>
<div  id="nav">
<ul >
<li><a href="">Home</a></li>
<li><a href="#">Page1</a>
<ul style="height:auto; overflow:auto">
<li><a href="#">Page1-1</a></li>
</ul>
</li>
<li><a href="#">Page2</a>
<ul style="height:auto; overflow:auto">
<li><a href="#">Page2-1</a></li>
<li><a href="#">Page2-1</a></li>
</ul>
</li>
</ul>
</div>
 
<div id="google-search">
<script>
(function() {
var cx = '';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
</div>
 
</div>
</div>
 
<!-- content-outer -->
 
<div id="content-wrap" class="clear">
<div id="content" >
<div style="width:1150px; height:15px; background: url(/file/theme/images/top.png);">
</div>
<div id="main">
 
</div>
 
<!-- sidebar -->
<div id="sidebar" style="width:250px;">
<div class="sidemenu" >
<ul >
<li><a href="">Home</a></li>
<li><a href="#">Page1</a>
<ul style="height:auto; overflow:auto">
<li><a href="#">Page1-1</a></li>
</ul>
</li>
<li><a href="#">Page2</a>
<ul style="height:auto; overflow:auto">
<li><a href="#">Page2-1</a></li>
<li><a href="#">Page2-1</a></li>
</ul>
</li>
</ul>
</div>
<!-- /sidebar --></div>
 
</div>
<!-- /content-out -->
</div>
 
<!-- footer-outer -->
 
<div id="footer-outer" class="clear">
<div id="footer-wrap" >
<div style="margin-left:500px; float:left">
<p><strong><a href="#top">Top</a></strong></p>
<p style="margin-left:-100px;">
&copy; 2015 <strong></strong>
<strong style="margin-left:20px;">E-mail: </strong>
</p>
</div>
</div>
 
<!-- /footer-outer -->
</div>
</body>
</html>
 
Let’s replace the DOCTYPE to <!DOCTYPE html>.
The attribute lang of the html tag and the attribute charset of the meta tag already exist.
Let’s add at the beginning of the <head> tag:
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
Let’s add in the <head> tag:
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
Let’s wrap the header in the class .container and place the menu, logo, and search box in the header using the Bootstrap Grid System and Bootstrap Navigation Bar.
 
<div class="container header">
<div class="row">  
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
  <li><a href="/">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page1<span class="caret"></span></a>
  <ul class="dropdown-menu inverse-dropdown">
    <li><a href="#">Page1-1</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page2<span class="caret"></span></a>
<ul class="dropdown-menu inverse-dropdown">
<li><a href="#">Page2-1</a></li> 
<li><a href="#">Page2-2</a></li>
<li><a href="#">Page2-3</a></li>
<li><a href="#">Page2-4</a></li>
<li><a href="#">Page2-5</a></li>
</ul>
</li>
<li><a href="#">Contacts</a></li>  
</ul>
</div>
</div>
</nav> 
     
  </div>    
<a name="top"></a>
  
  
<div class="row"> 
<div class="col-sm-6 text-center"> 
<h1><a href="/"></a></h1>
<p></p>
</div>   
<div class="col-sm-4 pull-right">  
<script>
  (function() {
    var cx = '';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
</div>
<style>
     .gsc-search-button{    
    display:none;
  }
  
  .gsib_a{
    height:40px;
  }
  
  .gsc-input-box {
   
    height: 40px;
}
  </style>
  <div style="height:15px; background: black;" class="col-sm-12">
  </div>
 </div>
</div>
 
Let’s remove the side panel and CSS file, instead let’s add the CSS styles:
 
<style>
 body {
font-size:18px;
font-famile:Georgia;
color: #000;
margin: 0; 
padding: 0;
background: gray;
  
  
  .header{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+4,fdffff+7,fdffff+7,e1ffff+17,e6f8fd+28,c8eefb+47,bee4f8+68,b1d8f5+100 */
background: #e1ffff; /* Old browsers */
background: -moz-linear-gradient(top,  #e1ffff 0%, #e1ffff 4%, #fdffff 7%, #fdffff 7%, #e1ffff 17%, #e6f8fd 28%, #c8eefb 47%, #bee4f8 68%, #b1d8f5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e1ffff 0%,#e1ffff 4%,#fdffff 7%,#fdffff 7%,#e1ffff 17%,#e6f8fd 28%,#c8eefb 47%,#bee4f8 68%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 ); /* IE6-9 */
 
    
  }
  
  .inverse-dropdown{
  background-color: black;  
}
  .inverse-dropdown li a{
    color:white;
  }
  
  .inverse-dropdown li a:hover{
    color:black;
  }
  
  .content{
     background: lightgrey;
  }
  
  .footer{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+86,207cca+93,7db9e8+100 */
background: #1e5799; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #1e5799 0%, #2989d8 86%, #207cca 93%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #1e5799 0%,#2989d8 86%,#207cca 93%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 
  }
  
  .navigation {
margin: 10px 20px; padding-bottom: 10px;
width: 560px;
}
.navigation a:link,
.navigation a:visited {
float: left;
display: block;
margin: 10px 10px 0 0;
padding: 5px 7px;
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
color: #fff;
background: #2C76A6;
border-width: 1px;
  border-style: solid;
  border-color: #86BBDF #245F86 #245F86 #86BBDF;
}
.navigation a:hover {
   background: #FF3399;
   border-width: 1px;
  border-style: solid;
border-color: #FF75BA #EA0075 #EA0075 #FF75BA;
}
  
</style>
 
Thus, you eliminate all the background images from the template that can create horizontal scrolling, replace the background images on the CSS gradients.
Let’s wrap the content and footer in the .container class and use the Bootstrap Grid System.
 
<!-- content-outer -->
<div class="container content">   
<div class="row">   
       <div class="col-sm-11 col-md-offset-1">
         <span class="pull-right">
    <img src="/file/theme/add.jpg" alt="" width=200/>
  </span> 
<div style="padding-top:50px;">      
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adds -->
</script>
      </div>
    </div>
</div>  
  <div class="row">
    <div class="col-sm-10">
      <!—content-->
      <p>
       &nbsp;
      </p>
    </div>
  </div>
 </div>
 
<!-- /content-out -->
 
<!-- footer-outer -->
    <div class="container footer"> 
        
      <p style="position: fixed; bottom: 12px; right: 5px; opacity: 1; cursor: pointer;"><a href="#top" style="color:white;">Top</a></p>
        <div class="row">
    <div class="col-*-* text-center">     
      
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
 
        </div>
     <div class="row" style="color:darkblue;">
        <div class="col-*-* text-center">
          <br/>
        <p>
          &copy; 2016 <strong> </strong>
         <strong> admin@.com</strong>
        </p>
        </div>
      </div>        
  </div>
 
<!-- /footer-outer -->
 

You can download the book Rapid development of modern and responsive websites with Bootstrap here.

Our services

Our developments are at the forefront of high technologies

We design and develop web sites

Individual site design
Creating dynamic sites
Website layout and programming

We develop information systems

Automation of business processes for small and medium business
Collection, storage and processing of data
Using cloud technologies

We create mobile apps

Integration with a Web site
Creating mobile versions of web sites
Using Augmented Reality and Computer Vision

About us

NOV Tech Solutions specializes in developing services for operational management of business, creating web and mobile applications on order

NOV Tech Solutions is a team of highly qualified professionals working for the result

We work quickly and efficiently, using the most modern technologies

We appreciate and take care of our customers, constantly improving the service and expanding the list of services

Our partners

Contacts