前端笔记day05

最新推荐文章于 2022-11-08 14:32:40 发布
最新推荐文章于 2022-11-08 14:32:40 发布
阅读量130 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43403974/article/details/100673772
版权

仿Bootstrap页面

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <title>Bootstrap中文网</title>
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/css/site.min.css" rel="stylesheet">

</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand hidden-sm" href="" onclick="_hmt.push">Bootstrap中文网</a>
        </div>
        <div class="navbar-collapse collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li class="hidden-sm hidden-md"><a href="" onclick="_hmt.push">Bootstrap2中文文档</a></li>
                <li><a href="" onclick="_hmt.push">Bootstrap3中文文档</a></li>
                <li><a href="" onclick="_hmt.push">Bootstrap4中文文档</a></li>
                <li><a href="" onclick="_hmt.push">Less 教程</a></li>
                <li><a href="" onclick="_hmt.push">jQuery API</a></li>
                <li><a class="reddot" href="" onclick="_hmt.push">网站实例</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a href=" " onclick="_hmt.push">关于</a></li>
            </ul>
        </div>
    </div>
</div>




<div class="jumbotron masthead">
    <div class="container">
        <h1>Bootstrap</h1>
        <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
        <p class="masthead-button-links">
            <a class="btn btn-lg btn-primary btn-shadow" href=" " role="button" onclick="_hmt.push">Bootstrap3中文文档(v3.3.7)</a>
        </p>
        <ul class="masthead-links">
            <li>
                <a href=""  role="button" onclick="_hmt.push">Bootstrap2中文文档(v2.3.2)</a>
            </li>
        </ul>
    </div>
</div>

<div class="bc-social">
    <div class="container">
        <ul class="bc-social-buttons">
            <li class="social-forum">
                <a class="" href=" " title="Bootstrap问答社区"onclick="_hmt.push">
                    <i class="fa fa-comments"></i> Bootstrap问答社区
                </a>
            </li>
            <li class="social-weibo">
                <a href=" " title="Bootstrap中文网官方微博" onclick="_hmt.push"><i class="fa fa-weibo"></i> 新浪微博：@Bootstrap中文网</a>
            </li>
        </ul>
    </div>
</div>


<div class="container projects">

    <div class="projects-header page-header">
        <h2>Bootstrap相关优质项目推荐</h2>
        <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
    </div>

    <div class="row">


        <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail">
                <a href="" title="Bootstrap 优站精选"onclick="_hmt.push">
                    <img class="lazy" src="01.png" width="300" height="150" data-src="" alt="Bootstrap 优站精选">
                </a>
                <div class="caption">
                    <h3>
                        <a href="" title="Bootstrap 优站精选"  onclick="_hmt.push">优站精选<br><small> Bootstrap 网站实例</small></a>
                    </h3>
                    <p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail">
                <a href="" title="Webpack 是前端资源模块化管理和打包工具" onclick="_hmt.push">
                    <img class="lazy" src="02.png" width="300" height="150" data-src="" alt="Webpack 是前端资源模块化管理和打包工具">
                </a>
                <div class="caption">
                    <h3>
                        <a href="" title="Webpack 是前端资源模块化管理和打包工具" onclick="_hmt.push">Webpack<br><small>是前端资源模块化管理和打包工具</small></a>
                    </h3>
                    <p>Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail">
                <a href="" title="React - 用于构建用户界面的 JavaScript 框架" onclick="_hmt.push">
                    <img class="lazy" src="03.png" width="300" height="150" data-src="" alt="React - 用于构建用户界面的 JavaScript 框架">
                </a>
                <div class="caption">
                    <h3>
                        <a href="" title="React - 用于构建用户界面的 JavaScript 框架"  onclick="_hmt.push">React<br><small>用于构建用户界面的 JavaScript 框架</small></a>
                    </h3>
                    <p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail">
                <a href="" title="TypeScript 中文手册" onclick="_hmt.push">
                    <img class="lazy" src="04.png" width="300" height="150" data-src="" alt="TypeScript 中文手册">
                </a>
                <div class="caption">
                    <h3>
                        <a href="" title="TypeScript 中文手册" onclick="_hmt.push">TypeScript <br><small>中文手册</small></a>
                    </h3>
                    <p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail">
                <a href="https://www.jquery123.com/" title="jQuery API 中文文档/手册" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'jQueryAPI中文手册'])">
                    <img class="lazy" src="05.png" width="300" height="150" data-src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/jqueryapi.png" alt="jQuery API 中文文档/手册">
                </a>
                <div class="caption">
                    <h3>
                        <a href="https://www.jquery123.com/" title="jQuery API 中文文档/手册" target="_blank" onclick="_hmt.push(['_trackEvent', 'tile', 'click', 'jQueryAPI中文手册'])">jQuery API <br><small>中文手册</small></a>
                    </h3>
                    <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail">
                <a href=" " title="Next.js 是一个轻量级的 React 服务端渲染应用框架。" onclick="_hmt.push">
                    <img class="lazy" src="06.png" width="300" height="150" data-src="" alt="Next.js 是一个轻量级的 React 服务端渲染应用框架。">
                </a>
                <div class="caption">
                    <h3>
                        <a href="" title="Next.js 是一个轻量级的 React 服务端渲染应用框架。"  onclick="_hmt.push">Next.js<br><small>中文文档</small></a>
                    </h3>
                    <p>Next.js 是一个轻量级的 React 服务端渲染应用框架。</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail">
                <a href="" title="Babel 是一个 JavaScript 编译器。" onclick="_hmt.push">
                    <img class="lazy" src="07.png" width="300" height="150" data-src="" alt="Babel 是一个 JavaScript 编译器。">
                </a>
                <div class="caption">
                    <h3>
                        <a href="" title="Babel 是一个 JavaScript 编译器。"  onclick="_hmt.push">Babel <br><small>是一个 JavaScript 编译器。</small></a>
                    </h3>
                    <p>Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。</p>
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail">
                <a href="" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。"onclick="_hmt.push">
                    <img class="lazy" src="08.png" width="300" height="150" data-src="" alt="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。">
                </a>
                <div class="caption">
                    <h3>
                        <a href="" title="Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。"  onclick="_hmt.push">Node.js<br><small>中文文档 / 手册</small></a>
                    </h3>
                    <p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
                </div>
            </div>
        </div>

    </div>
</div>




<footer class="footer ">
    <div class="container">
        <div class="row footer-top">
            <div class="col-md-6 col-lg-6">
                <h4>
                    <img src="logo.png">
                </h4>
                <p>我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
            </div>
            <div class="col-md-6  col-lg-5 col-lg-offset-1">
                <div class="row about">
                    <div class="col-sm-3">
                        <h4>关于</h4>
                        <ul class="list-unstyled">
                            <li><a href="/about/">关于我们</a></li>
                            <li><a href="/ad/">广告合作</a></li>
                            <li><a href="/links/">友情链接</a></li>
                            <li><a href="/hr/">招聘</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-3">
                        <h4>联系方式</h4>
                        <ul class="list-unstyled">
                            <li><a href="https://weibo.com/bootcss" title="Bootstrap中文网官方微博" target="_blank">新浪微博</a></li>
                            <li><a href="mailto:admin@bootcss.com">电子邮件</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4">
                        <h4>旗下网站</h4>
                        <ul class="list-unstyled">
                            <li><a href="https://www.golaravel.com/" target="_blank">Laravel中文网</a></li>
                            <li><a href="https://www.ghostchina.com/" target="_blank">Ghost中国</a></li>
                            <li><a href="https://www.bootcdn.cn/" target="_blank">BootCDN</a></li>
                            <li><a href="https://pkg.phpcomposer.com/" target="_blank">Packagist中国镜像</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-2">
                        <h4>特别致谢</h4>
                        <ul class="list-unstyled">
                            <li><a href="https://www.maoyuncloud.com/" target="_blank">猫云</a></li>
                            <li><a href="https://www.jdcloud.com/" target="_blank">京东云</a></li>
                            <li><a href="https://www.upyun.com" target="_blank">又拍云</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <hr/>
        <div class="row footer-bottom">
            <ul class="list-inline text-center" >
                <li><a href="" >京ICP备11008151号-6</a></li><li>京公网安备11010802014853</li>
            </ul>
        </div>
    </div>
</footer>

<!--<script src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/js/site.min.js"></script>-->

