<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我的网页</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

</head>

<body>

<!--头部信息-->

<nav class="navbar navbar-inverse navbar-fixed-top">

    <div class="container">

        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="#">YoundGirl</a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">Linux学院 <span class="sr-only">(current)</span></a></li>

                <li><a href="#">Python学院</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

                       aria-expanded="false">更多学院<span class="caret"></span></a>

                </li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#">好好学习</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

                       aria-expanded="false">联系我啊 <span class="caret"></span></a>

                </li>

            </ul>

        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</nav>

<!--轮播图片-->

<header class="header-index">

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <ol class="carousel-indicators">

            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

            <li data-target="#carousel-example-generic" data-slide-to="1"></li>

            <li data-target="#carousel-example-generic" data-slide-to="2"></li>

            <li data-target="#carousel-example-generic" data-slide-to="3"></li>

        </ol>

        <!-- Wrapper for slides -->

        <div class="carousel-inner" role="listbox">

            <div class="item active">

                <img src="img/top1.png" width="100%" alt="...">

                <div class="carousel-caption">

                    <div class="h1 my-banner-title"><strong>姬灵焰</strong></div>

                </div>

            </div>

            <div class="item">

                <img src="img/top2.png" width="100%" alt="...">

                <div class="carousel-caption">

                    <div class="h1 my-banner-title">紫女</div>

                </div>

            </div>

            <div class="item">

                <img src="img/top3.png" width="100%" alt="...">

                <div class="carousel-caption">

                    <div class="h1 my-banner-title">雪女</div>

                </div>

            </div>

            <div class="item">

                <img src="img/top4.png" width="100%" alt="...">

                <div class="carousel-caption">

                    <div class="h1 my-banner-title">赤练</div>

                </div>

            </div>

        </div>

        <!-- Controls切换按钮 -->

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

            <span class="sr-only">up</span>

        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

            <span class="sr-only">down</span>

        </a>

    </div>

</header>

<!--巨幕-->

<div class="container-fluid">

    <div class="row">

        <div class="rol-md-6">

            <div class="jumbotron text-center">

                <h1>秦时明月出新版了</h1>

                <p>等了我好多年了啊啊啊</p>

                <hr width="20%">

                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击有惊喜</a></p>

            </div>

        </div>

    </div>

</div>

<!--图片展示-->

<div class="container">

    <div class="row">

        <div class="col-md-6 col-sm-6">

            <div class="thumbnail"><img src="img/denglu.png" alt=""></div>

        </div>

        <div class="col-md-6 col-sm-6 text-center">

            <h2>使用<strong>Bootstrap</strong>搭建的</h2>

            <h2>登陆页面</h2>

            <span class="my-line"></span>

            <p class="lead">

                使用表单、按钮组件搭建

            </p>

        </div>

    </div>

    <div class="row">

        <div class="col-md-6 col-sm-6 text-center">

            <h2>使用Bootstrap搭建的</h2>

            <h2>信息采集单</h2>

            <span class="my-line"></span>

            <p class="lead">

                使用表单、页头、面板组件、进度条等组件搭建

            </p>

        </div>

        <div class="col-md-6 col-sm-6">

            <div class="thumbnail"><img src="img/xinxicaiji.png" alt=""></div>

        </div>

    </div>

    <div class="row">

        <div class="col-md-6 col-sm-6">

            <div class="thumbnail"><img src="img/houtaiguanli.png" alt=""></div>

        </div>

        <div class="col-md-6 col-sm-6 text-center">

            <h2>使用<strong>Bootstrap</strong>搭建的</h2>

            <h2>后台管理</h2>

            <span class="my-line"></span>

            <p class="lead">

                使用导航，面板，组合按钮等组件搭建

            </p>

        </div>

    </div>

    <div class="row">

        <div class="col-md-6 col-sm-6 text-center">

            <h2>使用Bootstrap搭建的</h2>

            <h2>博客页面</h2>

            <span class="my-line"></span>

            <p class="lead">

                使用模板等组件搭建

            </p>

        </div>

        <div class="col-md-6 col-sm-6">

            <div class="thumbnail"><img src="img/daobanbk.png" alt=""></div>

        </div>

    </div>

</div>

<!--心路历程-->

<div class="container-fluid">

    <div class="row">

        <div class="rol-md-6">

            <div class="jumbotron text-center">

                <h3>心路历程</h3>

                <p>找材料真的是好麻烦，一般时间浪费在这上边了.......</p>

                <hr width="20%">

                <p>一个早上才写了这么点</p>

            </div>

        </div>

    </div>

</div>

<hr>

<!--我的小女友们-->

<div class="container">

    <div class="row">

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="img/Bootstrap_i1.png" alt="...">

            </a>

            <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default"

                                                                             role="button">Dislike</a></p>

        </div>

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="img/Bootstrap_i2.png" alt="...">

            </a>

            <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default"

                                                                             role="button">Dislike</a></p>

        </div>

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="img/Bootstrap_i3.png" alt="...">

            </a>

            <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default"

                                                                             role="button">Dislike</a></p>

        </div>

        <div class="col-xs-6 col-md-3">

            <a href="#" class="thumbnail">

                <img src="img/Bootstrap_i4.png" alt="...">

            </a>

            <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default"

                                                                             role="button">Dislike</a></p>

        </div>

        <h3 class="text-center">好多前女友。。。。我晕</h3>

    </div>

