![fd491ed4fcea242b626cf358ce2ad452.png](https://img-blog.csdnimg.cn/img_convert/fd491ed4fcea242b626cf358ce2ad452.png)
微票制作 使用bootstrap制作响应式网页
4.1 响应式导航制作
效果图
![308e566aeea38000e6e661358fd15d7a.png](https://img-blog.csdnimg.cn/img_convert/308e566aeea38000e6e661358fd15d7a.png)
![fd9cb227aa545c3f7b5c4c2d03fbf789.png](https://img-blog.csdnimg.cn/img_convert/fd9cb227aa545c3f7b5c4c2d03fbf789.png)
代码
<!-- 导航 -->
<div class="header">
<nav class="navbar navbar-inverse" id="navbar">
<div class="container">
<!-- 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="#">
<img src="image/logoMsg.png" alt="">
</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><a href="#">全国</a></li>
<li><a href="#">演出</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">电影 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">我的微票儿 <span class="label label-danger">New</span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div><!-- /input-group -->
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
4.2 轮播图区域制作
布局思路:轮播图是9 -3 分布局 9列是轮播 3列是右侧内容
![cb5627b772df34f5ac5ff4128a2e9e45.png](https://img-blog.csdnimg.cn/img_convert/cb5627b772df34f5ac5ff4128a2e9e45.png)
![7ebabd9236cfcb61e5437183717bfab2.png](https://img-blog.csdnimg.cn/img_convert/7ebabd9236cfcb61e5437183717bfab2.png)
代码实现
boostrap轮播js
![28c0333ffa64863159620f74935bafb6.png](https://img-blog.csdnimg.cn/img_convert/28c0333ffa64863159620f74935bafb6.png)
代码解析
![79490a6eb9b35ff3dd02f7ea84b29f77.png](https://img-blog.csdnimg.cn/img_convert/79490a6eb9b35ff3dd02f7ea84b29f77.png)
附带网站网址:
https://v3.bootcss.com/javascript/#carousel