Bootstrap中文网 页面实现
程序员文章站
2024-03-14 16:53:16
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap中文网</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.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.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<!--
描述：导航栏随屏幕大小切换形式
-->
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://www.bootcss.com" class="navbar-brand hidden-sm">Bootstrap中文网</a>
</div>
<div class="navbar-collapse collapse" role="navigation">
<ul cla ss="nav navbar-nav">
<li class="hidden-sm hidden-md"><a href="https://v2.bootcss.com/">Bootstrap2中文文档</a></li>
<li><a href="https://v3.bootcss.com/">Bootstrap3中文文档</a></li>
<li><a href="https://v4.bootcss.com/">Bootstrap4中文文档</a></li>
<li><a href="/p/lesscss/">Less教程</a></li>
<li><a href="https://www.jquery123.com/">jQuery API</a></li>
<li><a href="http://www.youzhan.org/">网站实例</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="www.bootcss.com/about/">关于</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron " style="background-color: mediumslateblue">
<div class="container">
<br /><br /><br />
<h1 style="text-align: center; color: white;"><big><big><big><b>Bootstrap</b></big></big></big></h1>
<h2 style="text-align: center;color: white;">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
<br />
<p style="text-align: center;"><a class="btn btn-lg btn-warning btn-shadow" href="https://v3.bootcss.com/" > Bootstrap3中文文档(v3.3.7) </a></p>
</div>
<p style="text-align: center;"><a href="https://v2.bootcss.com/" style="color: white;"><small><small>Bootstrap2中文文档(v2.3.2)</small></small></a></p>
<br />
</div>
<div class="panel ">
<div class="panel-footer" style="text-align: center;">
<a href="http://wenda.bootcss.com" style="color: gray;">Bootstrap问答社区 |</a>
<a href="http://weibo.com/bootcss" style="color: gray;"> 新浪微博：@Bootstrap中文网 </a>
</div>
</div>
<h1 style="text-align: center;">Bootstrap相关优质项目推荐</h1>
<p style="text-align: center;">这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
<hr align="center" width="60%"/>
<br />
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<a href="http://www.youzhan.org/"><img src="img/1.png" width="300" height="150" /></a>
<a href="http://www.youzhan.org/" style="text-decoration: none;">
<h3 style="text-align: center;">优站精选<br/><small>Bootstrap 网站实例</small> </h3>
</a>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。<br/><br/></p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<a href="https://www.webpackjs.com/"><img src="img/2.png" width="300" height="150" /></a>
<a href="https://www.webpackjs.com/" style="text-decoration: none;">
<h3 style="text-align: center;">Webpack<br/><small>是前端资源模块化管理和打包工具 </small> </h3>
</a>
<p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<a href="https://www.luffycity.com/"><img src="img/3.png" width="300" height="150" /></a>
<a href="https://www.luffycity.com/" style="text-decoration: none;">
<h3 style="text-align: center;">零基础小白Python挑战赛<br/><small>路飞学城赞助</small> </h3>
</a>
<p>参赛即可免费获得7天赛前特训，《Python全栈开发实战》书籍一本。<br/><br/><br/></p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<a href="https://www.reactjscn.com/"><img src="img/4.png" width="300" height="150" /></a>
<a href="https://www.reactjscn.com/" style="text-decoration: none;">
<h3 style="text-align: center;">React<br/><small>用于构建用户界面的 JavaScript 框架 </small> </h3>
</a>
<p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。<br/><br/><br/></p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<a href="https://typescript.bootcss.com/"><img src="img/5.png" width="300" height="150" /></a>
<a href="https://typescript.bootcss.com/" style="text-decoration: none;">
<h3 style="text-align: center;">TypeScript <br/><small>中文手册 </small> </h3>
</a>
<p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<div class="thumbnail">
<a href="https://www.jquery123.com/"><img src="img/6.png" width="300" height="150" /></a>
<a href="https://www.jquery123.com/" style="text-decoration: none;">
<h3 style="text-align: center;">jQuery API <br/><small>中文手册 </small> </h3>
</a>
<p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。<br/><br/><br/></p>
</div>
</div>
</div>
</div>
<br /><br /><br /><br />
<hr />
<div class="container">
<div class="row">
<div class="col-md-6">
<h4><img src="img/bootstrap.png"/></h4>
<p style="color: gray;">我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
</div>
<div class="col-md-6">
<div class="col-md-3">
<p style="color: purple;">关于</p>
<p>
<a href="http://www.bootcss.com/about/"style="color: gray;">关于我们</a><br />
<a href="www.bootcss.com/ad/"style="color: gray;">广告合作</a><br />
<a href="www.bootcss.com/links/"style="color: gray;">友情链接</a><br />
<a href="http://www.bootcss.com/hr/"style="color: gray;">招聘</a>
</p>
</div>
<div class="col-md-3">
<p style="color: purple;">联系方式</p>
<p>
<a href="http://weibo.com/bootcss"style="color: gray;">新浪微博</a><br />
<a href="mailto:aaa@qq.com"style="color: gray;">电子邮件</a>
</p>
</div>
<div class="col-md-4">
<p style="color: purple;">旗下网站</p>
<p> <a href="http://www.golaravel.com/"style="color: gray;">Laravel中文网</a><br />
<a href="http://www.ghostchina.com/"style="color: gray;">Ghost中国</a><br />
<a href="http://www.bootcdn.cn/"style="color: gray;">BootCDN</a><br />
<a href="https://pkg.phpcomposer.com/"style="color: gray;">Packagist中国镜像</a><br />
<a href="https://www.return.net/"style="color: gray;">燃腾教育</a>
</p>
</div>
<div class="col-md-2">
<p style="color: purple;">赞助商</p>
<p> <a href="https://www.jdcloud.com/"style="color: gray;">京东云</a><br />
<a href="https://www.upyun.com"style="color: gray;">又拍云</a>
</p>
</div>
</div>
</div>
</div>
<hr />
<p style="text-align: center;color: gray;"> <a href="http://www.miibeian.gov.cn/" target="_blank"style="color: gray;">京ICP备11008151号 </a>| 京公网安备11010802014853</p>
</body>
</html>