使用boostrap完成简单的网页
作者：互联网
注意：
div的各种class
class=“container-fluid” 表示自动填满
class=“container” 表示固定大小
class=“row” 表示一整行
至于 col-sm-12/col-md-12/col-lg-12等分别是在小、中、大屏幕的等分，函数将其分为12块
但是-12表示占满一整行，-1表示占据一行的1/12 可以嵌套使用，通常使用col-md-并嵌套在 class=“row” 内。
<!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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/logo.png" alt="这里是标志">
</div>
<div class="col-md-3">
<img src="img/header.jpg">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
<ul class="list-unstyled list-inline" style="margin-top: 30px">
<li><a href="#">登陆</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">购物车</a></li>
</ul>
</div>
</div>
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="...">
<div class="carousel-caption">
这里是提示信息
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="...">
<div class="carousel-caption">
这里是提示信息
</div>
</div>
<div class="item">
<img src="img/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>
</div>
<div class="row">
<div class="col-md-2" style="font-size:32px">热门商品</div>
<div class="col-md-3" >
<img src="img/title2.jpg" style="margin-top: 15px" width="100%">
</div>
</div>
<div class="row">
<div class="col-md-2">
<img src="img/big01.jpg" width="100%">
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-6">
<img src="img/middle01.jpg" width="100%">
</div>
<div class="col-md-2"style="text-align: center;margin-top: 20px">
<img src="img/small01.jpg">
<font style="color: red;">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center;margin-top: 20px">
<img src="img/small02.jpg">
<div class="row">
<font style="color: red;">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
</div>
<div class="col-md-2" style="text-align: center;margin-top: 20px">
<img src="img/small03.jpg">
<font style="color: red">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
</div>
<div class="row">
<div class="col-md-2" style="text-align: center">
<img src="img/small04.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small05.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small06.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small07.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small08.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small09.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
</div>
</div>
</div>
<div class="row">
<img src="img/ad.jpg" width="100%">
</div>
<div class="row">
<div class="col-md-2" style="font-size:32px">热门商品</div>
<div class="col-md-3" >
<img src="img/title2.jpg" style="margin-top: 15px" width="100%">
</div>
</div>
<div class="row">
<div class="col-md-2">
<img src="img/big01.jpg" width="100%">
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-6">
<img src="img/middle01.jpg" width="100%">
</div>
<div class="col-md-2"style="text-align: center;margin-top: 20px">
<img src="img/small01.jpg">
<font style="color: red;">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center;margin-top: 20px">
<img src="img/small02.jpg">
<div class="row">
<font style="color: red;">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
</div>
<div class="col-md-2" style="text-align: center;margin-top: 20px">
<img src="img/small03.jpg">
<font style="color: red">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
</div>
<div class="row">
<div class="col-md-2" style="text-align: center">
<img src="img/small04.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small05.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small06.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small07.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small08.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
<div class="col-md-2" style="text-align: center">
<img src="img/small09.jpg">
<font style="color: red; text-align: center">
<p>东瓜</p>
<p>￥2999</p>
</font>
</div>
</div>
</div>
</div>
<div class="row">
<img src="img/footer.jpg" width="100%">
</div>
<div class="row" style="text-align: center">
<a href="../案例一：网站信息显示页面/网站信息显示页面.html">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="../案例三：网站友情链接显示页面/网站友情链接显示页面.html">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2016-2017 XX商城 版权所有
</p>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
标签：2999,12,网页,boostrap,东瓜,col,提示信息,简单,class 来源： https://blog.csdn.net/qq_42788363/article/details/120186836