前端 Bootstrap 代码
2024-05-24 16:10:43
代码压缩包下载
https://download.csdn.net/download/qq_42740465/87638270?spm=1001.2014.3001.5503
第一天
01_ex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>*{margin:0;padding:0;box-sizing: border-box;}.container::after{content: "";display: block;clear:both;}div{border:2px solid #000;}.left,.middle,.right{float:left;}.left ul li{border:2px solid purple;list-style:none;}/*pad >=768px <=991px*/@media screen and (min-width:768px) and (max-width: 991px) {.container{width: 900px;margin:0 auto;}.left{width:30%}.middle{width:70%}.right{display:none;}.middle img{width:25%;padding:5px;}}@media screen and (min-width: 992px) {.container{width:1000px;margin:0 auto;}.left{width:20%}.middle{width:60%}.right{width:20%;}.middle img{width:25%;padding:5px;}}@media screen and (max-width:767px) {.container{width: 700px;margin:0 auto;}.left{width:100%}.middle{width:100%}.right{width:100%}.middle img{width:50%;padding:5px;}}</style>
</head>
<body><div class="container"><!--左 --><div class="left"><ul><li><a href="">豆蔻年华</a></li><li><a href="">豆蔻年华</a></li><li><a href="">豆蔻年华</a></li><li><a href="">豆蔻年华</a></li></ul></div><!--中 --><div class="middle"><div class="imgs"><img src="1.jpg" alt=""/><img src="2.jpg" alt=""/><img src="3.jpg" alt=""/><img src="4.jpg" alt=""/></div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores assumenda debitis ducimus ea expedita harum inventore laboriosam maiores nobis porro possimus quae quo ratione recusandae reiciendis rerum, soluta voluptate?</p></div><!--右 --><div class="right"><p>右侧广告 Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad architecto commodi corporis cumque dicta fugiat illo nemo odio officiis pariatur perferendis qui quis quo totam vel voluptatem voluptatibus, voluptatum.</p></div></div>
</body>
</html>
01_media.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><style>body{maring:0;padding:0;}/*pc >=992px*/@media screen and (min-width: 992px) {h1,p{background:#000;color:#f00;}}/*pad >=768px <=991px*/@media screen and (min-width: 768px) and (max-width: 991px) {h1,p{background:#00f;color:#ff0;}}/*phone <=767px*/@media screen and (max-width: 767px) {h1,p{background:#ff0;color:#f0f;}}</style>
</head>
<body><h1>根据浏览网页的设备不同(尺寸，方向，硬件，解析度等)，有选择的，执行一部分css样式，忽略其他css样式</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci atque corporis expedita molestiae nam optio veniam! A debitis, doloremque doloribus magni maiores minus necessitatibus odit officia optio perspiciatis provident sapiente.</p>
</body>
</html>
02_css.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style></style>
</head>
<body>
<div class="container-fluid "><h1>浮动</h1><div class="border border-info float-sm-left float-md-right float-lg-none ">浮动相关的class</div><br/><hr/><br/><h1>边框</h1><div class="border border-danger">边框相关的class</div><br/><hr/><br/><h1>table相关的class</h1><table class="table table-bordered table-danger table-hover table-striped"><tr><td>序号</td><td>名称</td><td>类型</td></tr><tr><td>1001</td><td>魔女</td><td>异能</td></tr><tr><td>1002</td><td>汉娜</td><td>杀手</td></tr><tr><td>1003</td><td>阿丽塔</td><td>科幻</td></tr></table><br/><hr/><br/><h1>列表相关class</h1><ul class="list-unstyled list-group"><li class="list-group-item list-group-item-danger active">这个杀手不太冷</li><li class="list-group-item list-group-item-danger disabled">泰坦尼克</li><li class="list-group-item list-group-item-danger">肖申克的救赎</li><li class="list-group-item list-group-item-danger">阿甘正传</li><li class="list-group-item list-group-item-danger">海上钢琴师</li></ul><br/><hr/><br/><h1>文字相关</h1><div class="text-danger h1 text-capitalize text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequuntur, cum dicta eum hic itaque iure minus molestias mollitia nemo nisi porro quos reprehenderit sapiente sint tenetur veniam voluptas! Consequuntur.</div><br/><hr/><br/><h1>图片相关</h1><img class="rounded" src="1.jpg"/><img class="rounded-circle" src="1.jpg"/><img class="img-thumbnail" src="1.jpg"/><img class="img-fluid" src="1.jpg"/><br/><hr/><br/><h1>按钮相关的class</h1><input class="btn btn-danger" type="button" value="危险"/><button class="btn btn-success btn-sm">成功</button><a href="#" class="btn btn-warning btn-lg">警告</a><button class="btn btn-info btn-block">信息</button><button class="btn btn-primary btn-link">主要</button><button class="btn btn-secondary">次要</button><button class="btn btn-dark">深色</button><button class="btn btn-light">浅色</button><button class="btn btn-outline-danger">红色边框</button><button class="btn btn-outline-info">蓝色边框</button><button class="btn btn-outline-dark">深色边框</button>
</div>
</body>
</html>
bootStrap.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"></div>
</body>
</html>
01_sprite.html
<!doctype html>
<html><head><title></title><meta charset="utf-8"><style>div{width:50px;height:50px;border:2px solid #f00;background-image:url(s1.jpg);background-repeat:no-repeat;}#d1{background-position:0px 0px;}#d2{background-position:0px 0px;}#d3{background-position:0px 0px;}</style></head><body><div id="d1"></div><div id="d2"></div><div id="d3"></div></body>
</html>
第二天
00_home.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>.my_h{height:400px;background:linear-gradient(to right,#0d0536,#562949);}.my_pt{padding-top:130px;}.my_font_size{font-size:60px;}@media screen and (min-width:992px) {.img_width{width:25%;}}@media screen and (max-width:767px){.img_width{width:100%;}}@media screen and (max-width:991px) and (min-width:768px){.img_width{width:50%;}}</style>
</head>
<body>
<div class="container"><ul class="list-unstyled bg-dark clearfix mb-0"><li class="float-left p-3"><a class="text-white" href="#">Boot中文网</a></li><li class="float-left p-3"><a class="text-white" href="#">起步</a></li><li class="float-left p-3"><a class="text-white" href="#">CSS全局样式</a></li><li class="float-left p-3"><a class="text-white" href="#">组件</a></li><li class="float-left p-3"><a class="text-white" href="#">js插件</a></li><li class="float-left p-3"><a class="text-white" href="#">定制</a></li></ul><div id="content" class="text-center my_h my_pt"><h1 class="text-white mt-0 mb-3 my_font_size">BootStrap</h1><h5 class="text-muted mb-3">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h5><a href="#" class="btn btn-primary mb-3">Bootstrap3中文文档(v3.3.7)</a><p class="text-muted">Bootstrap2中文文档(v2.3.2)</p></div><div><img class="img_width" src="boot-1.png"/><img class="img_width" src="boot-2.png"/><img class="img_width" src="boot-3.png"/><img class="img_width" src="boot-4.png"/></div>
</div>
</body>
</html>
01_ex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container"><div class="p-3 bg-success border border-dark"><span class="h1">LOGO</span><input type="text" class="d-sm-block float-md-right"/></div><div class="border border-dark"><span class="h1">BootStrap</span><em class="h2 col">CSS</em>Type</div><div class="row mx-0"><div class="border border-dark col-lg-3 col-md-12 col-sm-12 px-0"><ul class="list-unstyled"><li><a href="#">盒马鲜生</a></li><li><a href="#">盒马鲜生</a></li><li><a href="#">盒马鲜生</a></li><li><a href="#">盒马鲜生</a></li></ul></div><div class="col-lg-6 col-md-12 px-0 col-sm-12 border border-dark"><div class="row mx-0 border border-dark"><img class="col-lg-3 col-md-6 col-sm-12 px-0" src="boot-1.png" alt=""/><img class="col-lg-3 col-md-6 col-sm-12 px-0" src="boot-2.png" alt=""/><img class="col-lg-3 col-md-6 col-sm-12 px-0" src="boot-3.png" alt=""/><img class="col-lg-3 col-md-6 col-sm-12 px-0" src="boot-4.png" alt=""/></div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam aspernatur, consectetur cupiditate delectus deserunt dicta dolorum ducimus eaque est excepturi expedita fugit ipsa iste labore magnam maxime minima necessitatibus perferendis perspiciatis porro quae quidem quo rem repellat repellendus rerum similique soluta tempore ullam ut vel voluptas voluptate! Accusamus, deserunt explicabo impedit necessitatibus nemo nobis quidem repellendus sapiente suscipit tempora tempore velit. Blanditiis consequatur cum debitis distinctio dolor ea ipsam iste labore, laboriosam minus modi molestiae pariatur praesentium quae quas, qui ratione tempora. Commodi ex facilis ipsam laudantium nisi quibusdam sunt? Ab adipisci aut corporis dolorem labore laboriosam, minima nulla odio, officia quo sapiente sint, totam voluptates. Debitis iure, magni nobis qui quod velit voluptates! A accusantium adipisci alias aliquam, at consequatur consequuntur eligendi error esse est eum, facilis harum illo impedit incidunt inventore iste iure labore libero maiores modi, nobis nulla officiis qui suscipit ut veritatis voluptas? Ad atque commodi consectetur cumque dicta dignissimos distinctio dolor doloribus dolorum eaque error expedita fuga fugit illo, impedit itaque laborum modi molestiae mollitia natus nulla officia officiis possimus quia, quis quod reiciendis repellat repellendus sequi sit tempora unde velit voluptatem? Ab architecto, totam. Animi architecto dolorum earum nulla optio quas sequi vel.</p></div><div class="col-lg-3 col-md-12 col-sm-12 border border-dark px-0">右侧广告 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet, architecto at, autem debitis deleniti dignissimos esse eveniet harum libero nemo nostrum nulla quaerat quia quod soluta sunt, veniam vero.右侧广告 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet, architecto at, autem debitis deleniti dignissimos esse eveniet harum libero nemo nostrum nulla quaerat quia quod soluta sunt, veniam vero.右侧广告 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet, architecto at, autem debitis deleniti dignissimos esse eveniet harum libero nemo nostrum nulla quaerat quia quod soluta sunt, veniam vero.</div></div>
</div>
</body>
</html>
01_grid.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>.container>div{border:2px solid #f00;}.container>div>div{border:2px solid #00f;}</style>
</head>
<body>
<div class="container"><div class="row"><div class="col-5">col-5</div><div class="col-7"><div class="row d-md-none"><div class="col-4">col-4</div><div class="col-4">col-4</div><div class="col-4">col-4</div></div></div></div><br/><hr/><br/><div class="row"><div class="col-4 offset-1">col-4</div></div><br/><hr/><br/><div class="row"><div class="col-sm-6">col-sm-6</div></div><div class="row"><div class="col-md-6">col-md-6</div></div><div class="row"><div class="col-lg-6">col-lg-6</div></div><br/><hr/><br/><div class="row"><div class="col">1</div><div class="col">2</div><div class="col">3</div><div class="col">4</div><div class="col">5</div><div class="col">6</div><div class="col">7</div><div class="col">8</div><div class="col">9</div><div class="col">10</div><div class="col">11</div><div class="col">12</div><div class="col">13</div><div class="col">14</div><div class="col">14</div><div class="col">14</div><div class="col">14</div><div class="col">14</div></div><br/><hr/><br/><h1>作业提示</h1><div class="row"><div class="col-lg-6 col-md-12"><div class="mr-5">111</div></div><div class="col-lg-6 col-md-12"><div class="ml-5">2222</div></div></div><br/><hr/><br/><h1>响应式栅格</h1><div class="row"><div class="col-lg-3 col-md-6 col-sm-12">1</div><div class="col-lg-3 col-md-6 col-sm-12">2</div><div class="col-lg-3 col-md-6 col-sm-12">3</div><div class="col-lg-3 col-md-6 col-sm-12">4</div></div><br/><hr/><br/><h1>一行三列1:1:1</h1><div class="row"><div class="col-4">col-4</div><div class="col-4">col-4</div><div class="col-4">col-4</div></div><h1>一行三列1:2:1</h1><div class="row"><div class="col-3">col-3</div><div class="col-6">col-6</div><div class="col-3">col-3</div></div><h1>一行四列1:1:1:1</h1><div class="row"><div class="col-3">col-3</div><div class="col-3">col-3</div><div class="col-3">col-3</div><div class="col-3">col-3</div></div><h1>一行四列1:2:2:1</h1><div class="row"><div class="col-2">col-2</div><div class="col-4">col-4</div><div class="col-4">col-4</div><div class="col-2">col-2</div></div><br/><hr/><br/><div class="row"><img class="col-lg-3 col-md-6 col-sm-12 px-0" src="boot-1.png" alt=""/><img class="col-lg-3 col-md-6 col-sm-12 px-0" src="boot-2.png" alt=""/><img class="col-lg-3 col-md-6 col-sm-12 px-0" src="boot-3.png" alt=""/><img class="col-lg-3 col-md-6 col-sm-12 px-0" src="boot-4.png" alt=""/></div><br/><hr/><br/><div class="row"><div class="col-1">col-1</div></div><div class="row"><div class="col-2">col-2</div></div><div class="row"><div class="col-3">col-3</div></div><div class="row"><div class="col-4">col-4</div></div><div class="row"><div class="col-5">col-5</div></div><div class="row"><div class="col-6">col-6</div></div><div class="row"><div class="col-7">col-7</div></div><div class="row"><div class="col-8">col-8</div></div><div class="row"><div class="col-9">col-9</div></div><div class="row"><div class="col-10">col-10</div></div><div class="row"><div class="col-11">col-11</div></div><div class="row"><div class="col-12">col-12</div></div>
</div>
</body>
</html>
02_ex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>div div{border:2px solid #f00;}</style>
</head>
<body>
<div class="container"><!-- 第一行，标题--><div class="row"><div class="col-12"><h1>BootStrap<em class="font-weight-normal">CSS</em><span class="font-weight-normal">Type</span></h1></div></div><!-- 第二行，搜索框--><div class="row"><div class="col-3 offset-9"><input type="text" class="form-control"/></div></div><!-- 第三行，主体--><div class="row"><div class="col-lg-3 col-md-4 col-sm-12"><ul class="list-unstyled"><li><a href="">Bootstrap</a></li><li><a href="">Bootstrap</a></li><li><a href="">Bootstrap</a></li><li><a href="">Bootstrap</a></li></ul></div><div class="col-lg-6 col-md-8 col-sm-12"><div><p>三人行，必有我师</p><p>三人行，必有我师</p></div><table class="table table-striped"><tr><td>编号</td><td>名称</td><td>作者</td><td>价格</td></tr><tr><td>001</td><td>西游记</td><td>成亮</td><td>9.9</td></tr><tr><td>001</td><td>西游记</td><td>成亮</td><td>9.9</td></tr><tr><td>001</td><td>西游记</td><td>成亮</td><td>9.9</td></tr><tr><td>001</td><td>西游记</td><td>成亮</td><td>9.9</td></tr></table></div><div class="col-lg-3 d-md-none d-lg-block bg-success col-sm-12"><h1>课程介绍</h1></div></div>
</div>
</body>
</html>
03_home.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>.my_h1{height:377px;}.my_h2{height:233px;}.bg_gray{background:#ddd;}</style>
</head>
<body>
<div class="container"><div class="row"><div class="col-lg-7 col-sm-12 px-0"><div class=" my_h1 bg_gray mr-lg-2 mb-2"></div></div><div class="col-lg-5 col-sm-12 px-0"><div class=" my_h1 bg_gray mb-2"></div></div><div class="col-lg-5 col-sm-12 px-0"><div class="my_h2 bg_gray mr-lg-2 mb-sm-2 mb-lg-0"></div></div><div class="col-lg-7 col-sm-12 px-0"><div class=" my_h2 bg_gray"></div></div></div>
</div>
</body>
</html>
04_ex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container"><ul class="list-unstyled bg-dark d-flex justify-content-around p-4"><li><img src="icon1.png"/><p>品质保障</p></li><li><img src="icon1.png"/><p>品质保障</p></li><li><img src="icon1.png"/><p>品质保障</p></li><li><img src="icon1.png"/><p>品质保障</p></li></ul>
</div>
</body>
</html>
04_flex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container"><h1>弹性布局</h1><div class="border border-dark d-flex flex-lg-row flex-md-column flex-sm-column-reverse justify-content-md-between"><div class="bg-danger">item1</div><div class="bg-warning">item2</div><div class="bg-info">item3</div></div>
</div>
</body>
</html>
05_form.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container"><form action="" class="form-group"><div>用户名称：<input class="form-control col-form-label-sm" type="text"/></div><div>用户密码：<input class="form-control col-form-label-lg" type="password"/></div><div class="form-check"><input class="form-check-input form-text" type="checkbox"/>自动登录</div><a href="">登陆</a></form>
</div>
</body>
</html>
06_ex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container"><h1>信息提示框</h1><div class="alert alert-info alert-dismissible"><span data-dismiss="alert" class="close">×</span>西安同学，回家敲代码。不敲完不许吃泡馍！！！</div><br/><hr/><br/><h1>下拉菜单</h1><div class="dropdown"><button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">点点我</button><ul class="dropdown-menu"><li>SKII</li><li>YSL</li><li>Audi</li><li>Benz</li></ul></div><br/><hr/><br/><h1>按钮组</h1><div class="btn-group-vertical btn-group-sm"><button class="btn btn-danger">小鸡炖蘑菇</button><button class="btn btn-primary">猪肉炖粉条</button><button class="btn btn-success">锅包肉</button><button class="btn btn-warning">酸菜汆白肉</button></div>
</div>
</body>
</html>
第三天
00_home.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>*{margin:0;padding:0}.top_height{height:377px;}.bottom_hiehgt{height:233px;}</style>
</head>
<body>
<div class="container"><div class="row mx-0"><div class="col-lg-7 col-sm-12 px-0"><div class="top_height bg-dark mr-lg-2 mb-2"></div></div><div class="col-lg-5 col-sm-12 px-0"><div class="top_height bg-dark mb-2 "></div></div><div class="col-lg-5 col-sm-12 px-0"><div class="bottom_hiehgt mr-lg-2 mb-sm-2 mb-lg-0 bg-dark"></div></div><div class="col-lg-7 col-sm-12 px-0"><div class="row mx-0"><div class="col-4 px-0"><div class="bottom_hiehgt bg-dark mr-2"></div></div><div class="col-4 px-0"><div class="bottom_hiehgt bg-dark mr-2"></div></div><div class="col-4 px-0"><div class="bottom_hiehgt bg-dark"></div></div></div></div></div>
</div>
</body>
</html>
01_ex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>.carousel-control-prev,.carousel-control-next{width: 4%;height: 20%;background-color: #aaa;border-radius: 0.5rem;top:40%;}.carousel-indicators li{width:0.8rem;height:0.8rem;background-color:#fff;margin-left:0.4rem;margin-right:0.4rem;border-radius: 50%;}.carousel-indicators .active{background-color: #0aa1ed;}</style>
</head>
<body>
<div class="container"><h1>徽章</h1><ul class="list-group"><li class="list-group-item">赞 <a class="badge badge-pill badge-danger" href="">666</a></li><li class="list-group-item">踩 <a class="badge badge-warning" href="">24</a></li><li class="list-group-item">关注 <a class="badge badge-primary" href="">145</a></li><li class="list-group-item">未读 <a class="badge badge-pill badge-danger" href="">...</a></li></ul><br/><hr/><br/><h1>巨幕</h1><div class="jumbotron bg-primary"><h2>今天好热</h2><p>气压低</p><p>话说多了，气不够</p><p>喝点凉水就好了</p></div><br/><hr/><br/><h1>模态框</h1><button data-toggle="modal" data-target="#d1" class="btn btn-info">打开模态框</button><div id="d1" class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4>信息收集</h4></div><div class="modal-body">请输入姓名<input type="text"/></div><div class="modal-footer"><button data-dismiss="modal" class="btn btn-danger">关闭</button></div></div></div></div><br/><hr/><br/><h1>焦点轮播图</h1><div id="lunbo" class="carousel" data-ride="carousel"><!-- 1.轮播图片--><div class="carousel-inner"><div class="carousel-item active"><img class="w-100" src="banner1.png"/></div><div class="carousel-item"><img class="w-100" src="banner2.png"/></div><div class="carousel-item"><img class="w-100" src="banner3.png"/></div><div class="carousel-item"><img class="w-100" src="banner4.png"/></div></div><!-- 2.左右箭头 16:15~16:30休息--><a data-slide="prev" href="#lunbo" class="carousel-control-prev"><span class="carousel-control-prev-icon"></span></a><a data-slide="next" href="#lunbo" class="carousel-control-next"><span class="carousel-control-next-icon"></span></a><!-- 3.轮播指示器--><ul class="carousel-indicators"><li data-target="#lunbo" data-slide-to="0" class="active"></li><li data-target="#lunbo" data-slide-to="1"></li><li data-target="#lunbo" data-slide-to="2"></li><li data-target="#lunbo" data-slide-to="3"></li></ul></div><br/><hr/><br/><h1>媒体对象</h1><div class="media border rounded p-3"><img src="chengliang.jpg" alt=""/><div class="media-body ml-3"><h4>闪闪亮亮</h4><p>180天团成员</p></div></div><br/><hr/><br/><h1>折叠导航栏</h1><div class="navbar navbar-expand-md bg-dark navbar-dark"><!-- 1.最前面不折叠不隐藏的菜单--><a class="navbar-brand" href="">Bootstrap中文网</a><!-- 2.折叠之后出现的按钮，小屏显示，大屏不显示--><button data-toggle="collapse" data-target="#content" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button><!-- 3.折叠的导航，小屏折叠，大屏横向--><div id="content" class="collapse navbar-collapse"><ul class="navbar-nav"><li class="nav-item"><a href="" class="nav-link">Boot3</a></li><li class="nav-item"><a href="" class="nav-link">Boot4</a></li><li class="nav-item"><a href="" class="nav-link">全局css</a></li><li class="nav-item"><a href="" class="nav-link">组件</a></li></ul></div></div><br/><hr/><br/><h1>手风琴</h1><div id="parent"><div class="card"><div class="card-header"><a data-toggle="collapse" class="card-link" href="#c1">卡片一</a></div><div data-parent="#parent" id="c1" class="collapse"><div class="card-body ">Lorem ipsum dolor sit amet.</div></div></div><div class="card"><div class="card-header"><a data-toggle="collapse" class="card-link" href="#c2">卡片二</a></div><div data-parent="#parent" id="c2" class="collapse"><div class="card-body ">Lorem ipsum dolor sit amet.</div></div></div></div><br/><hr/><br/><h1>卡片</h1><div class="card"><div class="card-header"><a href="" class="card-link">标题</a></div><div class="card-body"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi aperiam aspernatur beatae dolorum laudantium molestiae nam pariatur praesentium veritatis!</p></div><div class="card-footer"><button class="btn btn-info">已阅读</button></div></div><br/><hr/><br/><h1>折叠</h1><!--<button data-target="#demo" data-toggle="collapse" class="btn btn-danger">折叠</button>--><a href="#demo" data-toggle="collapse" class="btn btn-warning">折叠</a><div id="demo" class="collapse">今天室外体感超过45度</div><br/><hr/><br/><h1>导航栏</h1><div class="navbar navbar-expand-lg"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="">导航栏1</a></li><li class="nav-item"><a class="nav-link" href="">导航栏2</a></li><li class="nav-item"><a class="nav-link" href="">导航栏3</a></li><li class="nav-item"><a class="nav-link" href="">导航栏4</a></li></ul></div><br/><hr/><br/><h1>胶囊导航</h1><ul class="nav nav-pills"><li class="nav-item"><a data-toggle="pill" href="#tab5" class="nav-link">口红</a></li><li class="nav-item"><a data-toggle="pill" href="#tab6" class="nav-link">运动鞋</a></li><li class="nav-item"><a data-toggle="pill" href="#tab7" class="nav-link">包包</a></li><li class="nav-item"><a data-toggle="pill" href="#tab8" class="nav-link">手表</a></li></ul><div class="tab-content"><div id="tab5" class="tab-pane">YSL，Dior,chanel</div><div id="tab6" class="tab-pane active">黑椰子,AJ11,彩喷</div><div id="tab7" class="tab-pane">chanel,爱马仕,LV,GUCCI</div><div id="tab8" class="tab-pane">僵尸战队,百达翡丽,劳力士,江诗丹顿</div></div><br/><hr/><br/><h1>选项卡导航</h1><!-- 水平导航栏--><ul class="nav nav-tabs"><li class="nav-item"><a data-toggle="tab" href="#tab1" class="nav-link">东北菜</a></li><li class="nav-item"><a data-toggle="tab" href="#tab2" class="nav-link">四川菜</a></li><li class="nav-item"><a data-toggle="tab" href="#tab3" class="nav-link">云南菜</a></li><li class="nav-item"><a data-toggle="tab" href="#tab4" class="nav-link">陕西菜</a></li></ul><!-- 显示的内容--><div class="tab-content"><div id="tab1" class="tab-pane">小鸡炖蘑菇</div><div id="tab2" class="tab-pane active">钵钵鸡</div><div id="tab3" class="tab-pane">汽锅鸡</div><div id="tab4" class="tab-pane">臊子面加鸡腿</div></div><br/><hr/><br/><h1>导航</h1><ul class="nav nav-justified"><li class="nav-item"><a class="nav-link" href="">秒杀</a></li><li class="nav-item"><a class="nav-link" href="">优惠券</a></li><li class="nav-item"><a class="nav-link" href="">PLUS会</a></li><li class="nav-item"><a class="nav-link" href="">闪购</a></li></ul>
</div>
</body>
</html>
第四天
01_ex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><style>.page-item .page-link{border-radius: 0.25rem;}.page-item+.page-item{margin-left:0.5rem;}.breadcrumb-item + .breadcrumb-item::before{content:">";}</style>
</head>
<body>
<div class="container"><div class="progress"><div class="bg-danger w-100">简单</div><div class="bg-warning w-100">中等</div><div class="bg-success w-100">复杂</div></div><h1>带条纹，带动画的进度条</h1><div class="progress"><div class="progress-bar progress-bar-striped w-100 bg-warning progress-bar-animated"></div></div><div class="progress"><div class="progress-bar progress-bar-striped w-100 bg-success progress-bar-animated"></div></div><div class="progress"><div class="progress-bar progress-bar-striped w-100 bg-danger progress-bar-animated"></div></div><div class="progress"><div class="progress-bar progress-bar-striped w-100 bg-info progress-bar-animated"></div></div><div class="progress"><div class="progress-bar progress-bar-striped w-100 bg-danger progress-bar-animated"></div></div><div class="progress"><div class="progress-bar progress-bar-striped w-100 bg-success progress-bar-animated"></div></div><div class="progress"><div class="progress-bar progress-bar-striped w-100 bg-warning progress-bar-animated"></div></div><h1>带条纹的进度条</h1><div class="progress"><div class="progress-bar w-100 bg-warning progress-bar-striped"></div></div><div class="progress"><div class="progress-bar w-100 bg-danger progress-bar-striped"></div></div><div class="progress"><div class="progress-bar w-100 bg-info progress-bar-striped"></div></div><div class="progress"><div class="progress-bar w-100 bg-success progress-bar-striped"></div></div><div class="progress"><div class="progress-bar w-100 bg-danger progress-bar-striped"></div></div><div class="progress"><div class="progress-bar w-100 bg-warning progress-bar-striped"></div></div><h1>进度条</h1><div class="progress"><div class="progress-bar w-75 bg-danger"></div></div><br/><hr/><br/><h1>面包屑导航</h1><ul class="breadcrumb"><li class="breadcrumb-item"><a href="">首页</a></li><li class="breadcrumb-item"><a href="">学习用品</a></li><li class="breadcrumb-item"><a href="">笔记本电脑</a></li><li class="breadcrumb-item"><a href="">IBM x t</a></li></ul><br/><hr/><br/><h1>分页</h1><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="">上一页</a></li><li class="page-item active"><a class="page-link" href="">1</a></li><li class="page-item"><a class="page-link" href="">2</a></li><li class="page-item"><a class="page-link" href="">3</a></li><li class="page-item"><a class="page-link" href="">4</a></li><li class="page-item"><a class="page-link" href="">5</a></li><li class="page-item"><a class="page-link" href="">下一页</a></li></ul>
</div>
</body>
</html>
02_ex.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="bootstrap.css"/><script src="jquery.min.js"></script><script src="popper.min.js"></script><script src="bootstrap.min.js"></script><link rel="stylesheet" href="css/01.css"/>
</head>
<body>
<div class="container"><a class="mybtn">查看详情</a>
</div>
</body>
</html>
pro
footer.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="css/bootstrap.css"/><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"></div>
</body>
</html>
header.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="css/bootstrap.css"/><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/comm.css"/>
</head>
<body>
<div class="container"></div>
</body>
</html>
.\scss\comm.scss
//css reset
*{margin:0;padding:0}
body{background-color:#f5f5f5;}
.my_small{font-size:0.8rem;}
a{text-decoration: none;}
第五天
footer.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="css/bootstrap.css"/><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/comm.css"/><link rel="stylesheet" href="css/footer.css"/>
</head>
<body>
<div class="container"><!-- 上部分，品质保障四张图--><ul class="list-unstyled d-flex justify-content-around py-4"><li><img src="img/footer/icon1.png" alt=""/><p class="my_small text-muted text-center">品质保障</p></li><li><img src="img/footer/icon2.png" alt=""/><p class="my_small text-muted text-center">私人订制</p></li><li><img src="img/footer/icon3.png" alt=""/><p class="my_small text-muted text-center">学员特供</p></li><li><img src="img/footer/icon4.png" alt=""/><p class="my_small text-muted text-center">专属特权</p></li></ul><!-- 下部分--><div class="bg-white"><div class="row"><!-- 左--><div class="col-4 offset-md-4 offset-lg-0"><p><img src="img/footer/logo.png" alt=""/></p><p><img src="img/footer/footerFont.png" alt=""/></p></div><!-- 中--><div class="col-lg-4 col-md-6 offset-md-3 offset-lg-0"><div class="row"><div class="col-4"><h6>买家帮助</h6><ul class="list-unstyled"><li><a class="my_small text-muted" href="">新手指南</a></li><li><a class="my_small text-muted" href="">服务保障</a></li><li><a class="my_small text-muted" href="">常见问题</a></li></ul></div><div class="col-4"><h6>商家帮助</h6><ul class="list-unstyled"><li><a class="my_small text-muted" href="">商家入驻</a></li><li><a class="my_small text-muted" href="">商家后台</a></li></ul></div><div class="col-4"><h6>关于我们</h6><ul class="list-unstyled"><li><a class="my_small text-muted" href="">关于达内</a></li><li><a class="my_small text-muted" href="">联系我们</a></li><li><a class="my_small text-muted" href=""><img src="img/footer/wechat.png" alt=""/></a> <a class="my_small text-muted" href=""><img src="img/footer/sinablog.png" alt=""/></a></li></ul></div></div></div><!-- 右--><div class="col-lg-4 col-md-6 offset-md-3 offset-lg-0"><div class="row"><div class="col-6 pr-0"><h6>学子商城客户端</h6><p class="mb-1"><img src="img/footer/ios.png" alt=""/></p><p class="m-0"><img src="img/footer/android.png" alt=""/></p></div><div class="col-6 pl-0"><img src="img/footer/erweima.png" alt=""/></div></div></div></div></div>
</div>
</body>
</html>
header.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="css/bootstrap.css"/><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/comm.css"/><link rel="stylesheet" href="css/header.css"/>
</head>
<body>
<div class="container"><!-- 上部分，左中右--><div class="row"><!-- 左--><div class="col-lg-3 col-md-12"><a href="" class="navbar-brand"><img src="img/header/logo.png" alt=""/></a></div><!-- 中 10:05~10:20休--><div class="col-lg-6 col-md-12 mt-2"><div class="input-group"><input class="form-control my_small py-0" type="text" placeholder="请输入您要搜索的内容"/><img src="img/header/search.png" alt=""/></div></div><!-- 右--><div class="col-lg-3 col-md-12 p-lg-0 mt-2"><!-- 面包屑导航--><ul class="breadcrumb p-0"><li class="breadcrumb-item"><a href=""><img src="img/header/care.png"/></a></li><li class="breadcrumb-item"><a href=""><img src="img/header/order.png" alt=""/></a></li><li class="breadcrumb-item"><a href=""><img src="img/header/shop_car.png" alt=""/></a></li><li class="breadcrumb-item"><a class="text-muted" href="">注册</a></li><li class="breadcrumb-item"><a class="text-muted" href="">登录</a></li></ul></div></div><!-- 下部分，主导航--><ul class="nav"><li class="nav-item"><a href="" class="nav-link text-muted pl-md-0 pl-lg-3">首页</a></li><li class="nav-item"><a href="" class="nav-link text-muted">学习用品</a></li><li class="nav-item"><a href="" class="nav-link text-muted">私人订制</a></li></ul>
</div>
</body>
</html>index.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="css/bootstrap.css"/><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/comm.css"/><link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<header><iframe class="my_header" scrolling="no" src="header.html" frameborder="0"></iframe>
</header>
<div class="container"><div class="carousel" id="demo" data-ride="carousel"><!-- 图片--><div class="carousel-inner"><div class="carousel-item active"><img class="w-100" src="img/index/banner1.png" alt=""/></div><div class="carousel-item"><img class="w-100" src="img/index/banner2.png" alt=""/></div><div class="carousel-item"><img class="w-100" src="img/index/banner3.png" alt=""/></div><div class="carousel-item"><img class="w-100" src="img/index/banner4.png" alt=""/></div></div><!-- 指示器--><ul class="carousel-indicators"><li data-slide-to="0" data-target="#demo" class="active"></li><li data-slide-to="1" data-target="#demo"></li><li data-slide-to="2" data-target="#demo"></li><li data-slide-to="3" data-target="#demo"></li></ul><!-- 左右箭头--><a href="#demo" data-slide="prev" class="carousel-control-prev"><span class="carousel-control-prev-icon"></span></a><a href="#demo" data-slide="next" class="carousel-control-next"><span class="carousel-control-next-icon"></span></a></div><!-- 1L标题--><div class="border-bottom"><img class="title_img_size" src="img/index/computer_icon.png"/><span class="title_font text-muted ml-2">首页推荐/1F</span></div><!-- 1L--><div class="row mx-0 mt-3"><div class="col-lg-7 col-sm-12 px-0"><div class="top_height bg_L mr-lg-1 mb-1 berfore_margin"><div class="card border-0 w-40 mt-4 ml-5 bg-transparent"><h3>Apple MacBook Air系列</h3><h6 class="text-muted my_small mb-3">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</h6><span class="text-primary font24">￥6988.00</span><a href="" class="btn btn-primary mt-3 w-75">查看详情</a></div><img class="float-right my_img_position" src="img/index/study_computer_img1.png" alt=""/></div></div><div class="col-lg-5 col-sm-12 px-0"><div class="top_height bg_L mb-1"></div></div><div class="col-lg-5 col-sm-12 px-0"><div class="bottom_height bg_L mr-lg-1 mb-md-1 mb-lg-0"></div></div><div class="col-lg-7 col-sm-12 px-0"><div class="row mx-0"><div class="col-4 px-0"><div class="bottom_height bg_L mr-1"></div></div><div class="col-4 px-0"><div class="bottom_height bg_L mr-1"></div></div><div class="col-4 px-0"><div class="bottom_height bg_L"></div></div></div></div></div>
</div>
<footer><iframe class="my_footer" scrolling="no" src="footer.html" frameborder="0"></iframe>
</footer>
</body>
</html>
第六天
product_details.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="css/bootstrap.css"/><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/comm.css"/><link rel="stylesheet" href="css/product_details.css"/>
</head>
<body>
<header><iframe class="my_header" scrolling="no" src="header.html" frameborder="0"></iframe>
</header>
<div class="container"><!-- 面包屑导航--><ul class="breadcrumb bg-transparent"><li class="breadcrumb-item"><a href="" class="text-muted my_small font-weight-bold">首页</a></li><li class="breadcrumb-item"><a href="" class="text-muted my_small font-weight-bold">学习用品</a></li><li class="breadcrumb-item"><a href="" class="text-muted my_small font-weight-bold">笔记本电脑</a></li><li class="breadcrumb-item"><a href="" class="text-muted my_small font-weight-bold">AppleMac</a></li></ul><!-- 商品详细信息--><div class="row"><!-- 左侧--><div class="col-lg-6 col-md-12"><img src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/><!--小图标列表 --><ul class="list-unstyled d-flex justify-content-start mt-2 my_img_size"><li><img src="img/product/sm/5913f8ffN49fa143c.jpg" alt=""/></li><li><img src="img/product/sm/5913f8ffN49fa143c.jpg" alt=""/></li><li><img src="img/product/sm/5913f8ffN49fa143c.jpg" alt=""/></li><li><img src="img/product/sm/5913f8ffN49fa143c.jpg" alt=""/></li><li><img src="img/product/sm/5913f8ffN49fa143c.jpg" alt=""/></li><li><img src="img/product/sm/5913f8ffN49fa143c.jpg" alt=""/></li></ul></div><!-- 右侧--><div class="col-lg-6 col-md-12"><!-- 标题--><h5 class="font-weight-bold">戴尔DELL灵越游匣15PR-5645B 15.6英寸游戏笔记本电脑(i5-7300HQ 8G 128GSSD+1T GTX1050 4G独显 FHD)黑</h5><h6><a href="" class="text-dark font-weight-bold my_small">【白条6期免息 游匣“10”力出击】七代四核CPU ,GTX1050 4G独显,FHD全高清屏,热血出击！</a></h6><div class="alert alert-secondary text-muted my_small"><span>学员售价:</span><h3 class="text-primary d-inline">￥5999.00</h3><div class="mt-2">服务承诺： *退货补运费 *30天无忧退货 *48小时快速退款 *72小时发货</div></div></div></div>
</div>
<footer><iframe class="my_footer" scrolling="no" src="footer.html" frameborder="0"></iframe>
</footer>
</body>
</html>
product_list.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="css/bootstrap.css"/><script src="js/jquery.min.js"></script><script src="js/popper.min.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/comm.css"/><link rel="stylesheet" href="css/product_list.css"/>
</head>
<body>
<header><iframe class="my_header" scrolling="no" src="header.html" frameborder="0"></iframe>
</header>
<div class="container"><!-- 头部下方的广告图--><div class="mt-3 mb-3"><img class="w-100" src="img/index/index_guild.png" alt=""/></div><!-- 2.主体内容，左-商家列表，右-商家公告--><div class="row mx-0"><!-- 左-商家列表--><div class="col-md-9 col-sm-12 px-0"><h6 class="my_bg_gray p-2 pl-4 text-muted">笔记本电脑</h6><!-- 列表 11:15~11:30休息--><div class="row bg-white mx-0"><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-sm-center justify-content-md-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div><div class="col-lg-4 px-0 col-md-6 col-sm-12"><div class="card"><a href=""><img class="w-100" src="img/product/md/58a2c667Ne2b5cb73.jpg" alt=""/></a><div><h5 class="text-primary">￥6999.99</h5><a class="text-muted my_small" href="">神舟(HASEE)战神Z6-KP7GT 15.6英寸游戏本笔记本电脑(i7-7700HQ 8G 1T+128G SSD GTX1050 1080P)黑色</a><div class="d-flex justify-content-around align-items-center"><button class="text-white font-weight-bold border-0 px-2 rounded"> - </button><input class=" border-0 my_input text-center" type="text" value="1"/><button class="text-white font-weight-bold border-0 px-2 rounded">+</button><a class="btn btn-primary" href="">加入购物车</a></div></div></div></div></div><!-- 分页--><div class="my_bg_gray p-2"><ul class="pagination justify-content-end mb-0"><li class="page-item disabled"><a href="" class="page-link">上一页</a></li><li class="page-item active"><a href="" class="page-link">1</a></li><li class="page-item"><a href="" class="page-link">2</a></li><li class="page-item"><a href="" class="page-link">3</a></li><li class="page-item"><a href="" class="page-link">4</a></li><li class="page-item"><a href="" class="page-link">5</a></li><li class="page-item"><a href="" class="page-link">下一页</a></li></ul></div></div><!-- 右-商家公告--><div class="col-md-3 col-sm-12 pr-0"><h6 class="my_bg_gray my_small p-2"><img src="img/foodstore/foodstore_icon2.png" alt=""/>商家公告</h6><!-- 具体公告内容--><div class="bg-white text-muted my_small p-3"><p class="mb-1">本店推出全网最低价套餐，保证比其他平台的价格要低！</p><p class="mb-1">不要葱、姜、蒜等这些忌口暂时无法坐不了，敬请谅解</p><p class="mb-1">晚上10点以后订餐需另加送餐费2元！谢谢合作</p></div><!-- 购物车--><ul class="list-group mt-4"><li class="list-group-item d-flex justify-content-between my_bg_gray p-1"><span class="text-muted">购物车</span><a href="" class="text-muted">清空</a></li><li class="list-group-item d-flex justify-content-between border-top p-0 align-items-center"><span class="input-group-text bg-white text-truncate border-0 p-0 my_small w-40 d-inline-block">戴尔DELL灵越游匣15PR-5645B 15.6英寸游戏笔记本电脑(i5-7300HQ 8G 128GSSD+1T GTX1050 4G独显 FHD)黑</span><button class="border-0 text-white text-center my_input_size">-</button><input type="text" value="2" class="form-control border-0 text-center my_input p-0"/><button class="border-0 text-white text-center my_input_size">+</button><span class="input-group-text bg-white my_small text-muted p-0 border-0">￥:5999.00</span></li><li class="list-group-item d-flex justify-content-between border-top p-0 align-items-center"><span class="input-group-text bg-white text-truncate border-0 p-0 my_small w-40 d-inline-block">戴尔DELL灵越游匣15PR-5645B 15.6英寸游戏笔记本电脑(i5-7300HQ 8G 128GSSD+1T GTX1050 4G独显 FHD)黑</span><button class="border-0 text-white text-center my_input_size">-</button><input type="text" value="2" class="form-control border-0 text-center my_input p-0"/><button class="border-0 text-white text-center my_input_size">+</button><span class="input-group-text bg-white my_small text-muted p-0 border-0">￥:5999.00</span></li><li class="list-group-item d-flex justify-content-between border-top p-0 align-items-center"><span class="input-group-text bg-white text-truncate border-0 p-0 my_small w-40 d-inline-block">戴尔DELL灵越游匣15PR-5645B 15.6英寸游戏笔记本电脑(i5-7300HQ 8G 128GSSD+1T GTX1050 4G独显 FHD)黑</span><button class="border-0 text-white text-center my_input_size">-</button><input type="text" value="2" class="form-control border-0 text-center my_input p-0"/><button class="border-0 text-white text-center my_input_size">+</button><span class="input-group-text bg-white my_small text-muted p-0 border-0">￥:5999.00</span></li><li class="list-group-item d-flex justify-content-between border-top p-0 align-items-center"><span class="input-group-text bg-white text-truncate border-0 p-0 my_small w-40 d-inline-block">戴尔DELL灵越游匣15PR-5645B 15.6英寸游戏笔记本电脑(i5-7300HQ 8G 128GSSD+1T GTX1050 4G独显 FHD)黑</span><button class="border-0 text-white text-center my_input_size">-</button><input type="text" value="2" class="form-control border-0 text-center my_input p-0"/><button class="border-0 text-white text-center my_input_size">+</button><span class="input-group-text bg-white my_small text-muted p-0 border-0">￥:5999.00</span></li><li class="list-group-item d-flex justify-content-between bg-secondary p-0 border-top"><h5 class="text-white mb-0 p-2"><img src="img/foodstore/foodstore_car_2.png" alt=""/>￥9999.9</h5><a href="" class="btn-primary text-white p-2">去结算</a></li></ul></div></div>
</div>
<footer><iframe class="my_footer" scrolling="no" src="footer.html" frameborder="0"></iframe>
</footer>
</body>
</html>
.\css\comm.css
* {margin: 0;padding: 0; }body { background-color: #f5f5f5; }
.my_small { font-size: 0.8rem; }
a {text-decoration: none; }
/*����header��footer�Ŀ���*/
.my_header,.my_footer{ width:100%;}
@media screen and (min-width: 992px) {.my_header{height:5rem;}.my_footer{height:16rem;}
}@media screen and (max-width: 991px) {.my_header{height:11rem;}.my_footer{height:30rem;}
}.\css\header.css
.breadcrumb{background-color:transparent;}
.breadcrumb-item + .breadcrumb-item::before{content: '|';
}
.\css\index.css
/*�ֲ�ָʾ��*/
.carousel-indicators li{background:#fff;border-radius: 50%;
}
@media screen and (min-width: 992px) {.carousel-indicators li{width:0.8rem;height:0.8rem;margin-left:0.4rem;margin-right:0.4rem;}
}
@media screen and (max-width: 991px) {.carousel-indicators li{width:0.6rem;height:0.6rem;margin-left:0.25rem;margin-right:0.25rem;}
}.carousel-indicators li.active{background:#0aa1ed;
}
/*�ֲ������Ҽ�ͷ*/
.carousel-control-prev,
.carousel-control-next {width:4%;height:20%;background:#aaa;border-radius: 0.25rem;top:40%;
}
/*¥����������*/
.title_font{font-size:1.5rem;font-weight: bold;
}
.title_img_size{width:3rem;}
.border-bottom{border-width:3px !important;}
/*¥��ĸ߶�*/
.top_height{height:377px;}
.bottom_height{height:233px;}
.bg_L{background: #e8e8e8;}
/*�����߾����*/
.berfore_margin:before{content: '';display: table;
}
.w-40{width:40%;}
.font24{font-size:1.5rem;}
/*1L�ϰ벿�֣����imgλ��*/
.my_img_position{margin-top:-200px;margin-right:22px;transition:all 1s;
}
/*ͼƬ�Ĺ����յ�*/
.my_img_position:hover{transform: scale(1.1);
}.\css\product_details.css
/*���м�����������ӷ�*/
.breadcrumb-item + .breadcrumb-item::before{content:">";
}
.my_img_size{width: 28rem;overflow-x: auto;
}
.my_img_size img{width:5.5rem;
}
.my_img_size li img{margin-right:0.25rem;}
.\css\product_list.css
/*��ɫ����ı���*/
.my_bg_gray{background: linear-gradient(to bottom,#f0f0f0,#e0e0e0);
}
/*������0*/
.my_input{outline: 0;width:10%;}
/*��ҳ����ʽ*/
.page-item+.page-item{margin-left:0.5rem;
}
.page-link{border-radius: 0.5rem !important;}
.border-top{border-style:dotted !important;}
/*���ﳵС��ť����*/
.my_input_size{width:0.9rem;height:0.9rem;line-height: 0.6rem;text-align: center;font-size:0.5rem;font-weight: bold;
}
.w-40{width:40%;}
前端 Bootstrap 代码相关推荐
- layui 实现问卷表单【页面数据渲染+答案提交】【前端完整代码】
最近有个业务需求,需要做一个问卷表单 格式比较简单:问题+radio选项,问题需要分组展示,数据需要从数据库提取渲染. 细节较多 效果图如下 下面发一下前端完整代码(由于套用的是公司封装的layui框 ...
- 旅游系统（SSM框架+MySQL+Redis+VUE）前端页面代码
旅游系统(SSM框架+MySQL+Redis+VUE)前端页面代码 文章目录 旅游系统(SSM框架+MySQL+Redis+VUE)前端页面代码 主页 登录页 注册页 注册成功 头部 尾部 收藏 我的 ...
- html导入错误 wordpress,纯代码为WordPress压缩前端html代码 附BUG修复
[摘要] wp-html-compression是WordPress常用的压缩前端代码插件,本文简析纯代码实现WordPress前端代码压缩功能,并指出常见bug的解决方法. 除了主机的因素之外,一个 ...
- 如何去调试前端JS代码？以Chrome谷歌浏览器为例
前端调试是所有前端开发者绕不过去的一个环节,很多初学者却不知道该如何去做,今天小千就来以Chrome谷歌浏览器为例,教大家如何去调试前端JS代码. 为什么要调试? 程序就是函数堆砌起来的,程序的运行就 ...
- 突然讨厌做前端,讨厌代码_为什么用户讨厌重新设计
突然讨厌做前端,讨厌代码 重点 (Top highlight) The core of design thinking is to only design something that will br ...
- extjs 前端js代码调用后台函数方法
前端javascript代码部分: Ext.Ajax.request( { url: '/Process/SuspendWorkFlow', //配置的后台函数路由 params: { wfIns ...
- 突然讨厌做前端,讨厌代码_不要讨厌HATEOAS
突然讨厌做前端,讨厌代码 或我如何学会不再担心和爱HATEOAS REST已成为实现Web服务的事实上的解决方案,至少已成为一种流行的解决方案. 这是可以理解的,因为REST在使用HTTP规范时提供了 ...
- 突然讨厌做前端,讨厌代码_有关互联网用户最讨厌的广告类型的新数据
突然讨厌做前端,讨厌代码 You know that feeling when you're scrolling through a blog post and then - BAM! - one o ...
- 突然讨厌做前端,讨厌代码_你讨厌正则表达式吗？ 那么，我为您提供解决方案......
突然讨厌做前端,讨厌代码 by Bukhari Muhammad 通过布哈里·穆罕默德(Bukhari Muhammad) 你讨厌正则表达式吗? 那么,我为您提供解决方案... (Do you hat ...
最新文章
- android环境安装之android4.2安装(转)
- 热力图和相关系数分析
- [转]C++结构体|类 内存对齐详解
- PHP读写操作Excel
- Android—RxJava库知识
- android 手机工具箱,Android工具箱下载
- 【转载保存】IDEA maven中添加本地jar包
- 云原生与AI时代的存储该是什么样？新华三发布全NVMe智能闪存与智慧中枢数据平台
- Enter passphrase for key '/home/mha/.ssh/id_rsa解决方法
- leetcode —— 面试题67. 把字符串转换成整数
- matlab吧结果存数组,求助：如何将带有符号变量的运算结果储存到数组中
- 程序员面试金典——4.3高度最小的BST
- navigationBar模块未绑定
- python实现逻辑回归牛顿法求参数_教程 | 如何通过牛顿法解决Logistic回归问题
- android+显示ui布局,[Android ]UI布局 （线性布局+相对布局）
- 上下文无关输入与输出java_正则表达式与上下文无关文法
- 2005世界五百强排名
- 调用百度翻译api实现中英文翻译
- 笔记本无线网卡驱动异常如何解决？
- Sinkhorn算法