Bootstrap网站页面练习实例

整体页面

整个页面分为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项目