【JavaWeb_学习笔记】Bootstrap框架练习
运用Bootstrap框架复现Bootstrap中文网首页
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>仿bootstrap中文网title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.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.min.js" >script>
head>
<style>
.center-vertical {
position:relative;
top:50%;
transform:translateY(-50%);
}
.thumbnail{
height: 350px;
}
style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle navigationspan>
<span class="icon-bar">span>
<span class="icon-bar">span>
<span class="icon-bar">span>
button>
<a class="navbar-brand" href="#">Bootstrap中文网a>
div>
<div class="collapse navbar-collapse" id="menu">
<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="#">jQuary APIa>li>
<li><a href="#">网站实例a>li>
ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">关于li>
ul>a>
div>
div>
nav>
<div class="jumbotron " style="background: #482147;color: wheat;height: 500px;">
<div class="container center-vertical">
<center>
<h1>Bootstraph1>
<h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。h2>
<p>
<a class="btn btn-lg btn-shadow btn-primary" href="#" target="_blank">Bootstrap3中文文档(v3.3.7)a>
p>
<ul>
<li><a href="#" target="_blank">Bootstrap2中文文档(v2.3.2)a>li>
ul>
center>
div>
div>
<center>
<div class="container">
<ul class="list-inline list-unstyled">
<li>
<a style="text-decoration: none;" href="http://wenda.bootcss.com" title="Bootstrap问答社区" target="_blank" >
Bootstrap问答社区
a>
li>|
<li>
<a style="text-decoration: none;" href="http://weibo.com/bootcss" title="Bootstrap中文网官方微博" >
新浪微博：@Bootstrap中文网a>
li>
ul>
div>
center>
<div class="container">
<center>
<h2 >Bootstrap相关优质项目推荐h2>
<p >这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的p>
center>
<hr style=" height:2px;border:none;border-top:2px solid #6B3454;width:1200px" />
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Bootstrap 编码规范" ><img src="img/codeguide.png">a>
<div class="caption text-center">
<h3><a href="#" title="Bootstrap 编码规范" style="text-decoration:none">Bootstrap 编码规范<br/><small>by @mdosmall>a>h3>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="TypeScript 中文手册"><img src="img/typescript.png">a>
<div class="caption text-center">
<h3><a href="#" title="TypeScript 中文手册"style="text-decoration:none">TypeScript<br/><small>中文手册small>a>h3>
<p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Python 全栈开发教程 by 路飞学城"><img src="img/luffycity.jpg">a>
<div class="caption text-center">
<h3><a href="#" title="Python 全栈开发教程 "style="text-decoration:none">Python 全栈开发教程 <br/><small>免费书籍+视频教程small>a>h3>
<p>使用Python + Bootstrap快速构建在各种Web项目，快速进入人工智能、数据分析、爬虫。云计算、自动化运维等领域的必备语言。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="React - 用于构建用户界面的 JavaScript 框架"><img src="img/react.png">a>
<div class="caption text-center">
<h3><a href="#" title="React - 用于构建用户界面的 JavaScript 框架 "style="text-decoration:none">React <br/><small>用于构建用户界面的 JavaScript 框架small>a>h3>
<p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Webpack 是前端资源模块化管理和打包工具" ><img src="img/webpack.png">a>
<div class="caption text-center">
<h3><a href="#" title="Webpack 是前端资源模块化管理和打包工具" style="text-decoration:none">Webpack<br/><small>是前端资源模块化管理和打包工具small>a>h3>
<p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="jQuery API 中文文档/手册"><img src="img/jqueryapi.png">a>
<div class="caption text-center">
<h3><a href="#" title="jQuery API 中文文档/手册"style="text-decoration:none">jQuery API<br/><small>中文手册small>a>h3>
<p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="w3schools 原版国内镜像"><img src="img/w3schools.png">a>
<div class="caption text-center">
<h3><a href="#" title="w3schools 原版国内镜像 "style="text-decoration:none">w3schools <br/><small>原版国内镜像small>a>h3>
<p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。"><img src="img/preact.png">a>
<div class="caption text-center">
<h3><a href="#" title="Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。"style="text-decoration:none">Preact<br/><small>React 轻量替代方案。small>a>h3>
<p>Preact - 一个只有 3kB 大小的 React 替代品，拥有与 React 相同的 API、组件和虚拟 DOM。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。" ><img src="img/nodejs.png">a>
<div class="caption text-center">
<h3><a href="#" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。" style="text-decoration:none">Node.js<br/><small>中文文档 / 手册small>a>h3>
<p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。"><img src="img/yarn.png">a>
<div class="caption text-center">
<h3><a href="#" title="Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。"style="text-decoration:none">Yarn<br/><small>中文手册small>a>h3>
<p>Yarn 是一个快速、可靠、安全的依赖管理工具。是 NPM 的替代品。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="NPM 中文文档"><img src="img/npm.png">a>
<div class="caption text-center">
<h3><a href="#" title="NPM 中文文档 "style="text-decoration:none">NPM<br/><small>中文文档 small>a>h3>
<p>NPM（node package manager）是 Node.js 世界的包管理器。NPM 可以让 JavaScript 开发者在共享代码、复用代码以及更新共享的代码上更加方便。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Vue.js - 渐进式 JavaScript 框架"><img src="img/vuejs.png">a>
<div class="caption text-center">
<h3><a href="#" title="Vue.js - 渐进式 JavaScript 框架"style="text-decoration:none">Vue.js<br/><small>中文文档small>a>h3>
<p>Vue.js - 是一套构建用户界面的渐进式框架。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Parcel - 极速、零配置的 web 应用打包工具。" ><img src="img/parcel.png">a>
<div class="caption text-center">
<h3><a href="#" title="Parcel - 极速、零配置的 web 应用打包工具。" style="text-decoration:none">Parcel<br/><small>中文文档small>a>h3>
<p>Parcel - 极速、零配置的 web 应用打包工具。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Lodash 是最流行的 JavaScript 工具库。"><img src="img/lodash.png">a>
<div class="caption text-center">
<h3><a href="#" title="Lodash 是最流行的 JavaScript 工具库。"style="text-decoration:none">Lodash<br/><small>JavaScript 工具库small>a>h3>
<p>Lodash 是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库。比相同功能的 Underscore.js 使用更广泛。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Pro Git 中文版（第二版）让你从 Git 初学者成为 Git 专家"><img src="img/progit.png">a>
<div class="caption text-center">
<h3><a href="#" title="Pro Git 中文版（第二版）让你从 Git 初学者成为 Git 专家 "style="text-decoration:none">Pro Git <br/><small>Git 入门到专家指南 small>a>h3>
<p>Pro Git 中文版（第二版）是一本详细的 Git 指南，主要介绍了 Git 的使用基础和原理，让你从 Git 初学者成为 Git 专家。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Bootstrap 优站精选"><img src="img/expo.png">a>
<div class="caption text-center">
<h3><a href="#" title="Bootstrap 优站精选"style="text-decoration:none">优站精选<br/><small>Bootstrap 网站实例small>a>h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="rollup.js 是新一代的 JavaScript 模块打包工具。" ><img src="img/rollup.png">a>
<div class="caption text-center">
<h3><a href="#" title="rollup.js 是新一代的 JavaScript 模块打包工具。" style="text-decoration:none">Rollup <br/><small>新一代的 JavaScript 模块打包工具small>a>h3>
<p>Rollup 是一个 JavaScript 模块打包工具，可以将小块代码编译成大块复杂的代码。Rollup 对 JavaScript 代码模块使用新的 ES6 标准化格式，如 CommonJS 和 AMD。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Babel 是一个 JavaScript 编译器。"><img src="img/babeljs.png">a>
<div class="caption text-center">
<h3><a href="#" title="Babel 是一个 JavaScript 编译器。"style="text-decoration:none">Babel <br/><small>是一个 JavaScript 编译器。small>a>h3>
<p>Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Underscore.js 是一个 JavaScript 工具库"><img src="img/underscore.png">a>
<div class="caption text-center">
<h3><a href="#" title="Underscore.js 是一个 JavaScript 工具库 "style="text-decoration:none">Underscore.js<br/><small>JavaScript 工具库small>a>h3>
<p>Underscore.js是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="gulp.js - 基于流的自动化构建工具。"><img src="img/gulpjs.png">a>
<div class="caption text-center">
<h3><a href="#" title="gulp.js - 基于流的自动化构建工具。"style="text-decoration:none">gulp.js<br/><small>基于流的自动化构建工具。small>a>h3>
<p>gulp.js - 基于流(stream)的自动化构建工具。Grunt 采用配置文件的方式执行任务，而 Gulp 一切都通过代码实现。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Grunt 是基于 Node.js 的项目构建工具" ><img src="img/gruntjs.png">a>
<div class="caption text-center">
<h3><a href="#" title="Grunt 是基于 Node.js 的项目构建工具" style="text-decoration:none">Grunt <br/><small>项目构建工具small>a>h3>
<p>Grunt 是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt 拥有数量庞大的插件，几乎任何你所要做的事情都可以用 Grunt 实现。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码。"><img src="img/eslint.png">a>
<div class="caption text-center">
<h3><a href="#" title="ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码。"style="text-decoration:none">ESLint <br/><small>JavaScript 代码检查工具small>a>h3>
<p>ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Electron - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用"><img src="img/electron.png">a>
<div class="caption text-center">
<h3><a href="#" title="Electron - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用 "style="text-decoration:none">Electron<br/><small>用 WEB 技术开发桌面应用small>a>h3>
<p>Electron - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Sass 是一个成熟、稳定、强大的 CSS 扩展语言解析器。"><img src="img/sass.png">a>
<div class="caption text-center">
<h3><a href="#" title="Sass 是一个成熟、稳定、强大的 CSS 扩展语言解析器。"style="text-decoration:none">Sass <br/><small>最流行的 CSS 扩展语言解析器small>a>h3>
<p>Sass 是一个成熟、稳定、强大的 CSS 扩展语言解析器。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="LESS 一种动态样式语言" ><img src="img/lesscss.png">a>
<div class="caption text-center">
<h3><a href="#" title="LESS 一种动态样式语言" style="text-decoration:none">LESS <br/><small>一种动态样式语言small>a>h3>
<p>LESS 为 CSS 赋予了动态语言的特性，如变量、继承、运算、函数。LESS 既可以在客户端上运行 (支持 IE 6+、Webkit、Firefox)，也可以借助 Node.js 或者 Rhino 在服务端运行。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Handlebars 模板引擎"><img src="img/handlebars.png">a>
<div class="caption text-center">
<h3><a href="#" title="Handlebars 模板引擎"style="text-decoration:none">Handlebars <br/><small>一个书写高效率、语义化的模板引擎small>a>h3>
<p>Handlebars 是一个书写高效率、语义化的模板引擎，与 Mustache 模板兼容。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Stylus -- CSS 预处理语言"><img src="img/stylus.png">a>
<div class="caption text-center">
<h3><a href="#" title="Stylus -- CSS 预处理语言 "style="text-decoration:none">Stylus<br/><small>CSS 预处理语言small>a>h3>
<p>Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理语言。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Bootstrap 中文网开放 CDN 服务"><img src="img/bootcdn.png">a>
<div class="caption text-center">
<h3><a href="#" title="Bootstrap 中文网开放 CDN 服务"style="text-decoration:none">BootCDN <br/><small>开放 CDN 服务small>a>h3>
<p>Bootstrap 中文网联合又拍云存储共同推出了开放 CDN 服务 - BootCDN，我们对广泛的前端开源库提供了稳定的存储和带宽的支持，例如 Bootstrap、jQuery 等。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Pug - 健壮、灵活、功能丰富的 Node.js 模板引擎" ><img src="img/pug.png">a>
<div class="caption text-center">
<h3><a href="#" title="Pug - 健壮、灵活、功能丰富的 Node.js 模板引擎" style="text-decoration:none">Pug <br/><small>Node.js 模板引擎small>a>h3>
<p>Pug 是一款健壮、灵活、功能丰富的模板引擎，专门为 Node.js 平台开发。Pug 是由 Jade 改名而来。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Liquid - Jekyll 的模板语言。"><img src="img/liquid.png">a>
<div class="caption text-center">
<h3><a href="#" title="Liquid - Jekyll 的模板语言。"style="text-decoration:none">Liquid<br/><small>Jekyll 的模板语言。small>a>h3>
<p>Liquid - 最流行的模板语言。Jekyll、Github Pages 都在用。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Zepto.js 是一个轻量级、兼容 jQuery 的 JavaScript 工具库"><img src="img/zeptojs.png">a>
<div class="caption text-center">
<h3><a href="#" title="Zepto.js 是一个轻量级、兼容 jQuery 的 JavaScript 工具库 "style="text-decoration:none">Zepto.js<br/><small>JavaScript 工具库small>a>h3>
<p>Zepto.js 是一个轻量级、兼容 jQuery 的 JavaScript 工具库p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="EJS 中文文档"><img src="img/ejs.png">a>
<div class="caption text-center">
<h3><a href="#" title="EJS 中文文档"style="text-decoration:none">EJS <br/><small>中文文档small>a>h3>
<p>EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有再造一套迭代和控制流语法，有的只是普通的 JavaScript 代码而已。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Tailwind CSS 中文网 / 中文文档" ><img src="img/tailwindcss.png">a>
<div class="caption text-center">
<h3><a href="#" title="Tailwind CSS 中文网 / 中文文档" style="text-decoration:none">Tailwind CSS<br/><small>中文文档small>a>h3>
<p>Tailwind CSS 是一个用于快速UI开发的实用工具集 CSS 框架。与 Bootstrap 、Foundation 不同，Tailwind CSS 没有内置的 UI 组件。完全需要开发者根据自身情况来定制设计。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Jekyll 是最流行的静态站点生成工具。"><img src="img/jekyll.png">a>
<div class="caption text-center">
<h3><a href="#" title="Jekyll 是最流行的静态站点生成工具。"style="text-decoration:none">Jekyll<br/><small>中文文档small>a>h3>
<p>Jekyll 是一个静态站点生成工具。它将 Markdown （或者 Textile） 以及 Liquid 转化成一个完整的可发布的静态网站。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Hexo 是一个快速、简洁且高效的博客框架"><img src="img/hexo.png">a>
<div class="caption text-center">
<h3><a href="#" title="Hexo 是一个快速、简洁且高效的博客框架"style="text-decoration:none">Hexo<br/><small>中文文档small>a>h3>
<p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具"><img src="img/postcss.png">a>
<div class="caption text-center">
<h3><a href="#" title="PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具"style="text-decoration:none">PostCSS <br/><small>中文网small>a>h3>
<p>PostCSS 利用 JavaScript 的强大编程能力对 CSS 代码进行转换。数以百计的 PostCSS 插件可以用来为 CSS 属性添加特定于浏览器厂商的前缀、支持未来 CSS 语法、模块化、代码检测等。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Chart.js 是为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。" ><img src="img/chartjs.png">a>
<div class="caption text-center">
<h3><a href="#" title="Chart.js 是为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。" style="text-decoration:none">Chart.js<br/><small>开源的 HTML5 图表工具small>a>h3>
<p>Chart.js 是为设计和开发人员准备的简单、灵活的 JavaScript 图表工具。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="WebAssembly 中文文档"><img src="img/webassembly.png">a>
<div class="caption text-center">
<h3><a href="#" title="WebAssembly 中文文档"style="text-decoration:none">WebAssembly<br/><small>面向 web 应用的编译格式small>a>h3>
<p>WebAssembly 或者 wasm，是一种新型可移植，具有占用存储小，加载速度快等特点的面向 web 应用的编译格式。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="stickUp 能让页面目标元素“固定”在浏览器窗口的顶部"><img src="img/stickup.png">a>
<div class="caption text-center">
<h3><a href="#" title="stickUp 能让页面目标元素“固定”在浏览器窗口的顶部"style="text-decoration:none">stickUp<br/><small>让页面元素“固定”位置small>a>h3>
<p>stickUp 能让页面目标元素“固定”在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="响应式导航"><img src="img/responsive-nav.png">a>
<div class="caption text-center">
<h3><a href="#" title="响应式导航"style="text-decoration:none">Responsive Nav <br/><small>响应式导航small>a>h3>
<p>响应式导航（Responsive Nav）是一个很小的JS插件，压缩之后仅有1.7KB，能帮你创建针对小屏幕的可切换式导航p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Unslider" ><img src="img/unslider.png">a>
<div class="caption text-center">
<h3><a href="#" title="Unslider" style="text-decoration:none">Unslider<br/><small>jQuery轮播插件small>a>h3>
<p>Unslider - 一个超小的 jQuery 轮播（slider） 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Flat UI"><img src="img/flat-ui.png">a>
<div class="caption text-center">
<h3><a href="#" title="Flat UI"style="text-decoration:none">Flat UI <br/><small>Metro 风格的 Bootstrap small>a>h3>
<p>Flat UI 是基于 Bootstrap 做的 Metro 化改造，由<a href="http://designmodo.com/">Designmodoa>提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Bootstrap 可视化布局系统"><img src="img/layoutit.png">a>
<div class="caption text-center">
<h3><a href="#" title="Bootstrap 可视化布局系统"style="text-decoration:none">LayoutIt! <br/><small>Bootstrap 可视化布局small>a>h3>
<p>LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由<a href="https://github.com/dodgepudding" target="_blank">4wera>同学汉化整理。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Bootstrap Switch"><img src="img/bootstrap-switch.png">a>
<div class="caption text-center">
<h3><a href="#" title="Bootstrap Switch"style="text-decoration:none">Bootstrap Switch <br/><small>Bootstrap 开关组件small>a>h3>
<p>Bootstrap Switch 是对 Bootstrap 控件的扩充。基于选 HTML 中基本的选择框控件实现只有开和关两种状态的单选按钮。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Sco.js" ><img src="img/sco.png">a>
<div class="caption text-center">
<h3><a href="#" title="Sco.js" style="text-decoration:none">Sco.js <br/><small>Bootstrap 组件增强版small>a>h3>
<p>由于大部分的 Bootstrap js 插件是无法扩展的，因此才有了 sco.js，它是对 Bootsrap 中 js 插件的增强实现。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="iCheck"><img src="img/icheck.png">a>
<div class="caption text-center">
<h3><a href="#" title="iCheck"style="text-decoration:none">iCheck<br/><small>增强复选框和单选按钮small>a>h3>
<p>iCheck 让不同浏览器下的复选框（checkboxes）和单选按钮（radio button）更美观、功能更强。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="bootstrap-wysiwyg"><img src="img/bootstrap-wysiwyg.png">a>
<div class="caption text-center">
<h3><a href="#" title="bootstrap-wysiwyg"style="text-decoration:none">bootstrap-wysiwyg<br/><small>为Bootstrap定制的可视编辑器small>a>h3>
<p>bootstrap-wysiwyg 是一个 jQuery Bootstrap 插件（5KB, 200 行代码）可以将任何一个 div 转变成一个 WYSIWYG 富文本编辑器。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Preboot"><img src="img/preboot.png">a>
<div class="caption text-center">
<h3><a href="#" title="Preboot"style="text-decoration:none">Preboot<br/><small>Bootstrap 的前世small>a>h3>
<p>Preboot 是一组用 less 语法书写的混合（mixin）和变量（variable）的集合，目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="jQuery.Pin" ><img src="img/jquery.png">a>
<div class="caption text-center">
<h3><a href="#" title="jQuery.Pin" style="text-decoration:none">jQuery.Pin<br/><small>固定页面元素的 jQuery 插件small>a>h3>
<p>jQuery.Pin 能将任意页面元素“钉”在某个容器顶部，而且在尺寸小的屏幕上能够自动禁用这种效果。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Bootstrap IE6兼容方案"><img src="img/bsie.png">a>
<div class="caption text-center">
<h3><a href="#" title="Bootstrap IE6兼容方案"style="text-decoration:none">Bsie <br/><small>Bootstrap IE6 兼容方案small>a>h3>
<p>Bsie 弥补了 Bootstrap 对 IE6 的不兼容。目前，bsie 能在 IE6 上支持大部分 bootstrap 的特性，可惜，还有一些实在无法支持...p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="非常酷的弹框(Alert)组件"><img src="img/messenger.png">a>
<div class="caption text-center">
<h3><a href="#" title="非常酷的弹框(Alert)组件"style="text-decoration:none">Messenger<br/><small>非常酷的弹框(Alert)组件small>a>h3>
<p>Messenger 是一个非常酷的弹框(Alert)组件，能够非常好的与 Bootstrap 融合，当然，单独使用效果也是非常棒。Messenger 自带4套皮肤。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Bootstrap 日期时间选择器"><img src="img/bootstrap-datetimepicker.png">a>
<div class="caption text-center">
<h3><a href="#" title="Bootstrap 日期时间选择器"style="text-decoration:none">DateTime Picker<br/><small>日期时间选择器small>a>h3>
<p>Bootstrap 日期时间选择器（Bootstrap DateTime Picker）是一个 Bootstrap 组件，能够简化页面上日期、时间的输入。p>
div>
div>
div>
div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="基于 Bootstrap 样式的 jQuery UI 控件" ><img src="img/jquery-ui-bootstrap.png">a>
<div class="caption text-center">
<h3><a href="#" title="基于 Bootstrap 样式的 jQuery UI 控件" style="text-decoration:none">jQuery UI Bootstrap<br/><small>用 Bootstrap 美化 jQuery UIsmall>a>h3>
<p>这套工具让你在使用 jQuery UI 控件时也能充分利用 Bootstrap 的样式，而且不会出现样式不统一的现象，Bootstrap 和 jQuery UI 可以完美融合在一起了！p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Google 风格的 Bootstrap"><img src="img/google-bootstrap.png">a>
<div class="caption text-center">
<h3><a href="#" title="Google 风格的 Bootstrap"style="text-decoration:none">Google Bootstrap<br/><small>Google 风格的 Bootstrapsmall>a>h3>
<p>Google 的 UI 素来以简洁著称，现在 Bootstrap 也来 Google Style 一把，喜欢 Google 的就来试试这套 Google Bootstrap 吧！p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Bootstrap Metro UI CSS"><img src="img/metro-ui-css.png">a>
<div class="caption text-center">
<h3><a href="#" title="Bootstrap Metro UI CSS"style="text-decoration:none">Metro UI CSS<br/><small>Bootstrap 与 Metro 融合small>a>h3>
<p>Metro UI CSS 是一套用来创建类似于 Windows 8 Metro UI 风格网站的样式。现在，Metro UI CSS 项目在 Bootstrap 的基础上被开发成一个独立的解决方案。p>
div>
div>
div>
<div class="col-md-3">
<div class="thumbnail">
<a href="#" title="Font Awesome"><img src="img/font-awesome.png">a>
<div class="caption text-center">
<h3><a href="#" title="Font Awesome"style="text-decoration:none">Font Awesome<br/><small>Bootstrap 专用图标字体small>a>h3>
<p>Font Awesome 中包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS 对字体可以设置的样式也同样能够运用到这些图标上了。p>
div>
div>
div>
div>
div>
<hr style=" height:2px;border:none;border-top:2px solid #6B3454"/>
<footer >
<div class="container">
<div class="row">
<div class="col-md-6">
<h4>
<img src="img/logo.png" />
h4>
<p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！p>
div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-3">
<h4>关于h4>
<ul class="list-unstyled">
<li><a href="#" target="_blank">关于我们a>li>
<li><a href="#" target="_blank">广告合作a>li>
<li><a href="#" target="_blank">友情链接a>li>
<li><a href="#" target="_blank">招聘a>li>
ul>
div>
<div class="col-sm-3">
<h4>联系方式h4>
<ul class="list-unstyled">
<li><a href="#" target="_blank">新浪微博a>li>
<li><a href="#" target="_blank">电子邮件a>li>
ul>
div>
<div class="col-sm-4">
<h4>旗下网站h4>
<ul class="list-unstyled">
<li><a href="#" target="_blank">Laravel中文网a>li>
<li><a href="#" target="_blank">Ghost中国a>li>
<li><a href="#" target="_blank">BootCDNa>li>
<li><a href="#" target="_blank">Packagist中国镜像a>li>
<li><a href="#" target="_blank">燃腾教育a>li>
ul>
div>
<div class="col-sm-2">
<h4>赞助商h4>
<ul class="list-unstyled">
<li><a href="#" target="_blank">又拍云a>li>
ul>
div>
div>
div>
div>
<hr />
<div class="row ">
<div >
<ul class="list-inline text-center list-unstyled">
<li>京ICP备11008151号li>|
<li>京公网安备11010802014853li>
ul>
div>
div>
div>
footer>
body>
html>
顶部显示
中间内容显示
页脚显示
