<!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. 【04】图解JSON

    [04]图解JSON   附件列表

  2. map 插入数据的方式局别

    #include<map> #include<iostream> usingnamespace std; int main() { map <int, int> m ...

  3. 九度oj 题目1537：买卖股票

    题目描述: 给定一个大小为n的数组,数组的元素a[i]代表第i天的股票价格. 设计一个算法,计算在最多允许买卖k次(一买一卖记为一次)的条件下的最大收益. 需要注意的是,你不能同时拥有两份股票.也就是 ...

  4. 九度oj 题目1528：最长回文子串

    题目描述: 回文串就是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就是回文串. 回文子串,顾名思义,即字符串中满足回文性质的子串. 给出一个只由小写英文字符a,b,c...x, ...

  5. vscode & code snippets

    code snippets vscode & code snippets https://github.com/xgqfrms/FEIQA/tree/master/000-xyz/templa ...

  6. iOS控件-3级城市列表-plist版

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  7. 【bzoj2901】矩阵求和 前缀和

    题目描述 给出两个n*n的矩阵,m次询问它们的积中给定子矩阵的数值和. 输入 第一行两个正整数n,m. 接下来n行,每行n个非负整数,表示第一个矩阵. 接下来n行,每行n个非负整数,表示第二个矩阵. ...

  8. Codeforces Round Rockethon 2015

    A. Game 题目大意:A有N1个球,B有N2个球,A每次可以扔1-K1个球,B每次可以扔1-K2个球,谁先不能操作谁熟 思路:．．．．．显然每次扔一个球最优．．．． #include<ios ...

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

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

  10. P1168 中位数 (优先队列,巧解)

    题目描述 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[3], …, A[2k - 1]的中位数.即前1,3,5,……个数的中位数. 输入 ...