【JavaWeb_学习笔记】Bootstrap框架练习

JavaWeb练习项目--"JEE商城" 一.项目简介 本项目主要使用了JavaWeb技术,包括Jsp,Servlet,JDBC,适合刚学完JavaWeb的新手作为练习项目,巩固知识 项目GitHub地址:https://github.com/JavaStudenttwo/JEEShop 项目展示网址:http://47.106.99.83/JEEShop/jsp/index.jsp 二.项目涉及的技术 前端: 使用了BootStrap... 阅读详情

运用Bootstrap框架复现Bootstrap中文网首页

<!DOCTYPE html>
<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">
            <!--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">
                        <!--data-toggle,用于告诉 JavaScript 需要对按钮做什么; data-target,指示要切换到哪一个元素-->
                        <span class="sr-only">Toggle navigation</span>
                        <!--三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素-->
                        <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 API</a></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>Bootstrap</h1>  
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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 @mdo</small></a></h3>
                            <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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/">Designmodo</a>提供。Flat UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。在此强烈推荐!</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成缩略图构成-->
                    <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">4wer</a>同学汉化整理。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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 UI</small></a></h3>
                            <p>这套工具让你在使用 jQuery UI 控件时也能充分利用 Bootstrap 的样式,而且不会出现样式不统一的现象,Bootstrap 和 jQuery UI 可以完美融合在一起了!</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成缩略图构成-->
                    <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 风格的 Bootstrap</small></a></h3>
                            <p>Google 的 UI 素来以简洁著称,现在 Bootstrap 也来 Google Style 一把,喜欢 Google 的就来试试这套 Google Bootstrap 吧!</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!--thumbnail成缩略图构成-->
                    <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">
                    <!--thumbnail成缩略图构成-->
                    <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">BootCDN</a></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>京公网安备11010802014853</li>
                        </ul>
                    </div>
                </div>
            </div>
        </footer>
    </body>
</html>

顶部显示
这里写图片描述
中间内容显示
这里写图片描述
页脚显示
这里写图片描述

基于javaweb+jsp的通讯录管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap) 基于javaweb+jsp的通讯录管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap) JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript Bootstrap 基础JSP+Servlet或JSP+SSM(Spring、SpringMVC、MyBatis)框架或JSP+SSM+Maven(pom.xml)框架或SpringBoot...均可 开发工具:eclipse/idea/myeclipse/s 阅读详情

相关推荐

基于javaweb+jsp的鲜花花卉销售管理系统(JavaWeb MySQL JSP Bootstrap Servlet SSM SpringBoot)

基于javaweb+jsp的鲜花花卉销售管理系统(JavaWeb MySQL JSP Bootstrap Servlet SSM SpringBoot) JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript Bootstrap. 基础JSP+Servlet或JSP+SSM(Spring、SpringMVC、MyBatis)框架或JSP+SSM+Maven(pom.xml)框架或SpringBoot...均可 开发工具:eclipse/idea/myeclip

m0_70030059的博客 2872

Bootstrap相关优质项目推荐

Bootstrap 编码规范 by @mdoBootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。TypeScript 中文手册TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。React 用于构建用户界面的 JavaScript 框架React 起源于 Fac...

weixin_34380296的博客 643

BootStrap项目案例

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的css前端框架,这是一个示例

Bootstrap实战练习---进入前端开发项目组实习

进入前端开发项目组实习 head <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>进入前端开发项目组实习https://www.eduwork.cn/categroy/web.html#</title> <!--移动设备优先--> <meta name="viewport" content="width=device

Season 优快云博客 457

Bootstrap4 官方模板 ( Hyper - Responsive Bootstrap 4 Admin Dashboard )

