<!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. python知识点拾遗

    内容概要 1.__str__ 2.os.path相关方法 1.__str__ 我们先定义一个Student类,打印一个实例: class Student(object): def __init__(s ...

  2. Java异常架构图及面试题---https://www.cnblogs.com/gaoweixiao99/p/4905860.html

    https://www.cnblogs.com/gaoweixiao99/p/4905860.html 红色为检查异常,就是eclipse要提示你是try catch 还是throws. 非检查异常, ...

  3. Codeforces Round #417 (Div. 2) 花式被虐

    A. Sagheer and Crossroads time limit per test 1 second memory limit per test 256 megabytes input sta ...

  4. IIS中如何应用程序启用https协议

    首先已经安装完了SSL证书 1.找到需要添加的站点,右击 ---> 编辑绑定-->添加--->选择  ""https"-->选择"SSL ...

  5. [BZOJ2523][Ctsc2001]聪明的学生

    [BZOJ2523][Ctsc2001]聪明的学生 试题描述 一位教授逻辑学的教授有三名非常善于推理且精于心算的学生A,B和C.有一天,教授给他们三人出了一道题:教授在每个人脑门上贴了一张纸条并告诉他 ...

  6. vue 组件高级用法实例详解

    一.递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了. 示例如下: <div id="app19"> <my-compone ...

  7. [BZOJ4506] [Usaco2016 Jan]Fort Moo（DP？）

    传送门 总之可以先预处理出来每个位置最多往上延伸多少 枚举两行,看看夹在这两行中间的列最大能构成多大的矩形 可以看出,必须得在一个两行都没有X的区间才有可能构成最大的答案 那么可以把这些区间处理出来, ...

  8. K-lord #3 (组合数学)

    题目描述 如图,设一个圆分成 n 个扇形 S1 ... ,Sn (扇形大小不一样),现用 k 种不同的颜色对这 n 个扇形进行染色 ( n>=3 , k>=3 ); 每一个扇形染一种颜色, ...

  9. 巴蜀1088 Antiprime数

    Description 如果一个自然数n(n>=1),满足所有小于n的自然数(>=1)的约数个数都小于n的约数个数,则n是一个Antiprime数.譬如:1, 2, 4, 6, 12, 2 ...

  10. 标准C程序设计七---07

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