Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<header class="header">
<div class="width_940">
<h1>hhh</h1>
</div>
</header>
<nav class="nav_top">
<div class="nav_top_inner width_940">
<ul>
<li>
<a href="#">О компании</a>
</li>
<li>
<a href="#">Услуги</a>
</li>
<li>
<a href="#">Что нового</a>
</li>
<li>
<a href="#">Правовая база</a>
</li>
<li>
<a href="#">Техническая база</a>
</li>
<li>
<a href="#">Контакты</a>
</li>
</ul>
<div class="language_switcher">
<a href="#">En</a>
</div>
</div>
</nav>
<div class="container_main width_940">
<div class="row">
<div class="col-xs-4 bg_blue">
<div class="bg_blue_inner">
column
</div>
</div>
<div class="col-xs-4 bg_blue">
<div class="bg_blue_inner">
column
</div>
</div>
<div class="col-xs-4 bg_blue">
<div class="bg_blue_inner">
column
</div>
</div>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<footer class="footer">
<div class="footer_inner width_940">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img{
border: none;
margin: 0;
outline: none;
padding: 0;
}
html,
body{
min-width: 940px !important;
}
ul{
list-style-type: none;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }
textarea{
resize: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}
.clear{
clear: both;
}
.hide{
display: none !important;
}
.wrapped{
width: 940px;
margin: 0 auto;
}
input::-webkit-input-placeholder {
color: #0096ef;
}
input:-moz-placeholder {
color: #0096ef;
}
.bg_blue_inner{
background: blue;
}
.width_940{
width: 940px !important;
margin: 0 auto;
}
/*************************************************************************************************************** GLOBAL_layout */
.header{
min-height: 112px;
position: fixed;
left: 0;
right: 0;
top: 0;
background: yellow;
z-index: 1000;
}
.nav_top{
background: #053f8c;
}
.container_main{
margin-top: 112px;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
/*************************************************************************************************************** GLOBAL_blocks : nav_top_inner */
.nav_top_inner{
}
.nav_top_inner > ul{
overflow: hidden;
}
.nav_top_inner > ul > li{
float: left;
margin-right: 50px;
}
.nav_top_inner > ul > li > a{
min-height: 48px;
border-bottom: 2px solid #053f8c;
}
.nav_top_inner .language_switcher{
}
.nav_top_inner .language_switcher a{
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */