BootStrap便簽頁(yè)的簡(jiǎn)單應(yīng)用

更新時(shí)間：2017年01月06日 09:11:28 作者：bobo1356

本文通過(guò)實(shí)例代碼給大家簡(jiǎn)單介紹了bootstrap便簽頁(yè)的簡(jiǎn)單應(yīng)用，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下

效果圖如下：

代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>標(biāo)簽頁(yè)</title> 
  <link rel='stylesheet' > 
  <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瀏覽器，是一個(gè)由Google（谷歌）公司開(kāi)發(fā)的網(wǎng)頁(yè)瀏覽器。 
            該瀏覽器是基于其他開(kāi)源軟件所撰寫(xiě)，包括WebKit，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡(jiǎn)單且有效率的使用者界面。</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，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個(gè)開(kāi)源網(wǎng)頁(yè)瀏覽器， 
            使用Gecko引擎（非ie內(nèi)核），支持多種操作系統(tǒng)如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，是蘋(píng)果計(jì)算機(jī)的最新操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。 
            Safari在2003年1月7日首度發(fā)行測(cè)試版，并成為Mac OS X v10.3與之后的默認(rèn)瀏覽器，也是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公司制作的支持多頁(yè)面標(biāo)簽式瀏覽的網(wǎng)絡(luò)瀏覽器。 
            是跨平臺(tái)瀏覽器可以在Windows、Mac和Linux三個(gè)操作系統(tǒng)平臺(tái)上運(yùn)行。.</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版本)， 
            簡(jiǎn)稱IE，是美國(guó)微軟公司推出的一款網(wǎng)頁(yè)瀏覽器。它采用的排版引擎(俗稱內(nèi)核)為T(mén)rident。</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便簽頁(yè)的簡(jiǎn)單應(yīng)用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！