实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
<title>Bootstrap</title>
<style>
.navbar-nav>li>a {padding-top:5px;padding-bottom:5px;padding-left: 3.5px}
.navbar-brand {height:28px;padding-top:5px;font-size: 12px}
.navbar {min-height:28px;}
.navbar-toggle {margin-top:4px;margin-bottom:4px;}
#bs-example-navbar-collapse-1{font-size: 9px;height: 40px}
.jumbotron{margin: 0}
.bc-social-buttons{list-style: none;overflow: hidden;display: table-cell;height: 35px;vertical-align: middle}
.bc-social-buttons>li{float: left;padding-left: 10px;}
.bc-social-buttons>li>a{color:#555555;font-size: 10px;}
.thumbnail>.caption>h3>a{font-size: 18px}
</style>
</head>
<body>
<!--导航条-->
<div class="container-fluid">
<div class="row" >
<div class="col-md-12" >
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container" style="width: 800px">
<!-- 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bootstrap中文网</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><a href="#">Bootstrap2中文文档</a></li>
<li><a href="#">Bootstrap3中文文档</a></li>
<li><a href="#">Bootstrap4中文文档</a></li>
<li><a href="#">Less 教程</a></li>
<li><a href="#">jQuery API</a></li>
<li><a href="#">网站实例</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">关于</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
<!--巨幕-->
<div class="jumbotron" style="background:#2F153F; ">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center"style="color: white;font-weight: bold;">Bootstrap</h1>
<h3 class="text-center" style="color: white;font-size:20px;font-weight: lighter">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h3>
<br>
<button type="button" class="btn btn-primary btn-sm center-block" style="box-shadow: 0 1px #2A6496">Bootstrap3中文文档(V3.3.7)</button>
<br>
<a href=""><p class="text-center" style="color: grey;font-size: 9px;">Bootstrap2中文文档(v2.3.2)</p></a>
</div>
</div>
</div>
</div>
<!--外部连接-->
<div class="container-fluid" style="border: 0.5px solid #efefef;background:#F5F5F5;">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<ul class="bc-social-buttons center-block">
<li class="social-forum">
<a href=""><span class="glyphicon glyphicon-comment"></span>Bootstrap问答社区</a>
</li>
<li class="Vertical line">|</li>
<li class="social-weibo">
<a href=""><span class="glyphicon glyphicon-hand-right"></span>新浪微博：@Bootstrap中文网</a>
</li>
</ul>
</div>
</div>
</div>
<!--缩略图-->
<div class="container" style="width: 800px">
<!--页抬头-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="projects-header page-header">
<h2 class="text-center" >Bootstrap相关优质项目推荐</h2>
<p class="text-center" style="font-size: 10px;color: grey">这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail text-center" style="border:0.5px solid #efefef;height: 259px">
<img src="1.png" alt="Bootstrap优站精选">
<div class="caption">
<h3 style="margin: 10px auto 10px;padding: 0;">
<a href="" style="height: 55px;display: block">优站精选 <br>
<small style="font-size: 10px;">Bootstrap网站实列</small>
</a>
</h3>
<p style="font-size: 10px;font-weight: lighter">Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail text-center" style="border:0.5px solid #efefef;height: 259px">
<img src="2.png" alt="Bootstrap优站精选">
<div class="caption">
<h3 style="margin: 10px auto 10px;padding: 0;">
<a href="" style="height: 55px;display: block">Webpack <br>
<small style="font-size: 10px;">是前端资源模块化管理和打包工具</small>
</a>
</h3>
<p style="font-size: 10px;font-weight: lighter">Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合***环境部署的前端资源。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail text-center" style="border:0.5px solid #efefef;height: 259px">
<img src="3.png" alt="Bootstrap优站精选">
<div class="caption">
<h3 style="margin: 10px auto 10px;padding: 0;">
<a href="" style="height: 55px;display: block">React <br>
<small style="font-size: 10px;">用于构建用户界面的 JavaScript 框架</small>
</a>
</h3>
<p style="font-size: 10px;font-weight: lighter">React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail text-center" style="border:0.5px solid #efefef;height: 259px">
<img src="4.png" alt="Bootstrap优站精选">
<div class="caption">
<h3 style="margin: 10px auto 10px;padding: 0;">
<a href="" style="height: 55px;display: block">TypeScript <br>
<small style="font-size: 10px;">中文手册</small>
</a>
</h3>
<p style="font-size: 10px;font-weight: lighter">TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail text-center" style="border:0.5px solid #efefef;height: 259px">
<img src="5.png" alt="Bootstrap优站精选">
<div class="caption">
<h3 style="margin: 10px auto 10px;padding: 0;">
<a href="" style="height: 55px;display: block">优站精选 <br>
<small style="font-size: 10px;">Bootstrap网站实列</small>
</a>
</h3>
<p style="font-size: 10px;font-weight: lighter">Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--页脚-->
<footer class="footer ">
<div class="container" style="width: 800px">
<div class="row footer-top">
<div class="col-md-6 col-lg-6">
<h4>
<img style="width: 120px;height: 22px" src="https://assets.bootcss.com/www/assets/img/logo.png?1532594948592">
</h4>
<p style="font-size: 10px">我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
</div>
<div class="col-md-6 col-lg-5 col-lg-offset-1">
<div class="row about" >
<div class="col-sm-3">
<h4>关于</h4>
<ul class="list-unstyled" style="font-size: 8px">
<li><a href="/about/">关于我们</a></li>
<li><a href="/ad/">广告合作</a></li>
<li><a href="/links/">友情链接</a></li>
<li><a href="/hr/">招聘</a></li>
</ul>
</div>
<div class="col-sm-3">
<h4>联系方式</h4>
<ul class="list-unstyled" style="font-size: 8px">
<li><a href="http://weibo.com/bootcss" title="Bootstrap中文网官方微博" target="_blank">新浪微博</a></li>
<li><a href="mailto:admin@bootcss.com">电子邮件</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4>旗下网站</h4>
<ul class="list-unstyled" style="font-size: 8px">
<li><a href="http://www.golaravel.com/" target="_blank">Laravel中文网</a></li>
<li><a href="http://www.ghostchina.com/" target="_blank">Ghost中国</a></li>
<li><a href="http://www.bootcdn.cn/" target="_blank">BootCDN</a></li>
<li><a href="https://pkg.phpcomposer.com/" target="_blank">Packagist中国镜像</a></li>
<li><a href="https://www.return.net/" target="_blank">燃腾教育</a></li>
</ul>
</div>
<div class="col-sm-2">
<h4>赞助商</h4>
<ul class="list-unstyled" style="font-size: 8px">
<li><a href="https://www.jdcloud.com/" target="_blank">京东云</a></li>
<li><a href="https://www.upyun.com" target="_blank">又拍云</a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="row footer-bottom">
<ul class="list-inline text-center" style="font-size: 10px;color: grey">
<li><a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备11008151号</a></li><li>京公网安备11010802014853</li>
</ul>
</div>
</div>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
