1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>我的网页</title>
  6.     <link rel="stylesheet" href="css/bootstrap.min.css">
  7.  
  8. </head>
  9. <body>
  10.  
  11. <!--头部信息-->
  12. <nav class="navbar navbar-inverse navbar-fixed-top">
  13.     <div class="container">
  14.         <!-- Brand and toggle get grouped for better mobile display -->
  15.         <div class="navbar-header">
  16.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  17.                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  18.                 <span class="sr-only">Toggle navigation</span>
  19.                 <span class="icon-bar"></span>
  20.                 <span class="icon-bar"></span>
  21.                 <span class="icon-bar"></span>
  22.             </button>
  23.             <a class="navbar-brand" href="#">YoundGirl</a>
  24.         </div>
  25.  
  26.         <!-- Collect the nav links, forms, and other content for toggling -->
  27.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  28.             <ul class="nav navbar-nav">
  29.                 <li class="active"><a href="#">Linux学院 <span class="sr-only">(current)</span></a></li>
  30.                 <li><a href="#">Python学院</a></li>
  31.                 <li class="dropdown">
  32.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  33.                        aria-expanded="false">更多学院<span class="caret"></span></a>
  34.  
  35.                 </li>
  36.             </ul>
  37.  
  38.             <ul class="nav navbar-nav navbar-right">
  39.                 <li><a href="#">好好学习</a></li>
  40.                 <li class="dropdown">
  41.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
  42.                        aria-expanded="false">联系我啊 <span class="caret"></span></a>
  43.  
  44.                 </li>
  45.             </ul>
  46.         </div><!-- /.navbar-collapse -->
  47.     </div><!-- /.container-fluid -->
  48. </nav>
  49.  
  50. <!--轮播图片-->
  51. <header class="header-index">
  52.     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  53.         <!-- Indicators -->
  54.         <ol class="carousel-indicators">
  55.             <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  56.             <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  57.             <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  58.             <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  59.         </ol>
  60.  
  61.         <!-- Wrapper for slides -->
  62.         <div class="carousel-inner" role="listbox">
  63.             <div class="item active">
  64.                 <img src="img/top1.png" width="100%" alt="...">
  65.                 <div class="carousel-caption">
  66.                     <div class="h1 my-banner-title"><strong>姬灵焰</strong></div>
  67.                 </div>
  68.             </div>
  69.             <div class="item">
  70.                 <img src="img/top2.png" width="100%" alt="...">
  71.                 <div class="carousel-caption">
  72.                     <div class="h1 my-banner-title">紫女</div>
  73.                 </div>
  74.             </div>
  75.             <div class="item">
  76.                 <img src="img/top3.png" width="100%" alt="...">
  77.                 <div class="carousel-caption">
  78.                     <div class="h1 my-banner-title">雪女</div>
  79.                 </div>
  80.             </div>
  81.             <div class="item">
  82.                 <img src="img/top4.png" width="100%" alt="...">
  83.                 <div class="carousel-caption">
  84.                     <div class="h1 my-banner-title">赤练</div>
  85.                 </div>
  86.             </div>
  87.         </div>
  88.  
  89.         <!-- Controls切换按钮 -->
  90.         <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  91.             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  92.             <span class="sr-only">up</span>
  93.         </a>
  94.         <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  95.             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  96.             <span class="sr-only">down</span>
  97.         </a>
  98.     </div>
  99. </header>
  100.  
  101. <!--巨幕-->
  102. <div class="container-fluid">
  103.     <div class="row">
  104.         <div class="rol-md-6">
  105.             <div class="jumbotron text-center">
  106.                 <h1>秦时明月出新版了</h1>
  107.                 <p>等了我好多年了啊啊啊</p>
  108.                 <hr width="20%">
  109.                 <p><a class="btn btn-primary btn-lg" href="#" role="button">点击有惊喜</a></p>
  110.             </div>
  111.         </div>
  112.     </div>
  113. </div>
  114.  
  115. <!--图片展示-->
  116. <div class="container">
  117.     <div class="row">
  118.         <div class="col-md-6 col-sm-6">
  119.             <div class="thumbnail"><img src="img/denglu.png" alt=""></div>
  120.         </div>
  121.         <div class="col-md-6 col-sm-6 text-center">
  122.             <h2>使用<strong>Bootstrap</strong>搭建的</h2>
  123.             <h2>登陆页面</h2>
  124.             <span class="my-line"></span>
  125.             <p class="lead">
  126.                 使用表单、按钮组件搭建
  127.             </p>
  128.         </div>
  129.     </div>
  130.     <div class="row">
  131.         <div class="col-md-6 col-sm-6 text-center">
  132.             <h2>使用Bootstrap搭建的</h2>
  133.             <h2>信息采集单</h2>
  134.             <span class="my-line"></span>
  135.             <p class="lead">
  136.                 使用表单、页头、面板组件、进度条等组件搭建
  137.             </p>
  138.         </div>
  139.         <div class="col-md-6 col-sm-6">
  140.             <div class="thumbnail"><img src="img/xinxicaiji.png" alt=""></div>
  141.         </div>
  142.     </div>
  143.     <div class="row">
  144.         <div class="col-md-6 col-sm-6">
  145.             <div class="thumbnail"><img src="img/houtaiguanli.png" alt=""></div>
  146.         </div>
  147.         <div class="col-md-6 col-sm-6 text-center">
  148.             <h2>使用<strong>Bootstrap</strong>搭建的</h2>
  149.             <h2>后台管理</h2>
  150.             <span class="my-line"></span>
  151.             <p class="lead">
  152.                 使用导航，面板，组合按钮等组件搭建
  153.             </p>
  154.         </div>
  155.     </div>
  156.     <div class="row">
  157.         <div class="col-md-6 col-sm-6 text-center">
  158.             <h2>使用Bootstrap搭建的</h2>
  159.             <h2>博客页面</h2>
  160.             <span class="my-line"></span>
  161.             <p class="lead">
  162.                 使用模板等组件搭建
  163.             </p>
  164.         </div>
  165.         <div class="col-md-6 col-sm-6">
  166.             <div class="thumbnail"><img src="img/daobanbk.png" alt=""></div>
  167.         </div>
  168.     </div>
  169. </div>
  170.  
  171. <!--心路历程-->
  172. <div class="container-fluid">
  173.     <div class="row">
  174.         <div class="rol-md-6">
  175.             <div class="jumbotron text-center">
  176.                 <h3>心路历程</h3>
  177.                 <p>找材料真的是好麻烦，一般时间浪费在这上边了.......</p>
  178.                 <hr width="20%">
  179.                 <p>一个早上才写了这么点</p>
  180.  
  181.             </div>
  182.         </div>
  183.     </div>
  184. </div>
  185.  
  186. <hr>
  187. <!--我的小女友们-->
  188. <div class="container">
  189.     <div class="row">
  190.         <div class="col-xs-6 col-md-3">
  191.             <a href="#" class="thumbnail">
  192.                 <img src="img/Bootstrap_i1.png" alt="...">
  193.             </a>
  194.             <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default"
  195.                                                                              role="button">Dislike</a></p>
  196.         </div>
  197.         <div class="col-xs-6 col-md-3">
  198.             <a href="#" class="thumbnail">
  199.                 <img src="img/Bootstrap_i2.png" alt="...">
  200.             </a>
  201.             <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default"
  202.                                                                              role="button">Dislike</a></p>
  203.         </div>
  204.         <div class="col-xs-6 col-md-3">
  205.             <a href="#" class="thumbnail">
  206.                 <img src="img/Bootstrap_i3.png" alt="...">
  207.             </a>
  208.             <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default"
  209.                                                                              role="button">Dislike</a></p>
  210.         </div>
  211.         <div class="col-xs-6 col-md-3">
  212.             <a href="#" class="thumbnail">
  213.                 <img src="img/Bootstrap_i4.png" alt="...">
  214.             </a>
  215.             <p><a href="#" class="btn btn-primary" role="button">Like</a> <a href="#" class="btn btn-default"
  216.                                                                              role="button">Dislike</a></p>
  217.         </div>
  218.         <h3 class="text-center">好多前女友。。。。我晕</h3>
  219.     </div>
  220. </div>
  221.  
  222. <!--尾部-->
  223. <div class="container">
  224.     <div class="row ">
  225.         <div class="col-md-6">
  226.             <p>学好bootstrap是一门可以装逼的技能</p>
  227.             <p>所以一定要学好</p>
  228.         </div>
  229.  
  230.         <div class="col-md-1 col-md-offset-5"><a class="btn btn-success btn-lg" href="#" role="button">点击有惊喜</a></div>
  231.         <br>
  232.         <br>
  233.     </div>
  234. </div>
  235.  
  236. <!--版权-->
  237. <div class="container-fluid">
  238.     <div class="row " style="background-color: black;color: white">
  239.         <div class="rol-md-12 text-center">&copy;复制粘贴一把锁，前端老王子</div>
  240.     </div>
  241. </div>
  242. <!--动态代码-->
  243. <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
  244. <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  245. </body>
  246. </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. 【LeetCode】Unique Email Addresses(独特的电子邮件地址)

    这道题是LeetCode里的第929道题. 题目要求: 每封电子邮件都由一个本地名称和一个域名组成,以 @ 符号分隔. 例如,在 alice@leetcode.com中, alice 是本地名称,而  ...

  2. TOJ 4804: 树网的核

    这个是NOIP的提高组的题 4804: 树网的核  Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Sub ...

  3. RESTful API接口

    我所理解的RESTful Web API [设计篇] 百度:RESTful restful一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件 ...

  4. CentOS下SWAP分区建立及释放内存详解

    方法一: 一.查看系统当前的分区情况: >free -m 二.创建用于交换分区的文件: >dd if=/dev/zero of=/whatever/swap bs=block_size ( ...

  5. 陌上花开（bzoj 3262）

    Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当 ...

  6. 更改App名称

    To change the installed application name, in Xcode: 1. Select your Target on the left side under Gro ...

  7. 多个ajax执行混乱问题

    多个ajax执行混乱问题,之前拿ajax取代iframe做响应布局(左侧点击,右侧展示),当执行多个点击事件时会造成一个页面的初始化触发另一个页面的on click的function, 将ajax调为 ...

  8. css可见性

    overflow:hidden:       溢出隐藏 visibility:hidden:        隐藏元素,隐藏之后还占据原来的位置 display:none:            隐藏元 ...

  9. java ssh 面试题

    1.什么是hibernate及hibernate工作原理.流程和为什么要用Hibernate? 答: 定义:Hibernate是一个开放源代码的对象关系映射(ORM)框架,它对JDBC进行了非常轻量级 ...

  10. HBase总结

    1.HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Google ...