@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
@media (min-width: 992px) {
.navbar-toggle {
display: none;
}
}
img{width:100%; max-width: реальный размер этого изображения; height: auto;}
, ну и при адаптивности на определенном размере экрана меняйте эти значения, при совсем мелком расширении перестраивайте блоки. Короче ничего сложного тут нет. gulp.task('html', function() {
gulp.src(src.html)
.pipe(rigger())
.pipe(gulpIf(env !== 'dev', minifyHTML()))
.pipe(gulp.dest(outputDir))
.pipe(connect.reload())
});
//= template/header.html
span {
opacity: 0;
@include transition(0.6s opacity);
width: 100%;
height: 100%;
font: $font_regular;
color: $white;
display: block;
text-align: center;
padding: 40% 0 0;
&:hover {
background: rgba(0,0,0,0.8);
opacity: 1;
@include transition(0.6s opacity);
}
}
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12"></div>
<div class="col-sm-12"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="block1"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="block2"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="block3"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="block4"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="block5"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="block6"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="block7"></div>
</div>
</div>
</div>
</div>
</div>