用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>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
<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&nbsp;Form&nbsp;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&nbsp;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">
&nbsp;&nbsp;&nbsp;关于
<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">
&nbsp;&nbsp;&nbsp;联系方式
<ul class="nav nav-stacked">
<li><a href="#">新浪微博</a></li>
<li><a href="#">电子邮件</a></li>
</ul>
</div>
<div class="col-lg-3">
&nbsp;&nbsp;&nbsp;旗下网站
<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">
&nbsp;&nbsp;&nbsp;赞助商
<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>

效果截图:



原文地址：http://blog.51cto.com/13678728/2147239

时间： 2024-07-31 18:41:08

用Bootstrap知识写简易版Bootstrap官方网站首页的相关文章

Javascript基础示例：用JS写简易版贪吃蛇（面向对象）

废话不多说,代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>贪吃蛇</title> 6 <script> 7 var map; //地图类对象 8 var snake; //蛇类对象 9 var food; //食物类对象 10 var timer; //定时器对象 11 var sum=0; //分

bootstrap知识小点

年底没什么项目做了,整理下最近做的网站使用到的bootstrap知识 一.导入bootstrap样式和脚本 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="js/bootstrap.min.js" type="text/javascript"></script

springMVC+angular+bootstrap+mysql的简易购物网站搭建

springMVC+angular+bootstrap+mysql的简易购物网站搭建 介绍 前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(angular大法好), 项目一共包含了7个静态界面, 静态界面的数据展示都使用了angularJS , 后端是基于java的spring, 容器为tomcat, 项目代码分享到百度云盘 , 这个项目的优势是, 所有的显示都是在前端完成, 数据交互也是通过ajax完成, 没有频繁的页面跳转:先上两张商

Bootstrap框架写的后台管理模板,快速开发

Bootstrap框架写的后台管理模板     [MATRI ADMIN] 为了解决浏览器兼容问题,公司前段UI准备使用Bootstrap框架写的模板,便于后期项目过检时,浏览器不兼容出现的不必要的麻烦 首先做一些简单的介绍 JavaScript 插件可以单个引入(使用 Bootstrap 提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js 或压缩版的 bootstrap.min.js). 建议使用压缩版的 JavaScript 文件 bootstrap.js 和 

Python写地铁的到站的原理简易版

Python地铁的到站流程及原理(个人理解) 今天坐地铁看着站牌就莫名的想如果用Python写其工作原理 是不是很简单就小试牛刀了下大佬们勿喷纯属小弟个人理解 首先来看看地铁上显示的站牌如下: 就想这首先站点固定的名称固定的站点名称长度可知道,这不是符合列表嘛[第一站,第二站,...,最后一站] 把这写站名放入列表中一个for循环自动帮你取每个站名 你可以加入time.sleep来设置每个站的之间的时间, 过长江隧道的时间可以单独加个if判断站名改变默认时间就行,这里还可以通过站名判断是否需要转

Rails 101(Rails 5版) bootstrap/dropdown

让这个网站有实际"登入"."登出"的功能 练习到这个章节时出现下接菜单没有反应 这里是使用bootstrap的dropdown功能,到官方查了一下安装方法,发现缺少了一个 jQuery,我们要把他安装好,方法如下: 1.在Gemfile增加  gem 'jquery-rails' ,然后 bundle 2.app/assets/javascripts/application.js里增加 //= require jquery//= require bootstrap-

自己写的基于bootstrap的简单分页插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css&quo

Vue初体验——用Vue实现简易版TodoList

最近在学习Vue,断断续续看完了官方教程的基础部分,想练一下手熟悉一下基本用法,做了一个简易版的TodoList 效果: 代码: HTML: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>TodoList</title> 6 <meta charset="utf-8"> 7 <!-- 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放

Android学习之路——简易版微信为例（二）

1 概述 从这篇博文开始,正式进入简易版微信的开发.深入学习前,想谈谈个人对Android程序开发一些理解,不一定正确,只是自己的一点想法.Android程序开发不像我们在大学时候写C控制台程序那样,需要从main开始写代码逻辑,大部分逻辑控制代码都由自己来实现.事实上,Android已经为我们提供了一个程序运行的框架,我们只需要往框架中填入我们所需的内容即可,这里的内容主要是:四大组件——Activity.Service.ContentProvider.BroadCast.在这四大组件中,可以