一个功能齐全的仪表板和管理模板,带有精心设计的UI元素、组件、小部件和页面。超级干净和灵活的布局将使您可以轻松地构建Web应用程序。它可用于创建基于SaaS的界面、自定义管理面板、仪表板、CRM、CMS、电子商务面板等。 Hyper is a fully featured dashboard and admin template comes with tones of well designed UI elements, components, widgets and pages. The super clean and flexible layout would enable you to easily build web applications. It can be used to create a saas based interface, custom admin panels, dashboard, CRM, CMS, e-commerce panel, etc. Features: Built on latest bootstrap (v4.3.1) Easy customizations with extensive use of SCSS variables Fully responsive and works across all modern/supported browsers, devices Documentation on all available components, widgets, etc Easy development and tooling with Gulp workflow Components: All of Bootstrap components Icons Multiple widgets Toast Notifications Chartjs Charts Brite Charts Apex Charts Select2, Date Range Picker, Input Mask included Bootstrap form wizard Timepickers Spinner Max Length Validator Advanced Datatables Dragula – Simple Drag and Drop Multiple File Uploads WYSIWYG Editors (Summernote and SimpleMDE) Google and Vector Maps Layouts: Vertical Horizontal Detached Sidenav Light Sidenav Collapsed Sidenav Boxed (Fixed width) – Vertical and Horizontal Apps: Calendar Projects (List page, Detail Page) Tasks (List Page, Detail Modal, Add Task Modal) Ecommerce (Product listing, product detail, order listing, order detail, shopping cart, checkout, seller listing, etc) Pages: Sample Dashboard Profile Invoice FAQ Pricing Maintenance Login (Two variations) Register (Two variations) Logout (Two variations) Recover Password (Two variations) Lock Screen (Two variations) Confirm Mail (Two variations) Error 404 Error 500

Bootstrap 4 – Responsive Web Design_Code 源码

Bootstrap 4 – Responsive Web Design_Code 源码 本资源转载自网络,如有侵权,请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊官网搜索此书

【Bootstrap】bootstrap入门之媒体查询技术、样式类_01

Bootstrap 是一款快速构建、响应式网站的,UI框架。框架的作用就是为开发人员提供一些已经封装好,或者已经优化好的名称,可以直接使用来达到效果。前提是一定要按照他提供的文档进行书写。

青春木鱼的博客 2581

学生网页作品-期末作业

适合期末作业,因为做的不是很好,老师一眼就能看出你是自己做的,嗯就是这个样子。50字够了吧,还不够,再加50字

eclipse中使用bootstrap

1.先在WebContent中导入以下三个文件(自行去官网下载:bootstrap,jQuery) 2.新建.jsp文件,比如index.jsp,现在<head>标签里导入下面这些文件,注意顺序不能颠倒 <script src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></sc...

1万+

非常优秀的bootstrap模板,适用于各类oa项目

非常优秀的bootstrap模板,适用于各类oa项目,js代码齐全,适用面广

全网超神bootstrap综合实战含源码

全网火爆的bootstrap综合实战,包含前台和后台项目,写代码,不枯燥!

bootstrap框架与javaweb项目结合/引入

bootstrap框架是前端使用较多的前端样式框架,但是最近突然忘记框架怎么和javaweb怎么结合引入使用,故 先做个笔记 1、在官网上下载好bootstrap压缩包并解压,加压后包含这三个文件夹,问价中包含的文件如下: 2、将css、js、founts这三个文件夹直接拷贝放到javaweb 项目的WebRoot/WebContent文件夹下,与WEB-INF文件夹在同一级,如图 ...

weixin_38610651的博客 7571

BugkuCTF-PWN题pwn2-overflow超详细讲解

解题思路 1)计算出get_shell_的地址偏移量 2)算出来之后就直接溢出到后门函数 知识点 x64函数调用规则 解题之前我们先学下linux x64的函数调用规则。 x64机器在调用某个函数前,比如int func(int a, int b, int c, int d, int e, int f, int g, int h),首先他会把前6个参数从左往右存入到寄存器rdi、rsi、rdx、rcx、r8、r9,其余参数存入到栈里,保存的顺序是从右往左入栈。比如abcdef会存入到寄存器里,然后一次入栈h

am_03的博客 3013

javaweb动态网站-----如何在javaweb项目中使用bootstrap框架

数据库作业居然是写一个javaweb动态网站喵....一点都不会实在是愁死人了╮(╯_╰)╭,做完了的总结如下: 首先,新建一个Dynamic Web Project,项目结构实例如图:                                             可以看到项目结构如下: ————src(源码) ————WebContent ————----cs

YoYoDelphine的博客 1万+

MSP430开发入门:手把手教你用IAR EW430从建工程到烧录调试(附F5529配置)

本文详细介绍了如何使用IAR Embedded Workbench(EW430)进行MSP430F5529开发板的嵌入式开发,从环境搭建、工程配置到硬件调试全流程。通过实战示例和关键配置技巧,帮助开发者快速掌握MSP430开发的核心要点,包括LED控制、定时器使用和低功耗优化等实用技术。

weixin_30240349的博客 392

从想法到零件:手把手拆解一个汽车功能如何从PRD写到SSTS和CTS

