从Bootstrap中分离出tab组件的样式

<style>
body {
font-family: 'Segoe UI',Arial,Verdana,Tahoma;
font-size: 13px;
line-height: 1.42857143;
color: #4d4d4d;
background-color: #fff;
}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.nav-tabs {border-bottom: 1px solid #ddd;}
.nav {padding-left: 0;margin-bottom: 0;list-style: none;list-style-position: outside;list-style-image: none;}
.nav-tabs li {float: left;margin-bottom: -1px;}
.nav li {position: relative;display: block;display: inline-block;}
.nav-tabs li a { margin-right: 2px;line-height: 1.42857143;border: 1px solid transparent;-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;-ms-border-radius: 4px 4px 0 0;}
.nav li a {position: relative;display: block;padding: 10px 15px;}
a{color: #337ab7;text-decoration: none;background-color: transparent;}
.nav-tabs li a:hover {border-color: #eee #eee #ddd;}
.nav li a:focus, .nav li a:hover {text-decoration: none;background-color: #eee;}
.nav-tabs li.active a, .nav-tabs li.active a:focus, .nav-tabs li.active a:hover {color: #555;cursor: default;background-color: #fff;border: 1px solid #ddd;border-bottom-color: transparent;border-top-width: 2px;}
:after, :before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.btn-group-vertical .btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {clear: both;}
.btn-group-vertical .btn-group:after, .btn-group-vertical .btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {display: table;content: " ";}
ol, ul {margin-top: 0;margin-bottom: 10px;}
.tab-content .tab-pane {display: none;}
.tab-content .active {display: block;}
</style>
<div style="margin: 40px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" style="height: 40px;">
<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">title1</a></li>
<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">title2</a></li></span>
<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">title3</a></li>
<li role="presentation"><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">title4</a></li>
</ul>
<div style="clear: both;"></div>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">Grid1</div>
<div role="tabpanel" class="tab-pane" id="tab2">Grid2</div>
<div role="tabpanel" class="tab-pane" id="tab3">Grid3</div>
<div role="tabpanel" class="tab-pane" id="tab4">Grid4</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!--Bootstrap: tab.js-->
<script>
/* ========================================================================
* Bootstrap: tab.js v3.3.6
* http://getbootstrap.com/javascript/#tabs * ========================================================================
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
+function ($) {
'use strict';

// TAB CLASS DEFINITION
// ====================

var Tab = function (element) {
// jscs:disable requireDollarBeforejQueryAssignment
this.element = $(element)
// jscs:enable requireDollarBeforejQueryAssignment
}

Tab.VERSION = '3.3.6'

Tab.TRANSITION_DURATION = 150

Tab.prototype.show = function () {
var $this = this.element
var $ul = $this.closest('ul:not(.dropdown-menu)')
var selector = $this.data('target')

if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
}

if ($this.parent('li').hasClass('active')) return

var $previous = $ul.find('.active:last a')
var hideEvent = $.Event('hide.bs.tab', {
relatedTarget: $this[0]
})
var showEvent = $.Event('show.bs.tab', {
relatedTarget: $previous[0]
})

$previous.trigger(hideEvent)
$this.trigger(showEvent)

if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return

var $target = $(selector)

this.activate($this.closest('li'), $ul)
this.activate($target, $target.parent(), function () {
$previous.trigger({
type: 'hidden.bs.tab',
relatedTarget: $this[0]
})
$this.trigger({
type: 'shown.bs.tab',
relatedTarget: $previous[0]
})
})
}

Tab.prototype.activate = function (element, container, callback) {
var $active = container.find('> .active')
var transition = callback
&& $.support.transition
&& ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length)

function next() {
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', false)

element
.addClass('active')
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)

if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
}

if (element.parent('.dropdown-menu').length) {
element
.closest('li.dropdown')
.addClass('active')
.end()
.find('[data-toggle="tab"]')
.attr('aria-expanded', true)
}

callback && callback()
}

$active.length && transition ?
$active
.one('bsTransitionEnd', next)
.emulateTransitionEnd(Tab.TRANSITION_DURATION) :
next()

$active.removeClass('in')
}

// TAB PLUGIN DEFINITION
// =====================

function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.tab')

if (!data) $this.data('bs.tab', (data = new Tab(this)))
if (typeof option == 'string') data[option]()
})
}

var old = $.fn.tab

$.fn.tab = Plugin
$.fn.tab.Constructor = Tab

// TAB NO CONFLICT
// ===============

$.fn.tab.noConflict = function () {
$.fn.tab = old
return this
}

// TAB DATA-API
// ============

var clickHandler = function (e) {
e.preventDefault()
Plugin.call($(this), 'show')
}

$(document)
.on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
.on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)
}(jQuery);
</script>