用Bootstrap知识写简易版Bootstrap官方网站首页
<!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 >这些项目或者是对Bootstrap进行了有益补充,或者是基于Bootstrap开发的</p>
<hr >
</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 >
<div class="container" >
<div class="row">
<div class="col-lg-6" >
<img src="img/www_assets_img_logo.png"/><br/>
<p >我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具!</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官方网站首页
标题网址：https://www.cdcxhl.com/article38/jjigsp.html
成都网站建设公司_创新互联，为您提供服务器托管、网站排名、域名注册、品牌网站制作、定制开发、营销型网站建设
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
- 浅析网站建设中如何进行网站改版？ 2016-10-28
- 网站改版的时候需要注意哪些新的事项呢？ 2016-11-09
- 企业网站改版需要怎样稳定关键词排名? 2023-04-07
- 网站改版后转换率下降原因是什么? 2022-08-19
- 网站改版需要注意什么 2015-01-18
- 外贸网站改版要注重的几个环节 2022-06-09
- SEO实战：如何进行网站改版 2020-08-25
- 无锡网站改版不可无视的五项操作 2022-06-18
- 网站改版,网站改版收费 2023-02-20
- 网站改版如何避免权重的流失 2014-11-13
- 网站改版需要注意会不会影响到网站的收录和快照 2022-05-02
- 企业网站改版方案书应该怎么做？ 2020-11-30