<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
<script src="./bootstrap-3.3.7-dist/js/jquery-3.4.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
#bigtrap{
height:496px;
background: linear-gradient(45deg,#020031 0,#6d3353 100%);
}
#footer{
height: 189px;
padding: 20px 0 30px 0;
margin-top: 20px;
border-top: 1px solid rgb(229,229,229);
}
#botup{
height: 120px;
margin: 0 100px 30px 100px;
}
#botleft{
width: 50%;
height: 103px;
padding: 0 15px;
margin-top: 30px;
margin-left: 5px;
float: left;
}
#botright{
width: 46%;
height: 103px;
float: left;
}
.four{
padding: 0 15px;
margin: 0 16px;
float: left;
}
#botunder{
height: 28px;
/*position: 30px;*/
margin: 0 30px;
border: 1px solid rgb(229.229.229)
}
h4{
color: rgb(86,61,124);
margin: 10px 0;
font-weight: 400;
font-size: 16px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
display: block;
}
.about{
font-size: 14px;
font-family: Verdana,Arial,sans-serif;
color: rgb(119,119,119);
line-height: 1.5pc;
padding-left: 0px;
}
#line{
clear: both;
width: 70%;
height: 1px;
background: rgb(229,229,229);
margin: 20px auto;
position: relative;
top: 30px;
}
#bot{
width: 2px;
height: 15px;
background: #CFCFCF;
float: left;
margin: 20px 0 0 20px;
position: relative;
top: 13px;
left: 30%;
}
.police{
float: left;
line-height: 18.5714;
font-size: 13px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
top: -80px;
left: 31%;
color: rgb(85,85,85);
}
h1{
color: rgb(255,255,255);
}
h2 {
color: rgb(255,255,255);
}
ul {
list-style: none;
}
/*------------------*/
#navbar {
margin: 0px;
}
</style>
</head>
<body>
<div>
<div class="navbar navbar-inverse navbar-fix-top" id="navbar">
<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">Bootstrap中文网</a>
</div>
<div class="collapse navbar-collapse" id="menu1">
<ul class="nav navbar-nav">
<li><a class="navbar-brand hidden-sm" href="#">Bootstrap2中文网</a></li>
<li><a class="navbar-brand hidden-sm" href="#">Bootstrap3中文网</a></li>
<li><a class="navbar-brand hidden-sm" href="#">Bootstrap4中文网</a></li>
<li><a class="navbar-brand hidden-sm" href="#">Less教程</a></li>
<li><a class="navbar-brand hidden-sm" href="#">jQuery API</a></li>
<li><a class="navbar-brand hidden-sm" href="#">网站实例</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
</div>
<div class="jumbotron text-center" id="bigtrap">
<h1>Bootstrap</h1>
<h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
<p class="masthead-button-links">
<a class="btn btn-lg btn-primary btn-shadow" href="#">Bootstrap3中文文档(v3.3.7)</a>
</p>
<ul class="masthead-links list-unstyled">
<li>
<a href="#">Bootstrap2中文文档(v2.3.2)</a>
</li>
</ul>
</div>
<div class="container text-center" >
<ul class="list-unstyled list-inline">
<li >
<a class="" href="#">Bootstrap问答社区</a>
</li>
<li>|</li>
<li >
<a href="#">新浪微博：@Bootstrap中文网</a>
</li>
</ul>
</div>
<div class="container text-center">
<div>
<h2>Bootstrap相关优质项目推荐</h2>
<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-2"></div>
<div class="col-md-8 bg-white">
<div class="col-sm-6 col-md-4 col-lg-3 " >
<div class="thumbnail bg-success">
<div style="height: 280px;">
<div >
<img src="./img/expo.png" width="210px" height="126.26px"/>
<br/><br/><br/><br/>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 " >
<div class="thumbnail bg-success">
<div style="height: 280px;">
<div >
<img src="./img/webpack.png" width="210px" height="126.26px"/>
<br/><br/><br/><br/>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 " >
<div class="thumbnail bg-success">
<div style="height: 280px;">
<div >
<img src="./img/react.png" width="210px" height="126.26px"/>
<br/><br/><br/><br/>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 " >
<div class="thumbnail bg-success">
<div style="height: 280px;">
<div >
<img src="./img/typescript.png" width="210px" height="126.26px"/>
<br/><br/><br/><br/>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 " >
<div class="thumbnail bg-success">
<div style="height: 280px;">
<div >
<img src="./img/jqueryapi.png" width="210px" height="126.26px"/>
<br/><br/><br/><br/>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 " >
<div class="thumbnail bg-success">
<div style="height: 280px;">
<div >
<img src="./img/nextjs.png" width="210px" height="126.26px"/>
<br/><br/><br/><br/>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 " >
<div class="thumbnail bg-success">
<div style="height: 280px;">
<div >
<img src="./img/babeljs.png" width="210px" height="126.26px"/>
<br/><br/><br/><br/>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 " >
<div class="thumbnail bg-success">
<div style="height: 280px;">
<div >
<img src="./img/nodejs.png" width="210px" height="126.26px"/>
<br/><br/><br/><br/>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
<div id="footer">
<div id="botup">
<div id="botleft">
<img src="./img/logo.png" width="241" height="33">
<br/>
<br/>
<p id="all">
我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！
</p>
</div>
<div id="botright">
<div class="four">
<h4>关于</h4>
<ul class="about">
<li>
<a href="">关于我们</a>
</li>
<li>
<a href="">广告合作</a>
</li>
<li>
<a href="">友情链接</a>
</li>
<li>
<a href="">招聘</a>
</li>
</ul>
</div>
<div class="four">
<h4>联系方式</h4>
<ul class="about">
<li>
<a href="">新浪微博</a>
</li>
<li>
<a href="">电子邮件</a>
</li>
</ul>
</div>
<div class="four">
<h4>旗下网站</h4>
<ul class="about">
<li>
<a href="">Laravel中文网</a>
</li>
<li>
<a href="">Ghost中国</a>
</li>
</ul>
</div>
<div class="four">
<h4>赞助商</h4>
<ul class="about">
<li>
<a href="">猫云</a>
</li><li>
<a href="">京东云</a>
</li><li>
<a href="">又拍云</a>
</li>
</ul>
</div>
</div>
<div id="line"></div>
<div id="botunder">
<ul>
<li class="police"><a href="http://www.miibeian.gov.cn/">京ICP备11008151号</a></li>
<div id="bot"></div>
<li class="police">京公网安备11010802014853</li>
</ul>
</div>
</div>
</div>
</body>
</html>
版权声明：本文为Pupilla原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。