BootStrap便簽頁的簡單應用
更新時間：2017年01月06日 09:11:28 作者：bobo1356
本文通過實例代碼給大家簡單介紹了bootstrap便簽頁的簡單應用，非常不錯，具有參考借鑒價值，需要的朋友參考下
效果圖如下：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標簽頁</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瀏覽器，是一個由Google（谷歌）公司開發(fā)的網(wǎng)頁瀏覽器。
該瀏覽器是基于其他開源軟件所撰寫，包括WebKit，目標是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡單且有效率的使用者界面。</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，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個開源網(wǎng)頁瀏覽器，
使用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，是蘋果計算機的最新操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運算核心。
Safari在2003年1月7日首度發(fā)行測試版，并成為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公司制作的支持多頁面標簽式瀏覽的網(wǎng)絡瀏覽器。
是跨平臺瀏覽器可以在Windows、Mac和Linux三個操作系統(tǒng)平臺上運行。.</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，是美國微軟公司推出的一款網(wǎng)頁瀏覽器。它采用的排版引擎(俗稱內(nèi)核)為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便簽頁的簡單應用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Javascript中的for in循環(huán)和hasOwnProperty結(jié)合使用
當檢測某個對象是否擁有某個屬性時，hasOwnProperty 是唯一可以完成這一任務的方法，在 for in 循環(huán)時，建議增加 hasOwnProperty 進行判斷，可以有效避免擴展本地原型而引起的錯誤2013-06-06
這篇文章主要介紹了javascript中AJAX用法,實例分析了針對不同瀏覽器的Ajax使用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
隨便給一個數(shù) 比如100，那么從1到100圍成一個圓圈，然后就類似123123報數(shù)一樣逢3就舍掉，一直這樣輪詢 那么最后剩下來的那個數(shù)是多少？2010-08-08
使用Axios函數(shù)庫進行網(wǎng)絡請求的操作指南
在現(xiàn)代的前端開發(fā)中,API調(diào)用是實現(xiàn)前后端數(shù)據(jù)交互的重要環(huán)節(jié),而在眾多的HTTP庫中,Axios以其簡潔的語法、豐富的功能和易于擴展的特性,成為了開發(fā)者的首選,本篇文章將深入介紹Axios的使用方法,2024-11-11
下面小編就為大家?guī)硪黄獪\談json取值(對象和數(shù)組)。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
javascript之textarea打字機效果提示代碼推薦
非常不錯的提示輸入內(nèi)容，動態(tài)的提示，給人親切感2008-09-09
這篇文章介紹了js中單引號與雙引號沖突問題解決方法，有需要的朋友可以參考一下2013-10-10
當多個checkbox被選中時如何判斷是否有自己想要的，下面有段代碼，大家可以看看2014-09-09
解析JavaScript實現(xiàn)DDoS攻擊原理與保護措施
本文主要對JavaScript實現(xiàn)DDoS攻擊原理與保護措施進行介紹，具有一定的參考價值，需要的朋友一起來看下吧2016-12-12
通過判斷JavaScript的版本實現(xiàn)執(zhí)行不同的代碼
有時候需要根據(jù)JavaScript的版本來分別執(zhí)行一些代碼,那么就可能需要用到下面的代碼.2010-05-05