整体页面
整个页面分为6大部分
整体效果
在使用Bootstrap时要注意响应式,组件要看情况设置固定的宽高。
导航栏
在使用导航栏的时候要注意搜索框组件,它的宽度设置成响应式
@media screen and (min-width:768px) and (max-width:988px) {
.input-group {
width: 150px;
}
}
广告条
这里面就是先放一个巨幕组件,然后在巨幕中放轮播图和列表,轮播图中图片宽高设置成为100%
主体内容部分
该部分整体结构
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-12"></div>
<div class="col-md-3 col-sm-4 col-xs-12"></div>
</div>
</div>
媒体部分
媒体部分与主体内容相似,将列表换成了媒体组件
项目源码
gitee地址:Bootstrap项目