mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-24 14:04:09 +03:00
Merge branch 'master' into v4
Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
This commit is contained in:
Mark Otto
+15
-5
@@ -8,7 +8,7 @@ title: Tabs
|
||||
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
|
||||
|
||||
<div class="bs-example bs-example-tabs">
|
||||
<ul id="myTab" class="nav nav-tabs" role="tablist">
|
||||
<ul id="myTab" class="nav nav-tabs" role="tabpanel">
|
||||
<li role="presentation" class="active">
|
||||
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
|
||||
</li>
|
||||
@@ -71,6 +71,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
|
||||
|
||||
You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Adding the `.nav` and `.nav-tabs` classes to the tab `<ul>` will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the `.nav` and `.nav-pills` classes will apply <a href="../components/#nav-pills">pill styling</a>.
|
||||
|
||||
<div role="tabpanel">
|
||||
{% highlight html %}
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
@@ -88,6 +89,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
|
||||
<div role="tabpanel" class="tab-pane" id="settings">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
### Fade effect
|
||||
|
||||
@@ -110,10 +112,18 @@ Activates a tab element and content container. Tab should have either a `data-ta
|
||||
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" role="tablist" id="myTab">
|
||||
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
|
||||
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
|
||||
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
|
||||
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
|
||||
<li role="presentation" class="active">
|
||||
<a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
Reference in New Issue
Block a user