Bootstrap实现网站首页(Bootstrap概述)

编程入门 行业动态 更新时间:2024-10-28 07:29:31

Bootstrap实现网站<a href=https://www.elefans.com/category/jswz/34/1769812.html style=首页(Bootstrap概述)"/>

Bootstrap实现网站首页(Bootstrap概述)

<span style="font-size:14px;"><!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href=".3.0/css/bootstrap.min.css">


<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href=".3.0/css/bootstrap-theme.min.css">


<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src=".11.1/jquery.min.js"></script>


<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src=".3.0/js/bootstrap.min.js"></script></span>

<!DOCTYPE html>
<html>
<head>
<title>网上商城的首页</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css"></style>
</head>
<body><div class="container"><div class="row"><div class="col-md-4"><img alt="" src="../imag/head1.png"></div><div class="col-md-4"><img alt="" src="../imag/head2.png"></div><div class="col-md-4" style="padding-left: 100px ;padding-top: 20px"><a href="#">登陆</a> <a href="zhuce.html">注册</a> <a href="#">购物车</a></div></div><div class="rows"><nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span> <spanclass="icon-bar"></span> <span class="icon-bar"></span> <spanclass="icon-bar"></span></button><a class="navbar-brand" href="#">首页</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">手机数码 <spanclass="sr-only">(current)</span> </a></li><li><a href="#">电脑办公</a></li><li><a href="#">日用百货</a></li><li class="dropdown"><a href="#" class="dropdown-toggle"data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">更多 <span class="caret"></span> </a><ul class="dropdown-menu"><li><a href="#">母婴</a></li><li><a href="#">家具</a></li><li><a href="#">饮品</a></li><li role="separator" class="divider"></li><li><a href="#">其他</a></li><li role="separator" class="divider"></li><li><a href="#">还需更多</a></li></ul></li></ul><form class="navbar-form navbar-right"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></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="../imag/dianzi.png" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="../imag/dianzi2.jpg" alt="..."><div class="carousel-caption">你好,中国</div></div><div class="item"><img src="../imag/dianzi3.jpg" alt="..."><div class="carousel-caption"></div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic"role="button" data-slide="prev"> <spanclass="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span> </a> <aclass="right carousel-control" href="#carousel-example-generic"role="button" data-slide="next"> <spanclass="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span> </a></div></div><div class="row"><h3>热门商品<img alt="" src="../imag/sign.png"></h3></div><div class="row"><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/11.png" width=100% height=100% style="padding: 0px;"></div><div class="col-md-10"><div class="row"><div class="col-md-6" style="padding: 0px;"><img alt="" src="../imag/12.png" width=100% height=100% ></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div></div><div class="row"><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div></div></div></div><div class="row"><img alt="" src="../imag/ad.png" width="100%"></div><div class="row"><h3>最新商品<img alt="" src="../imag/sign.png"></h3></div><div class="row"><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/11.png" width=100% height=100% style="padding: 0px;"></div><div class="col-md-10"><div class="row"><div class="col-md-6" style="padding: 0px;"><img alt="" src="../imag/12.png" width=100% height=100% ></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div></div><div class="row"><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/13.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/14.png" width=100% height=100%></div><div class="col-md-2" style="padding: 0px;"><img alt="" src="../imag/15.png" width=100% height=100%></div></div></div></div><div class="row"><img alt="" src="../imag/q.png" width="100%"></div><div style="text-align: center;"><a href="html.html">关于我们</a>  公司简介  招贤纳士  广告服务  联系方式  合作伙伴  论坛反馈<br>版权声明:Copyright© 1999-2016,赵瑾的网站 , All Rights Reserved</div></div>
</body>
</html>


更多推荐

Bootstrap实现网站首页(Bootstrap概述)

本文发布于:2024-02-17 14:15:39,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1694294.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:首页   网站   Bootstrap

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!