<!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. hdu3594 Cactus

    仙人掌入门简单题. 先看一篇文档. #include <iostream> #include <cstring> #include <cstdio> using n ...

  2. Builder(构造者)

    Builder(构造者) <?php class Product { private $name; public function setName($name) { $this->name ...

  3. python3--命名空间字典

    命名空间字典 我们学到了模块的命名空间实际上是以字典的形式实现的,并且可以由内置属性__dict__显示这一点.类和实例对象也是如此:属性点号运算其实内部就是字典的索引运算,而属性继承其实就是搜索连结 ...

  4. Leetcode 324.摆动排序II

    摆动排序II 给定一个无序的数组 nums,将它重新排列成 nums[0] < nums[1] > nums[2] < nums[3]... 的顺序. 示例 1: 输入: nums ...

  5. VS2010SP1修复补丁&Microsoft Visual Studio 2010 Service Pack 1

    网上比较难找,官网找也容易找错,现在贴出来 补丁包下载地址:链接:https://pan.baidu.com/s/1_tFzXL6PaHiWk3JeRBw0ww 密码:z38k

  6. 刷题总结——子串（NOIP2015提高组）

    题目: 题目背景 NOIP2015 提高组 Day2 T2 题目描述 有两个仅包含小写英文字母的字符串 A 和 B .现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在 ...

  7. 【树状数组区间修改区间求和】codevs 1082 线段树练习 3

    http://codevs.cn/problem/1082/ [AC] #include<bits/stdc++.h> using namespace std; typedef long ...

  8. Admin组件-----Django自带

    1 list_display from django.contrib import admin # Register your models here. from app01.models impor ...

  9. 洛谷 [T21778] 过年

    离线扫描线+查分+线段树 我们发现,这个题的询问都是离线的,所以我们尝试用离线扫描线的方法来处理 对于每一次操作,我们维护一个差分数组, 在询问的时候,我们用一根扫描线,从左往右扫,并用线段树维护,每 ...

  10. msp430项目编程40

    msp430综合项目---多路温度检测系统40