【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页
2024-05-13 02:59:00
文章目录
- 1.bootstrap基本模板：meta/title，link/script
- 2.两种布局容器/栅格系统：自动补
- 3.样式_表格/按钮/图片/表单：class属性，for属性联动
- 4.组件_分页/导航条：nav横着，laquo书名号《，sr-only
- 5.插件_模态框和轮播图： class="modal-header" 头
- 6.案例_黑马旅游首页：class=img-responsive：图片压缩
1.bootstrap基本模板：meta/title，link/script
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 支持IE(edge) : --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 视图窗口 , 内容 = 设备宽度(浏览器) 初始比例1 (0.25~5) --><!-- 上述3个meta标签 必须 放在最前面，任何其他内容都 必须 跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap : html + css + js + jquery --><!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">--> <!--如下不需要连网--><link href="../css/bootstrap.css" rel="stylesheet"> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="../js/jquery-3.3.1.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="../js/bootstrap.js"></script><!-- 向下兼容: 兼容IE9一下的版本 --> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]>
<!-- <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>--><![endif]-->
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<h1>你好，世界！</h1>
</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><!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<h1>你好，世界！</h1>
</body>
</html>
2.两种布局容器/栅格系统：自动补
<!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><style>div{border: 1px solid red;height: 100px;}.my{color: blue;}.your{font-size: 50px;}</style>
</head><!--111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><span class="my your">span</span> <!--一个标签引用多个类样式--> <!--写一个网页(一个图片200px宽) : 屏幕宽1200px (写6个) 屏幕宽600px(3个) 200px(1个) 做适配: 根据当前的屏幕宽度,改变自己的显示策略 (工作量大：if else)响应式布局（如下两种）: 只要写一套布局, 根据不同的屏幕大小动态变化显示策略 www.jd.com m.jd.com1.布局容器1. .container-fluid (类选择器样式) : 容器-流动 (流式布局 : 100%)2. .container : 支持响应式布局（不是上行的占100%） @media (min-width: 1200px) 底层是媒体查询 : if ... else if....container {width: 1170px;}浏览器的宽度 > 1200px ,那么布局宽度=1170px -> large lg 大屏幕电脑浏览器的宽度 > 992px ,那么布局宽度=970px -> medium md 中屏幕电脑浏览器的宽度 > 768px ,那么布局宽度=750px -> small sm 平板浏览器的宽度 < 768px ,那么布局宽度=100% -> extra small xs 手机2.栅格系统容器 > 行 > 列一行12列 原理: 浮动float visible-lg : 大屏可见，其他屏这列不可见hidden-lg : 大屏不可见 --><!--如下是两种布局容器 --><div class="container-fluid"></div><div class="container"></div><!--如下是栅格系统 --><div class="container"> <!-- .container按tab键 --> <div class="row"> <!--行--> <!--如下如果不设置sm，当屏幕是sm时，去找xs--><div class="col-xs-12 col-md-4 col-lg-3 hidden-lg">1</div> <!--列--> <div class="col-xs-12 col-md-4 col-lg-3">2</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">3</div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">4</div></div></div>
</body>
</html>
如下是两种布局容器，上下对应。
如下全是栅格系统，1行12列（每个div跨3列，最后一个div改为4了），如下数字4每个横跨4列。
如下先看右边浏览器大小即屏幕大小为984小于992为sm屏幕，所以选择sm横跨6列，所以显示2列。
3.样式_表格/按钮/图片/表单：class属性，for属性联动
<!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"> <!--点进bootstrap.css可修改table-striped等参数--><script src="../js/jquery-3.3.1.js"></script><script src="../js/bootstrap.js"></script>
</head><!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><table class="table table-striped table-bordered table-hover"> <!--table-striped:隔行换色。table-bordered：带灰色边框。table-hover: 触摸换色--><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>1</td><td></td><td></td><td></td></tr></table>
</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><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<hr>
<input type="button" value="按钮">
<button>按钮2</button>
<a href="#">超链接</a> <!-- a标签的本质也是按钮--><hr><input type="button" value="我的按钮" class="btn btn-success"> <!-- 成功颜色绿色 -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<button type="button" class="btn btn-link">（链接）Link</button><hr><hr>
<img src="../img/banner_1.jpg" class="img-responsive img-circle" alt="Responsive image">
</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><!--111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body>
<!--label : 默认有一个字体加粗效果联动效果: 设置: for属性值要跟其他的某个标签的id一致 (关联)
--><b>label</b>label <!--加粗--><div><label>用户名</label> <!--加粗--><input type="text"> <!--点击用户名，鼠标不会自动跳到这个框中--></div><!--111111111111111111111111111111111111111111111111111111111111111111111111111--> <hr> <form action=""><div class="form-group"> <!--form-group：把设置成一整个模块，横跨满网页。上下成组的div间还有间距--><label for="exam">Email address</label> <!-- for="exam"关联到下行id --> <input type="email" class="form-control" id="exam" placeholder="Email"> <!--点击Email address，鼠标不会自动跳到这个框中--></div><!--111111111111111111111111111111111111111111111111111111111111111111111111111--> <div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"><!--form-control：圆角矩形样式--></div><!--111111111111111111111111111111111111111111111111111111111111111111111111111--> <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><!--111111111111111111111111111111111111111111111111111111111111111111111111111--> <div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form>
</body>
</html>
4.组件_分页/导航条：nav横着，laquo书名号《，sr-only
<!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><!--111111111111111111111111111111111111111111111111111111111111111111111111111-->
<body><!--nav : div语义化标签 header/main/footernavigation 导航 nav bar 导航栏/条--><nav aria-label="Page navigation"><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span> </a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li></ul></nav>
</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>
<nav class="navbar navbar-default"><div class="container-fluid"> <!--第一部分 : 商标 和 汉堡按钮。 data-target : 某个id值 -> 关联 --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <!--如上data-target绑定下面第二部分id，即button点击事件被触发会关联下面第二部分--> <span class="sr-only">Toggle navigation</span><!--sr-only:screen reader:屏幕阅读器:声音--> <span class="icon-bar"></span> <!--汉堡按钮三条横线--><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="http://www.itcast.cn">传智播客</a> <!--商标--></div><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--> <!--第二部分 : 导航选项: 汉堡按钮展开部分--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">黑马程序员 <span class="sr-only">(current)</span></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> <!--这行span就是多了一个箭头，去除了还可下拉--> </a><ul class="dropdown-menu"><li><a href="#">酷丁鱼</a></li><li><a href="#">传智学院</a></li><li><a href="#">院校邦</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button> <!--class="btn btn-default"设置了样式 --> </form></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</nav>
</body>
</html>
5.插件_模态框和轮播图： 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>
6.案例_黑马旅游首页：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="data: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="data: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="data:image/hotel_tel.png" class="img-responsive" width="70%"/></div></div></div><!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111111--> <!-- 导航条 --> <!--第3行，可以将前一文章导航栏复制进来--> <nav class="navbar navbar-default"><div class="container-fluid"><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="#">首页</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">门票 <span class="sr-only">(current)</span></a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li><li><a href="#">酒店</a></li></ul></div> <!-- /.navbar-collapse --></div> <!-- /.container-fluid --></nav><!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111--><!--轮播图--> <!--第4行，可以将上一节复制进来--> <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="data:image/banner_1.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="data:image/banner_2.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="data:image/banner_3.jpg" alt="..."><div class="carousel-caption">...</div></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> <!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111111--><div class="container-fluid"> <!--第5行--><div class="row"><!-- <img src="data:image/icon_5.jpg"/><b>黑马精选</b><br/><span style="border-bottom: 2px solid #ffc900;width: 100%;" >2</span>--><!--border-bottom 黑马精选 底部的横线--><div class="jx_top" style="border-bottom: 2px solid #ffc900;height: 40px"><img src="data:image/icon_5.jpg"><span>黑马精选</span></div></div></div><!--111111111111111111111111111111111111111111111111111111111111111111111111111111111111--><div class="container-fluid"> <!--第6行，列比例：3 3 3 3--> <div class="row"> <div class="col-md-3"><img src="data:image/jiangxuan_1.jpg" class="img-responsive" /><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div></div><div class="col-md-3"><img src="data:image/jiangxuan_1.jpg" class="img-responsive" /><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div></div><div class="col-md-3"><img src="data:image/jiangxuan_1.jpg" class="img-responsive" /><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div></div><div class="col-md-3"><img src="data:image/jiangxuan_1.jpg" class="img-responsive" /><div class="caption"><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div></div></div></div><!--11111111111111111111111111111111111111111111111111111111111111111111111111111111111--><div class="container-fluid"> <!--第7行--> <div class="row"><div class="jx_top" style="border-bottom: 2px solid #ffc900;height: 40px ; margin-bottom: 10px"><img src="data:image/icon_6.jpg"><span>国内游</span></div></div></div><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--><div class="container-fluid"> <!--第8行--><div class="row"><div class="col-md-4"><img src="data:image/guonei_1.jpg" class="img-responsive"/></div><div class="col-md-8"> <!--看成12列，下面是自己的相对比例--><div class="row"><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div></div></div></div></div><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--> <div class="container-fluid"><div class="row"><!-- <img src="data:image/icon_5.jpg"/><b>黑马精选</b><br/><span style="border-bottom: 2px solid #ffc900;width: 100%;" >2</span>--><div class="jx_top" style="border-bottom: 2px solid #ffc900;height: 40px; margin-bottom: 10px"><img src="data:image/icon_6.jpg"><span>境外游</span></div></div></div><!--111111111111111111111111111111111111111111111111111111111111111111111111111111111--><div class="container-fluid"><div class="row"><div class="col-md-4"><img src="data:image/guonei_1.jpg" class="img-responsive"/></div><div class="col-md-8"><div class="row"><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div><div class="col-md-4"><img src="data:image/jiangxuan_4.jpg" class="img-responsive"/><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><span style="color: red">网付价: ￥899</span></div></div></div></div></div><!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111--> <div class="container-fluid"><div class="row"><img src="data:image/footer_service.png" class="img-responsive" /></div><div class="row text-center" style="height: 40px;line-height: 40px;background-color: #ffc900;">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006‐2018, All Rights Reserved 苏ICP备16007882</div></div></div>
</body>
</html>
【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页相关推荐
- 【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第六天移动端轮播图
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 【前端学习-16】【day06】WebAPI编程/动画函数封装/回调函数/轮播图/自动播放/节流阀/返回顶部/筋斗云/触屏事件/触屏事件对象/
新增动画前进后退效果 案例:轮播图 1.显示隐藏功能 2.动态生成小圆圈 3.排他思想 4.开始滚动 5.右侧按钮 6.克隆第一张图片 7.小圆圈跟着右侧按钮变化 8.序号和点击的要统一 9.左侧代码 ...
- Bootstrap 栅格系统 理解与总结
Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
- 如何使用BOOTSTRAP 栅格系统？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...
- Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- bootstrap 栅格系统实现类似table跨行
2019独角兽企业重金招聘Python工程师标准>>> 通过bootstrap 栅格系统实现类似table跨行 的效果,如下: 具体代码如下: <div class=" ...
- Bootstrap栅格系统扩展 五格
Bootstrap栅格系统布局的魅力是毋容置疑的,但是再好的东西也会有不完美的地方,比如当布局上需要水平排列5列平分宽度时,bootstrap就显得比较尴尬了,这时候就需要老司机按照它的命名风格自定义 ...
- bootstrap栅格系统布局原理
简介 栅格系统用于通过一系列的行(row)与列(col)组合来创建页面布局,你的内容就可以放入这些创建好的布局中.下面介绍一下栅格bootstrap栅格系统的工作原理: 行(row)必须放在.cont ...
最新文章
- 各大浏览器 CSS3 和 HTML5 兼容速查表
- sap data service安装方法
- 跟小静学MVC3[01]--创建第一个MVC3项目
- linux-gcc 编译时头文件和库文件搜索路径
- php 获取 url 的操作 非常有用！
- keras 中文文档学习一
- PCM格式音频数据的读取
- 高中计算机学考题库,高中信息技术学业水平考试试题汇总(含答案)
- 加号和减号在一起怎么读_加号和减号
- local variable ‘count‘ referenced before assignment
- windows系统的包管理器【choco】
- bitbucket配置_如何配置Bitbucket的ssh
- 基于JAVA医院预约挂号系统设计与实现 开题报告
- 26岁从财务转行软件测试，4年沉淀我已经是25k的测开工程师...
- 利用fiddler和低版本的iTunes实现iOS抓包
- foxmail发邮件时总提示接收密码错误是怎么回事
- 多态的概念，特点和优缺点
- 马斯克变身“基建狂魔”，Boring Company能打入中国市场吗？
- 江苏科技大学 计算机复试内容,2020年江苏科技大学电子信息学院考研复试科目及参考书...
- 给赞!移动端网页调试利器-uc开发者工具