本文详细拆解了汽车电子需求从市场文档(MRD)到零部件技术规范(CTS)的完整流程,以雨天自动关窗功能为例,展示了PRD、SSTS和CTS的编写要点与交互设计。文章重点解析了系统分解的艺术和零部件落地的精确参数要求,为汽车电子工程师提供了从概念到实现的全流程实践指南。

weixin_30300225的博客 481

JavaWeb进阶:从原生CSS/JS到Bootstrap框架的优雅转变

开发效率:组件化设计,大幅减少编码量一致性:统一的设计语言,保证UI一致性响应式:内置移动优先的网格系统社区支持:庞大的社区和丰富的插件生态文档完善:官方文档详尽,学习成本低。

吾为热爱计科,致力于知识分享的践行者,此博客是我在这条道路上留下的足迹。 393

无线充电效率从75%到90%+:深入拆解LCC补偿网络如何成为电动汽车和智能车竞赛的‘稳压器’

本文深入探讨了LCC补偿网络如何显著提升无线充电效率至90%以上,成为电动汽车和智能车竞赛中的关键技术。通过分析LCC的三元件结构和双模式切换特性,揭示了其在负载突变和线圈错位情况下的稳定性优势,并展示了实际应用中的效率提升和产业化挑战。

weixin_42528191的博客 397

Javaweb【Bootstrap前端框架】

今日内容Bootstrap响应式布局CSS样式和JS插件案例 Bootstrap 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。 Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 * 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。 * 好处: ...

hu_zhi_chao的博客 612

[RAM] DRAM 导论:DDR4 | DDR5 | LPDDR5 | GDRR6 | HBM 应运而生

有数据的地方就有存储, 内存是谁都离不开的产品。而动态随机存取存储器(DRAM)作为一种常见的内存。本博客将介绍DRAM的基本概念、工作原理、优缺点以及应用领域等方面。

串起点滴 3918

【AI大模型应用开发】1.0 Prompt Engineering(提示词工程)- 典型构成、原则与技巧,代码中加入Prompt

Prompt典型构成、原则与技巧,以及OpenAI API重要参数解释,助你轻松入门Prompt

同学小张的博客 2581

JavaWeb CSS框架——bootstrap

CSS框架的概念:CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作,提高工作效率CSS框架产生的原因:        提高CSS代码重用效率,基础的代码不需要重复编写        提供统一而规范的css编码规则,有利于团队协作        浏览器兼容性好这里主要讲BootStrap框架,BootStr...

xiongzhouxiong的博客 593

软考中级-软件设计师 知识点整理(一篇就过了 建议收藏)

软考中级-软件设计师上午题知识点总结

片言可决讼,半纸能缚龙 17万+

【JavaWeb】前端框架之Bootstrap

文章目录1 概念2 快速入门3 响应式布局4 CSS样式和JS插件 1 概念 BootStrap是前端开发框架,基于HTML、CSS、JavaScript。 优点: 定义了很多CSS样式和JS插件,可以直接使用。 响应式布局:同一套页面可以兼容不同分辨率的设备。 2 快速入门 下载Bootstrap 将Bootstrap导入项目 复制粘贴模板导入样式和插件 <!DOCTYPE htm...

XD的学习笔记 385

昇腾,Ascend,NPU,mindie,镜像,部署vllm:第5篇,昇腾环境下部署蒸馏版deepseek-r1,并在dify中注册模型供应商

这两天没少折腾deepseek-r1。之前在A100上用ollama部署了一份DeepSeek-R1-Distill-Qwen-32B,感觉真的特别慢。现在,再用昇腾部署一遍,看看速度能不能更快。p.s. 类似的内容其实已经写了很多遍了。但感觉之前写得都太碎,不够顺畅。接着新模型写篇长文,把能包括的都包括进来。这样大家也不需要到处翻来翻去。

xiezhipu的博客 2450

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

JavaWeb CSS框架——BootStrap

CSS框架概念:      CSS框架是一系列CSS文件的集合体。包含了基本的元素重置、页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作,提高工作效率。产生原因1、提高CSS代码重用效率,基础的代码不需要重写编写2、提供统一而规范的css编码规则,有利于团队协作3、浏览器兼容性好BootStrap介绍BootStrap是当前比较流行的CSS框架之一,它是Teitter推...

west_xia_616的博客 763

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

上一篇: 【JavaSE_学习笔记】字节流
下一篇: 【Java练习】创建和读取大文件
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值