脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 便签页

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便签页的简单应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

相关文章

  • 基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

    基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

    该价格表基于Bootstrap网格系统来进行布局，通过简单的CSS3代码来美化价格表，样式非常的时尚漂亮，且能在不同屏幕下展示良好的效果,需要的朋友可以参考下
    2017-02-02
  • 前端开发基础javaScript的六大作用

    前端开发基础javaScript的六大作用

    这篇文章主要介绍了前端开发基础javaScript的六大作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 通过Javascript创建一个选择文件的对话框代码

    通过Javascript创建一个选择文件的对话框代码

    通过Javascript创建一个选择文件的对话框代码，需要的朋友可以参考下
    2012-06-06
  • JavaScript将数组转换为链表的方法

    JavaScript将数组转换为链表的方法

    这篇文章主要介绍了JavaScript将数组转换为链表的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • JS addEventListener()和attachEvent()方法实现注册事件

    JS addEventListener()和attachEvent()方法实现注册事件

    这篇文章主要介绍了JS addEventListener()和attachEvent()方法实现注册事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 实例讲解JS中pop使用方法

    实例讲解JS中pop使用方法

    在本篇文章里我们给大家分享了关于JS中pop使用方法的实例内容，有兴趣的朋友们学习下。
    2019-01-01
  • JavaScript函数中关于valueOf和toString的理解

    JavaScript函数中关于valueOf和toString的理解

    本文给大家介绍JavaScript函数中关于valueOf和toString的理解，简单的说就是需要转换为字符串时，会调用toString，需要转换为数字时需要调用valueOf。对js valueof tostring知识感兴趣的朋友一起学习吧
    2016-06-06
  • JS 简单实现滑块验证码

    JS 简单实现滑块验证码

    这篇文章主要为大家介绍了使用JS 简单实现滑块验证码示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-04-04
  • 详解嵌套命名空间在TypeScript中如何应用

    详解嵌套命名空间在TypeScript中如何应用

    命名空间是TypeScript中非常有用的概念，可以帮助我们组织和管理代码，避免命名冲突，下面小编就来和大家聊聊嵌套命名空间在TypeScript中是如何应用的吧
    2023-06-06
  • UniApp使用manifest.json应用配置的超详细教学

    UniApp使用manifest.json应用配置的超详细教学

    这篇文章主要给大家介绍了关于uni-app应用配置manifest.json最全最详细配置,manifest.json文件是应用的配置文件,用于指定应用的名称、图标、权限等,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01

最新评论