Bootstrap做简单的网站首页
本文共 3497 字，大约阅读时间需要 11 分钟。
<!DOCTYPE html>
<html lang="en"><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>网站首页</title><link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"><script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script> <script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><style type="text/css"> .jumbotron { background:url(./images/mous.jpg);}
</head>
<body><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collasped" data-toggle="collapse" data-target="#menu1"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand">网站名称</a></div><div class="collapse navbar-collapse" id="menu1"><ul class="nav navbar-nav nav-tabs"><li><a href="#">首页</a></li><li><a href="#">公司简介</a></li><li class="dropdown"><a href="#" data-toggle="dropdown">产品目录<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">产品1</a></li><li><a href="#">产品2</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" name="q" placeholder="请输入关键字" /></div><button type="submit" class="btn btn-default">搜索</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li></ul></div></div></nav><div class="jumbotron masthead bg-info" > <div class="cotainer text-center"> <h1 style="color: white;font-size: 80px">欢迎来到XXX公司</h1> <h3 style="color: white">细节决定成败，科技创造未来，大胆假设，刻苦钻研，是我们公司的宗旨，编不下去了。</h3> <br/><br/>XXX通道
XXX公司相关产品推荐
这些产品性能良好，价格便宜，物美价廉，我编不下去了
</body>
</html>结果展示：
转载于:https://blog.51cto.com/13507330/2097611
你可能感兴趣的文章