BootStrap便签页的简单应用

更新时间：2017年01月06日 09:11:28 作者：bobo1356

本文通过实例代码给大家简单介绍了bootstrap便签页的简单应用，非常不错，具有参考借鉴价值，需要的朋友参考下

效果图如下：

代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>标签页</title> 
  <link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
  <style> 
    .container{ 
      padding: 50px; 
      text-align: center; 
    } 
    .feature { 
      padding: 30px 0; 
    } 
    .feature-heading { 
      font-size: 50px; 
      color: #2a6496; 
      margin-top: 120px; 
    } 
    .text-muted { 
      font-size: 28px; 
      color: #999; 
    } 
  </style> 
</head> 
<body> 
<div class="container"> 
  <ul class="nav nav-tabs" role="tablist" id="feature-tab"> 
    <li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li> 
    <li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li> 
    <li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li> 
    <li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li> 
    <li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li> 
  </ul> 
  <div class="tab-content"> 
    <div class="tab-pane active" id="tab-chrome"> 
      <div class="row feature"> 
        <div class="col-md-7"> 
          <h2 class="feature-heading">Google Chrome <span 
              class="text-muted">使用最广的浏览器</span></h2> 
          <p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 
            该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p> 
        </div> 
        <div class="col-md-5"> 
          <img class="feature-image img-responsive" src="images/chrome-logo.jpg" 
             alt="Chrome"> 
        </div> 
      </div> 
    </div> 
    <div class="tab-pane" id="tab-firefox"> 
      <div class="row feature"> 
        <div class="col-md-5"> 
          <img class="feature-image img-responsive" src="images/firefox-logo.jpg" 
             alt="Firefox"> 
        </div> 
        <div class="col-md-7"> 
          <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span> 
          </h2> 
          <p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器， 
            使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p> 
        </div> 
      </div> 
    </div> 
    <div class="tab-pane" id="tab-safari"> 
      <div class="row feature"> 
        <div class="col-md-7"> 
          <h2 class="feature-heading">Safari <span class="text-muted">Mac用户首选</span></h2> 
          <p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。 
            Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p> 
        </div> 
        <div class="col-md-5"> 
          <img class="feature-image img-responsive" src="images/safari-logo.jpg" 
             alt="Safari"> 
        </div> 
      </div> 
    </div> 
    <div class="tab-pane" id="tab-opera"> 
      <div class="row feature"> 
        <div class="col-md-5"> 
          <img class="feature-image img-responsive" src="images/opera-logo.jpg" 
             alt="Opera"> 
        </div> 
        <div class="col-md-7"> 
          <h2 class="feature-heading">Opera <span class="text-muted">小众但易用</span> 
          </h2> 
          <p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 
            是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p> 
        </div> 
      </div> 
    </div> 
    <div class="tab-pane" id="tab-ie"> 
      <div class="row feature"> 
        <div class="col-md-7"> 
          <h2 class="feature-heading">IE <span class="text-muted">你懂的</span></h2> 
          <p class="lead">Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet 
            Explorer(7，8，9，10版本)， 
            简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p> 
        </div> 
        <div class="col-md-5"> 
          <img class="feature-image img-responsive" src="images/ie-logo.jpg" 
             alt="IE"> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
<script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script> 
<script src='http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> 
</body> 
</html>

以上所述是小编给大家介绍的BootStrap便签页的简单应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

JavaScript 以对象为索引的关联数组
我们常说JavaScript原生支持json，因为我们可以认为json就是对JavaScript的Object对象的灵活应用。
2010-05-05
微信小程序订阅消息(java后端实现)开发
这篇文章主要介绍了微信小程序订阅消息(java后端实现)开发，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
得到form下的所有的input的js代码
得到form下的所有的input的方法有很多，在本文为大家介绍下使用form 的集合对象elements,从而得到value，需要的朋友可以参考下
2013-11-11
纯前端JavaScript实现Excel IO案例分享
这篇文章主要为大家详细介绍了纯前端JavaScript实现Excel IO案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
JavaScript变量类型以及变量之间的转换你了解吗
这篇文章主要为大家详细介绍了JavaScript变量类型以及变量之间的转换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
利用js实现Ajax并发请求限制请求数量的示例代码
这篇文章主要介绍了利用js实现Ajax并发请求限制请求数量的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
JS获取经纬度并根据经纬度得到城市信息简单示例
前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,这篇文章主要给大家介绍了关于JS获取经纬度并根据经纬度得到城市信息的相关资料,需要的朋友可以参考下
2023-11-11
JavaScript中各种时间转换问题详解(YYYY-MM-DD、时间戳、中国标准时间)
在某些场景下,需要将时间转换为字符串进行展示或传递,下面这篇文章主要给大家介绍了关于JavaScript中各种时间转换问题(YYYY-MM-DD、时间戳、中国标准时间)的相关资料,需要的朋友可以参考下
2024-02-02
JS实现时间格式化的方式汇总
这篇文章介绍了JS实现时间格式化的方式，有需要的朋友可以参考一下
2013-10-10
ES6中的数组扩展方法
这篇文章主要介绍了ES6中的数组扩展方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08

BootStrap便签页的简单应用

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具