<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title>BootStrap网站首页</title> ???????<link rel="stylesheet" type="text/css" href="js/bootstrap.css"/> ???????<script type="text/javascript" src="js/jquery.min.js"></script> ????????<script type="text/javascript" src="js/bootstrap.js"></script> ????????<style type="text/css"> ???????????body{ ???????????????text-align: center; ???????????} ???????????#nav{ ???????????????margin-bottom: 0; ???????????} ???????????#brand{ ???????????????width:100%; ???????????????height:500px; ???????????????margin-top:0; ???????????????padding-top: 0; ???????????????background-color:indigo; ???????????} ???????????#bts1{ ???????????????padding-top:90px; ???????????????font-size:100px; ???????????????font-weight: bold; ???????????????color:#ffffff; ???????????} ???????????#bts2{ ???????????????padding-top:15px; ???????????????font-size:30px; ???????????????font-weight: bold; ???????????????color:#ffffff; ???????????} ???????????#bts3{ ???????????????padding-top:30px; ???????????????color:#ffffff; ???????????} ???????????#a1{ ???????????????padding-top:10px; ???????????????width: 100%; ???????????????height:50px; ???????????} ???????????#item{ ???????????????padding-top:90px; ???????????????font-size:40px; ???????????????color:#000000; ???????????} ???????????.a2{ ???????????????color:#269ABC; ???????????????font-size:25px; ???????????} ???????????.a3{ ???????????????color:#5E5E5E; ???????????????font-size:18px; ???????????} ???????</style> ????</head> ???<body> ???????<nav class="navbar navbar-inverse navbar-static-top" id="nav"> ???????????<div class="container"> ???????????????<div class="navber-header"> ???????????????????<a href="#" class="navbar-brand">Bootstrap中文网</a> ???????????????</div> ???????????????<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="#">jQueryAPI</a></li> ???????????????????<li><a href="#">网站实例<button type="button" class="btn btn-danger btn-circle btn-xs"></button></a></li> ???????????????</ul> ???????????????<div class="nav navbar-nav navbar-right"> ???????????????????<a href="#" class="text-info">关于</a> ???????????????</div> ???????????</div> ???????</nav> ???????<div class="container" id="brand"> ???????????<div id="bts1"> ???????????????Bootstrap ???????????</div> ???????????<div id="bts2"> ???????????????简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 ???????????</div> ???????????<div id="bts3"> ???????????????<button type="button" class="btn btn-lg btn-primary">Bootstrap3中文文档（v3.3.7）</button> ???????????????<br/> ???????????????<br/> ???????????????Bootstrap2中文文档（v2.3.2） ???????????</div> ???????</div> ???????<div class="container" id="a1"> ???????????<p class="text-muted"> ???????????????<a href="#">Bootstrap问答社区</a> | ???????????????<a href="#">新浪微博:@Bootstrap中文网</a> ???????????</p> ???????????</div> ???????<div class="container" > ???????????<span id="item"> ???????????????BootStrap相关优质项目推荐 ???????????</span> ???????????<br /> ???????????<p style="font-size:15px">这些项目或者是对Bootstrap进行了有益补充,或者是基于Bootstrap开发的</p> ???????????<hr style="width:60%"> ???????</div> ???????<div class="container" id="tuijian"> ???????????<div class="row"> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_expo.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">优站精选</a></li> ???????????????????????<li class="a3"><a href="#">Bootstrap网站实例</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????Bootstrap优站精选频道收集了众多基于Bootstrap构建、设计精美的、有创意的网站。 ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_kaikeba.jpg" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">【Web全栈架构师】</a></li> ???????????????????????<li class="a3"><a href="#">by开课吧</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????廖雪峰最新打磨的前端进阶课程，国内顶级的前段内容体系，是1-3年前端开发经验的程序员学习提升的必备课程。 ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_luffycity.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">7天入门Python全栈</a></li> ???????????????????????<li class="a3"><a href="#">路飞学城赞助</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????7天Python+实战训练,带你轻松入门PythonWeb全栈开发。7.25前参加可免费获得《Python全栈开发实战》 ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_webpack.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">Webpack</a></li> ???????????????????????<li class="a3"><a href="#">前端模块化管理和打包工具</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????Webpack是当下最热门的前端资源模块化的管理和打包工具.可将许多的松散的模块打包成符合生产环境部署的前端资源。 ???????????????????</p> ???????????????</div> ???????????</div> ???????????<div class="row"> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_bootstrap-datetimepicker.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">DateTimePicker</a></li> ???????????????????????<li class="a3"><a href="#">日期时间选择器</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????Bootstrap 日期时间选择器是一个 Bootstrap 组件，能够简化页面上日期、时间的输入。 ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_nodejs.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">Node.js</a></li> ???????????????????????<li class="a3"><a href="#">中文文档/手册</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????TypeScript 是由微软开源的编程语言。是 JS 的一个超集，本质上向该语言添加了可选的静态类型和基于类的面向对象编程。 ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_yarn.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">Yarn</a></li> ???????????????????????<li class="a3"><a href="#">中文手册</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。<br /><br /> ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_babeljs.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">Babel</a></li> ???????????????????????<li class="a3"><a href="#">一个JavaScript编译器</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。 ???????????????????</p> ???????????????</div> ???????????</div> ???????????<div class="row"> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_react.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">React</a></li> ???????????????????????<li class="a3"><a href="#">构建用户界面的JS框架</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。<br /><br /> ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_bootstrap-docs.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">BootStrap Docs</a></li> ???????????????????????<li class="a3"><a href="#">Bootstrap 文档全集</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????收集了 Bootstrap 从 V1.0.0 版本到现在整个文档的历史。Bootstrap 是一个传奇，这些文档是传奇的见证！ ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_bootstrap-form-builder.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">Bootstrap Form Builder</a></li> ???????????????????????<li class="a3"><a href="#">在线表单构造器</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????能够以鼠标拖拽的方式迅速生成一个基于 Bootstrap 的完整表单，减轻了各位码农手写HTML代码的劳动。 ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_bootstrap-wysiwyg.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">bootstrap-wysiwyg</a></li> ???????????????????????<li class="a3"><a href="#">为bootstrap定制可视编辑器</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????bootstrap-wysiwyg 是一个 jQuery Bootstrap 插件可以将任何一个 div 转变成一个 WYSIWYG 富文本编辑器。 ???????????????????</p> ???????????????</div> ???????????</div> ???????????<div class="row"> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_buttons.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">Buttons</a></li> ???????????????????????<li class="a3"><a href="#">CSS按钮样式库</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????基于 Sass 和 Compass 构建的CSS按钮样式库，图标采用的是Font Awesome，可和 Bootstrap 融合使用。 ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_flat-ui.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">Flat UI</a></li> ???????????????????????<li class="a3"><a href="#">Metro风格的Bootstrap</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????基于 Bootstrap 做的 Metro 化改造，Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！ ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_chartjs.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">Chart.js</a></li> ???????????????????????<li class="a3"><a href="#">开源的HTML5图表工具</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????Chart.js 是为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。<br /><br /> ???????????????????</p> ???????????????</div> ???????????????<div class="col-lg-3" > ???????????????????<ul class="nav nav-stacked"> ???????????????????????<li><a href="#"><img src="img/www_assets_img_gulpjs.png" width="100%"/></a></li> ???????????????????????<li class="a2"><a href="#">gulp.js</a></li> ???????????????????????<li class="a3"><a href="#">基于流的自动化构建工具</a></li> ???????????????????</ul> ???????????????????<p> ???????????????????????gulp.js - 基于流(stream)的自动化构建工具。Grunt 采用配置文件的方式执行任务，而 Gulp 一切都通过代码实现。 ???????????????????</p> ???????????????</div> ???????????</div> ???????</div> ???????<hr style="margin-top: 70px"> ???????<div class="container" style="text-align: left;margin-top:35px "> ???????????<div class="row"> ???????????????<div class="col-lg-6" > ???????????????????<img src="img/www_assets_img_logo.png"/><br/> ???????????????????<p style="margin-top:20px">我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具!</p> ???????????????</div> ?????????????????<div class="col-lg-6"> ???????????????????<div class="row"> ???????????????????????<div class="col-lg-3"> ??????????????????????????? 关于 ???????????????????????????<ul class="nav nav-stacked"> ???????????????????????????????<li><a href="#">关于我们</a></li> ???????????????????????????????<li><a href="#">广告合作</a></li> ???????????????????????????????<li><a href="#">友情链接</a></li> ???????????????????????????????<li><a href="#">招聘</a></li> ???????????????????????????</ul> ???????????????????????</div> ???????????????????????<div class="col-lg-3"> ??????????????????????????? 联系方式 ???????????????????????????<ul class="nav nav-stacked"> ???????????????????????????????<li><a href="#">新浪微博</a></li> ???????????????????????????????<li><a href="#">电子邮件</a></li> ???????????????????????????</ul> ????????????????????????</div> ????????????????????????<div class="col-lg-3"> ??????????????????????????? 旗下网站 ???????????????????????????<ul class="nav nav-stacked"> ???????????????????????????????<li><a href="#">Laravel中文网</a></li> ???????????????????????????????<li><a href="#">Ghost中国</a></li> ???????????????????????????????<li><a href="#">BootCDN</a></li> ???????????????????????????????<li><a href="#">Packagist中国镜像</a></li> ???????????????????????????????<li><a href="#">燃腾教育</a></li> ???????????????????????????</ul> ???????????????????????</div> ???????????????????????<div class="col-lg-3"> ??????????????????????????? 赞助商 ???????????????????????????<ul class="nav nav-stacked nav-"> ???????????????????????????????<li><a href="#">京东云</a></li> ???????????????????????????????<li><a href="#">又拍云</a></li> ???????????????????????????</ul> ????????????????????????</div> ???????????????????</div> ???????????????</div> ???????????</div> ???????????<hr> ???????</div> ???</body></html>效果截图:
用Bootstrap知识写简易版Bootstrap官方网站首页
原文地址：http://blog.51cto.com/13678728/2147239