BootStrap便签页的简单应用

亲人是父母给你找的朋友,朋友是你给自己找的亲人,所以同等重要,孰轻孰重没那么多分别。

效果图如下:

代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>标签页</title> 
  <link rel='stylesheet' rel="nofollow noopener noreferrer" 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 rel="nofollow noopener noreferrer" href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li> 
    <li><a rel="nofollow noopener noreferrer" href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li> 
    <li><a rel="nofollow noopener noreferrer" href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li> 
    <li><a rel="nofollow noopener noreferrer" href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li> 
    <li><a rel="nofollow noopener noreferrer" 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便签页的简单应用就介绍到这了。健康的身体是实目标的基石。更多相关BootStrap便签页的简单应用内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
bootstrap select2 动态从后台Ajax动态获取数据的代码

MVC遇上bootstrap后的ajax表单验证

浅谈Bootstrap的DatePicker日期范围选择

bootstrap datepicker的基本使用好代码教程

Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结