<!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. 去掉WordPress顶部工具条

    WordPress为了方便管理员,或者登陆用户快速的从前台进入后台来管理网站,在WordPress网站顶部强制加入了一个工具条(admin bar),而且默认是对所有登陆用户都显示的,有时候看着挺烦心 ...

  2. Leetcode 376.摆动序列

    摆动序列 如果连续数字之间的差严格地在正数和负数之间交替,则数字序列称为摆动序列.第一个差(如果存在的话)可能是正数或负数.少于两个元素的序列也是摆动序列. 例如, [1,7,4,9,2,5] 是一个 ...

  3. 九度oj 题目1173：查找

    题目描述: 输入数组长度 n 输入数组      a[1...n] 输入查找个数m 输入查找数字b[1...m]  输出 YES or NO  查找有则YES 否则NO . 输入: 输入有多组数据. ...

  4. IntelliJ IDEA 代码提示快捷键

    1.写代码时用Alt-Insert(Code|Generate…)可以创建类里面任何字段的getter与setter方法. mac版 是ctrl+enter 2.CodeCompletion(代码完成 ...

  5. vue 自定义日历组件

    <template> <div class=""> <div class="calendarTraffic" name=" ...

  6. 雅礼培训 Problem B 【图论 + 贪心】

    题意 A和B在树上轮流选点,记A的联通块个数为\(x\),B的联通块个数为\(y\) A使\(x - y\)最大,B使\(x - y\) 二人采取最优策略,求\(x-y\) 题解 树联通块个数 = 点 ...

  7. angular实时显示checkbox被选中的元素

    /** * Created by zh on 20/05/15. */ // Code goes here var iApp = angular.module("App", []) ...

  8. vue elementUI 表单校验（数组多层嵌套）

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq ...

  9. formSubmit

    精简代码: <form name='form0001' method="post"> .... <li id="view"><a ...

  10. [bzoj3308]九月的咖啡店_欧拉筛素数_费用流

    bzoj-3308 九月的咖啡店 题目大意:深绘里在九份开了一家咖啡让,如何调配咖啡民了她每天的头等大事我们假设她有N种原料,第i种原料编号为i,调配一杯咖啡则需要在这里若干种兑在一起.不过有些原料不 ...