</body>
</html>
Mephostophilis
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap实现简约创意登录框页面设计
ICode联盟
06-22 1898
下载地址Bootstrap登录框设计效果。该bootstrap登录框采用扁平设计，提供用户名、密码和忘记密码选项，设计简洁、时尚大方。dd:
使用bootstrap框架实现简单登录页面
qq_49688914的博客
07-20 9320
登录注册
bootstrap实现管理系统首页设计
weixin_52837547的博客
11-08 1406
bootstrap实现管理系统首页设计
漂亮bootstrap后台ui管理平台模板
01-07
漂亮bootstrap后台ui管理平台模板,可以根据里面的摩卡写自己需要的
bootstrap搭建简易添加页面
04-28
bootstrap+html5框架搭建简易添加页面，适合初学者，，，
【前端学习笔记day13】2.9. html表格
01-08
文章目录2.9.... ...1、 标签：声明一个表格，它的常用属性如下： - border属性 定义表格的边框，设置值是数值 - cellpadding属性 定义单元格内容与边框的距离，设置值是数值 - cellspacing属性 定义单元格与单元格之间的...
Day05_CSS课堂笔记.md
08-06
零基础开始学习前端，HTML和CSS
老男孩教育前端笔记
03-20
【老男孩教育前端笔记】是源自知名IT教育机构——老男孩教育的一份前端学习资料，主要涵盖第14和15周的课程内容。这些笔记是深入理解和掌握前端开发技术的重要资源，尤其对于初学者或者想要提升前端技能的开发者来说...
day28笔记.md
05-07
day28笔记.md
【前端学习笔记day09】2.5. html图像标签、绝对路径和相对路径
01-08
文章目录2.5.... 绝对路径和相对路径 像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。 绝对地址：相对于磁盘的位置去...
基于bootstrap登录表单模板
02-25
一款不错的基于bootstrap表单登录模板
bootstrap 免费登陆页面、登陆表单（共三款）
07-24
bootstrap-login-forms.zip bootstrap-login-forms.zip bootstrap 免费登陆页面、登陆表单（共三款）
bootstrap 后台模板_ACE后台管理界面模板
11-17
程序开发应用bootstrap 后台模板_cms后台管理界面模板-ACE后台管理系统
前端使用 BootStrap 写一些后台常用的界面
IT小村
02-27 2万+
一、前言 1、作为一个专注后台方向上的学习者，肯定不只是简单地处理业务逻辑而已 2、自己独立完成一个作品，一般都要涉及到几个界面的编写： ①登录界面 ②CRUD界面 ③主页 ④… 3、UI方面的简单的框架有很多，使用的过程也是深有感触： ①之前先是使用 EasyUI ，后来逐渐觉得其写出来的界面如明日黄花，简陋不已，写出来的界面都不好意思说是自己写的。 ②于是接着选择了最新最热门...
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
热门推荐
JAVA
07-12 9万+
spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面
bootstrap 后台管理页面
shenyingkui的专栏
06-01 7896
声明： 左侧菜单借鉴了网上 的二级菜单的样式。希望作者不要追究我的法律责任。              功能说明：点击左侧菜单，右侧生成tabs，加载数据。tabs 可关闭。默认选中。       插件说明：使用bootstrapgrid 和jquery ui bootstrap。数据显示使用bootstrapgrid， tabs 生成和删除，使用jquery ui bootstrap。 i
基于Bootstrap的后台管理界面
u010528826的博客
01-12 1万+
由于项目需求一个后台界面，所以找了下跟Bootstrap相关的后台管理界面，最后选择了SB Admin。但看了SB Admin的代码都是写到一起的，而且项目这边需要跟服务器配合所以自己修改了下。特此记录一下，方便以后使用。效果跟SB Admin的一样没什么变化，只是将菜单部分代码抽到一个公用的HTML里面。
教你用Bootstrap开发漂亮的前端界面
itsource_yx的专栏
03-18 4382
Bootstrap介绍：　　 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap的特点： 　一、预处理脚本:虽然可以直接使用 Bootstrap 提供的 CSS 样式表，不要忘记 Bootstrap 的源码是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的。你可以采用预编译的 CSS...
bootstrap后台管理系统前后台实现(含数据库)
pengyufight的博客
07-01 3万+
撰写本文档目的是让后续开发者在理解该系统架构的基础上遵循一定规范保持系统架构的合理性；同时也能够达到允许没有开发经验仅有web基础的入门开发者能够通过复制粘贴的方式仿照demo示例进行开发的目的。 目 录 1 案例调研与选取... 2 1.1 案例调研... 2 1.2 UI选取... 3 2 系统实现... 3 2.1 实...
前端笔记啦啦啦啦啦啦啦
最新发布
04-23
前端开发是一项涉及到网页和移动应用程序用户界面（UI）的技术，负责呈现和控制用户与页面交互的部分。在前端开发中，JavaScript是一门重要的编程语言，用于实现客户端的交互和动态性。本文将总结JavaScript中的函数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值