</div>

<!--尾部-->

<div class="container">

    <div class="row ">

        <div class="col-md-6">

            <p>学好bootstrap是一门可以装逼的技能</p>

            <p>所以一定要学好</p>

        </div>

        <div class="col-md-1 col-md-offset-5"><a class="btn btn-success btn-lg" href="#" role="button">点击有惊喜</a></div>

        <br>

        <br>

    </div>

</div>

<!--版权-->

<div class="container-fluid">

    <div class="row " style="background-color: black;color: white">

        <div class="rol-md-12 text-center">&copy;复制粘贴一把锁，前端老王子</div>

    </div>

</div>

<!--动态代码-->

<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

效果图↓：

基于bootstrap_网站汇总页面的更多相关文章

  1. 基于bootstrap_博客页面

    <!DOCTYPE html> <!-- saved from url=(0036)http://v3.bootcss.com/examples/blog/ --> <h ...

  2. CasperJS基于PhantomJS抓取页面

    CasperJS基于PhantomJS抓取页面 Casperjs是基于Phantomjs的,而Phantom JS是一个服务器端的 JavaScript API 的 WebKit. CasperJS是 ...

  3. 基于AngularJs的单页面程序

    基于AngularJs的单页面程序 在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...

  4. 基于JS实现回到页面顶部的五种写法(从实现到增强)

    这篇文章主要介绍了基于JS实现回到页面顶部的五种写法(从实现到增强)的相关资料,本文介绍的非常详细,实用性也非常高,非常具有参考借鉴价值,需要的朋友可以参考下   写法 [1]锚点 使用锚点链接是一种 ...

  5. 循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面

    在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...

  6. 如何在一个网站或者页面写js

    如何在一个网站或者页面写js: 1. JS的分层(功能):jquery(tools)  组件(ui)  应用(app).mvc(backboneJS) 2. JS的规划(管理):避免全局变量和方法(命 ...

  7. 用Teleport Ultra下载网站全部页面 爬虫

    测试case,就是把Commons-FileUpload 的API下载来   上网查的时候我才发现这是一个由很多页面组成的网站,下载起来很麻烦.   怎么办呢?呵呵,一定是有办法的.Teleport ...

  8. 基于视觉的Web页面分页算法VIPS的实现源代码下载

    基于视觉的Web页面分页算法VIPS的实现源代码下载 - tingya的专栏 - 博客频道 - CSDN.NET 基于视觉的Web页面分页算法VIPS的实现源代码下载 分类: 技术杂烩 2006-04 ...

  9. php的借用其他网站的页面覆盖Logo的技巧

    php的借用其他网站的页面覆盖Logo的技巧, <body> <div id="red_f"></div> <div class=&quo ...

随机推荐

  1. js的setInterval和setTimeout的那些浅坑

    setInterval和setTimeout的区别简单提一下 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() ...

  2. 15，re正则表达式

    判断手机号是否合法. phone_number = input('请输入手机号:') if re.match('^(13|14|15|18)[0-9]{9}$',phone_number): prin ...

  3. ASP.NET项目使用MYSQL数据库部署到IIS服务器找不到请求的.Net Framework Data Provider解决方案

    使用MySQL开发过程中在自己的机器上跑项目是没有问题的,但在实际部署到服务器上的时候就发生“找不到请求的.Net Framework Data Provider解决方案”错误,在排除项目本身原因之后 ...

  4. MHA 高可用集群搭建（二）

    MHA 高可用集群搭建安装scp远程控制http://www.cnblogs.com/kevingrace/p/5662839.html yum install openssh-clients mys ...

  5. SPOJ CIRU The area of the union of circles ——Simpson积分

    [题目分析] 圆的面积并. 直接Simpson积分,(但是有计算几何的解法,留着flag). simpson积分,如果圆出现了不连续的情况,是很容易出事情的.(脑补一下) 但是没有什么办法,本来就是一 ...

  6. [USACO08DEC]Trick or Treat on the Farm (拓扑排序,DP)

    题目描述 每年万圣节,威斯康星的奶牛们都要打扮一番,出门在农场的N个牛棚里转 悠,来采集糖果.她们每走到一个未曾经过的牛棚,就会采集这个棚里的1颗糖果. 农场不大,所以约翰要想尽法子让奶牛们得到快乐. ...

  7. Spring boot+Spring Security 4配置整合实例

    本例所覆盖的内容: 1. 使用Spring Security管理用户身份认证.登录退出 2. 用户密码加密及验证 3. 采用数据库的方式实现Spring Security的remember-me功能 ...

  8. ElasticSearch 中 REST API 详解

    本文主要内容: 1 ElasticSearch常用的操作 2 ElasticSearchbulk命令 ES REST API elasticsearch支持多种通讯,其中包括http请求响应服务,因此 ...

  9. 标准C程序设计七---14

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  10. ftrace用法

    ftrace官方文档在kernel/Documentation/trace/ftrace.txt文件中. 使用ftrace接口之前,如果系统没有自动挂载debugfs文件系统,则要先手动挂载. # m ...