页面效果：
知识点总结：
Bootstrap：
class= "container-fluid"：表示块元素width%100
<div class="row"></div>：Bootstrap 中，“row”类主要用于保存其中的列。Bootstrap 将每一行划分为 12 个虚拟列
class="img-responsive":响应式图片
class="col-xx-x"：设置块元素占的列数（根据设备大小）
class="thumbnail"：为图片添加边框
html
<img src="">:图片标签
<div></div>自定义块元素
<p></p> 定义段落。
<span></span> 用于对文档中的行内元素进行组合
<input>：输入框
<button>:按钮
placeholder:输入框默认属性
css
padding:内边距 控件中内容距离控件的边缘的距离。
margin:外边距 指的是当前控件和父控件的边距。
left/right/top/bottom：位置
border:边框
height：高度
width：宽度
text-align：center:左右居中
line-height：（height)上下居中
class~.className{}:类选择器
background-color:rgba(0,0,0,0~0.1)带透明度的背景颜色
第一部分：
<!-- 页眉部分 -->
<header class="container-fluid">
<!--最上面的相应式图片 -->
<div class="row">
<img src="../素材图片/images/top_banner.jpg" class="img-responsive">
</div>
<!-- paddingtop设置边距 -->
<div class="row paddingtop">
<!-- logo -->
<div class="col-md-3"><img src="../素材图片/images/logo.jpg"></div>
<!-- 搜索框 -->
<div class="col-md-5">
<input class="search_input" placeholder="请输入线路名称"><a class="search_btn" href="#">搜索</a></div>
<!-- 图 -->
<div><img src="../素材图片/images/hot_tel.jpg" class="img-responsive"></div>
</div>
<!-- 导航栏 -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- 轮播图 -->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../素材图片/images/banner_1.jpg" alt="..." class="img-responsive">
</div>
<div class="item">
<img src="../素材图片/images/banner_2.jpg" alt="..." class="img-responsive">
</div>
<div class="item">
<img src="../素材图片/images/banner_3.jpg" alt="..." class="img-responsive">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>第二部分：
<div class="container">
<div class="row jx" >
<img src="../素材图片/images/icon_5.jpg" >
<span ><strong>黑马精选</strong></span>
</div>
<div class="row">
<div class="col-md-3 ">
<div class="thumbnail">
<img src="../素材图片/images/jiangxuan_1.jpg">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<span>￥699</span>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../素材图片/images/jiangxuan_1.jpg">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<span>￥699</span>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../素材图片/images/jiangxuan_1.jpg">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<span>￥699</span>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="../素材图片/images/jiangxuan_1.jpg">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<span>￥699</span>
</div>
</div>
</div>
<div class="row jx">
<img src="../素材图片/images/icon_6.jpg"><strong>国内游</strong>
</div>
<div class="row">
<div class="col-md-4 paddingtop">
<img src="../素材图片/images/guonei_1.jpg">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="../素材图片/images/jiangxuan_1.jpg">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<span>￥699</span>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="../素材图片/images/jiangxuan_1.jpg">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<span>￥699</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="../素材图片/images/jiangxuan_1.jpg">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<span>￥699</span>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="../素材图片/images/jiangxuan_1.jpg">
<p>上海飞三亚五天4晚自由行(春节销售+亲子+蜜月+自由行)</p>
<span>￥699</span>
</div>
</div>
</div>
</div>
</div>第三部分：
图片+div（文字）
<div class="container-fluid">
<div class="row">
<img src="../素材图片/images/footer_service.png" class="img-responsive">
</div>
<div class="row">
<div class="footer">
传智播客教育科技股份有限公司 版权所有Copyright 2006-2022, All Rights Reserved 苏ICP备16007882号-1 营业执照 增值电信业务经营许可证 出版物经营许可证
</div>
</div>
</div>css代码：
<style>
div[class*="paddingtop"]{
padding: 20px;
}
.search_input{
float: left;
border: 2px solid yellow;
width: 300px;
/* 左边距，使左面字不紧贴着输入框 */
padding-left: 10px;
height: 35px;
}
.search_btn{
border: 2px solid yellow;
float: left;
padding: 10px;
height: 35px;
width: 100px;
text-align: center;
line-height: 10px;
background-color: rgba(165, 226, 23, 0.5);
}
div[class*="jx"]{
border-bottom:2px solid yellow ;
padding: 5px;
}
.thumbnail{
margin: 20px;
padding: 20px;
}
.footer{
background-color: rgba(184, 167, 16, 0.5);
height: 50px;
text-align: center;
font-size: small;
line-height: 50px;
}
</style>
