前端9bootstrap：模态框/轮播图，旅游首页
Posted 码农编程录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端9bootstrap：模态框/轮播图，旅游首页相关的知识，希望对你有一定的参考价值。
1.插件_模态框和轮播图： class=“modal-header” 头
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/bootstrap.js"></script>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<!-- Button trigger modal --> <!-- 按钮触发器 : data-target -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal <!-- btn-lg: 尺寸 -->
</button>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<!-- Modal --> <!-- 模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"> <!-- 头-->
<!--
data-dismiss="modal" : 这个按钮被点击,模态框消失
times：乘号，模态框右上角
-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<div class="modal-body"> <!-- 中--> <!--加入一个表单-->
<form action="">
<div class="form-group">
<label for="exam">Email address</label>
<input type="email" class="form-control" id="exam" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<div class="modal-footer"> <!-- 尾-->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/bootstrap.js"></script>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<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" ></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class="active"></li>
</ol> <!--网页右击刷新会回到class="active"位置这张图位置，下面class="item active"也要对应-->
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<!-- 图片主体 --> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox"> <!--listbox列表盒-->
<div class="item">
<img src="../img/banner_1.jpg" alt="..."> <!-- 0索引-->
<div class="carousel-caption">
西安有大雁塔,
</div>
</div>
<div class="item">
<img src="../img/banner_2.jpg" alt="..."> <!-- 1索引-->
<div class="carousel-caption">
...
</div>
</div>
<div class="item active">
<img src="../img/banner_3.jpg" alt="..."> <!-- 2索引-->
<div class="carousel-caption">
...
</div>
</div>
</div>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<!-- Controls : 控制器 --> <!-- data-target和href一个性质 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<!-- glyphicon-chevron-left是一个图标，封装在font文件夹文件里 -->
<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>
</body>
</html>
2.案例_黑马旅游首页：class=img-responsive：图片压缩
//index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 javascript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
/* div{
border: 1px solid red;
}*/
/* search_input 文本框：宽400，高36，左浮动，边框2，颜色#ffc900，左内边距10，外轮廓outline设置为0
.search_button 点击按钮，是一个链接：左浮动，宽90，高36，背景色#ffc900，行高36，文本居中*/
.search_input{
width: 300px;
height: 36px;
float: left;
border: 2px solid #ffc900;
padding-left: 10px;
outline: 0px;
}
.search_button{
float: left;
width: 90px;
height: 36px;
background-color: #ffc900;
line-height: 36px;
text-align: center;
}
</style>
</head>
<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<div class="container">
<div class="container-fluid"> <!--第1行一张图-->
<img src="image/top_banner.jpg" class="img-responsive "/>
</div>
<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<div class="container">
<div class="row "> <!--第2行，列的比例4 5 3-->
<div class="col-md-4 text-center">
<img src="image/logo.jpg" class=""/>
</div>
<!--.search_input 文本框：宽400，高36，左浮动，边框2，颜色#ffc900，左内边距10，外轮廓outline设置为0
.search_button 点击按钮，是一个链接：左浮动，宽90，高36，背景色#ffc900，行高36，文本居中-->
<div class="col-md-5" style="padding-top: 10px">
<input type="text" placeholder="请输入" class="search_input"/>
<!-- <button value="搜索" class="search_button"></button>-->
<a href="#" class="search_button">搜索</a>
</div>
<div class="col-md-3">
<img src="image/hotel_tel.png" class="img-responsive" width="70%"/>
</div以上是关于前端9bootstrap：模态框/轮播图，旅游首页的主要内容，如果未能解决你的问题，请参考以下文章
前端Vue项目：旅游App-（21）detail：房屋详情页及其数据返回导航栏轮播图
bootstrap中轮播图模态框提示框/弹出框滚动监听弹性布局响应式flex多媒体对象
django-vuecelery延迟任务定时任务 django中使用celery 秒杀功能 双写一致性 首页轮播图定时更新 课程前端页面