English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل بوتستراپ الأساسي

إضافة بوتستراپ

أداة بطاقات بوتستراپ

标签页(Tab)在 عناصر التوجيه Bootstrap 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

用法

您可以通过以下两种方式启用标签页：

  • 通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。

    添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

    <ul>
　　　　<li><a href="#identifier" data-toggle="tab">Home</a></li>
　　　　...
</ul>

  • 通过 JavaScript：您可以使用 Javascript 来启用标签页，如下所示：

    $('#myTab a').click(function(e) {
　　e.preventDefault()
　　$(this).tab('show')
}

    下面的示例演示了以不同的方式来激活各个标签页：

    // 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
// 选取第一个标签页
$('#myTab a:first').tab('show')
// 选取最后一个标签页
$('#myTab a:last').tab('show');
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')

淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面示例所示：

<div>
　　　　<div id="home">...</div>
　　　　<div id="svn">...</div>
　　　　<div id="ios">...</div>
　　　　<div id="java">...</div>
</div>

مثال على الإنترنت

下面的示例演示了使用 data 属性的标签页(Tab)插件及其淡入淡出的效果：

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 示例 - 标签页(Tab)插件</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul　id="myTab"　class="nav　nav-tabs">
	<li class="active">
		<a href="#home" data-toggle="tab">
			　基础教程网
		</a>
	</li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-toggle="dropdown">Java　
			<b class="caret"></b>
		</a>
		<ul　class="dropdown-menu"　role="menu"　aria-labelledby="myTabDrop1">
			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="home">
		<p>موقع دروس الأساسيات هو موقع يقدم أحدث تقنيات الويب، يقدم الموقع تقنيات متعلقة ببناء المواقع مجانًا، يساعد الباحثين عن تقنيات الويب على الدخول بسرعة وبناء مواقعهم الخاصة. طير الطائر الصغير يذهب أولاً - تعلم الأساسيات، حتى تتمكن من الذهاب بعيدًا.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS هو نظام تشغيل الهاتف المحمول الذي طورته وأصدرته شركة Apple. تم إطلاقه لأول مرة في عام 2007 مع إطلاق iPhone، iPod Touch و Apple　
			<p>TV iOS مستوحاة من OS X، وتشاركها الأساس Darwin. نظام التشغيل OS X يستخدم على أجهزة Apple، بينما iOS هو النسخة المحمولة لشركة Apple.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter هو برنامج اختبار مفتوح المصدر. هو تطبيق Java 100% خالٍ، يستخدم لاختبار الحمل والقدرة.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) هي أرشيتكيت تطوير لإنشاء تطبيقات تجارية قوية ومتوسعة بشكل كبير، يتم نشرها على J2EE المدمج في خدمات التطبيق المتوافقة (مثل JBOSS، Web Logic، إلخ).
		</p>
	</div>
</div>
</body>
</html>
اختبار رؤية ‹/›

النتيجة كما يلي:

方法

.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。

<ul id="myTab">
　　　　<li><a href="#identifier" data-toggle="tab">Home</a></li>
　　　　.....
</ul>
<div>
　　　　<div id="home">...</div>
　　　　.....
</div>
<script>
　　　　$((function() {
　　　　　　　　$('#myTab a:last').tab('show');
　　　　}
</script>

مثال على الإنترنت

下面的示例演示了标签页(Tab)插件方法 .tab 的用法。在本示例中，第二个标签页 iOS 是激活的：

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 示例 - 标签页(Tab)插件方法</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul　id="myTab"　class="nav　nav-tabs">
	<li class="active">
		<a href="#home" data-toggle="tab">基础教程网</a>
	</li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-toggle="dropdown">Java <b class="caret"></b>
		</a>
		<ul　class="dropdown-menu"　role="menu"　aria-labelledby="myTabDrop1">
			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
				jmeter</a>
			</li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">
				ejb</a>
			</li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="home">
		<p>موقع دروس الأساسيات هو موقع يقدم أحدث تقنيات الويب، يقدم الموقع تقنيات متعلقة ببناء المواقع مجانًا، يساعد الباحثين عن تقنيات الويب على الدخول بسرعة وبناء مواقعهم الخاصة. طير الطائر الصغير يذهب أولاً - تعلم الأساسيات، حتى تتمكن من الذهاب بعيدًا.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS هو نظام تشغيل الهاتف المحمول الذي طورته وأصدرته شركة Apple. تم إطلاقه لأول مرة في عام 2007 مع إطلاق iPhone، iPod Touch و Apple　
			<p>TV iOS مستوحاة من OS X، وتشاركها الأساس Darwin. نظام التشغيل OS X يستخدم على أجهزة Apple، بينما iOS هو النسخة المحمولة لشركة Apple.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter هو برنامج اختبار مفتوح المصدر. هو تطبيق Java 100% خالٍ، يستخدم لاختبار الحمل والقدرة.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) هي أرشيتكيت تطوير لإنشاء تطبيقات تجارية قوية ومتوسعة بشكل كبير، يتم نشرها على J2EE المدمج في خدمات التطبيق المتوافقة (مثل JBOSS، Web Logic، إلخ).
		</p>
	</div>
</div>
<script>
	$((function() {
		$('#myTab li:eq(1) a').tab('show');
	});
</script>
</body>
</html>
اختبار رؤية ‹/›

النتيجة كما يلي:

事件

下表列出了标签页(Tab)插件中要用到的事件。这些事件可在函数中当钩子使用。

事件描述مثال
show.bs.tab该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来确定激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
　　e.target
　　e.relatedTarget　//　العلامة الفاصلة السابقة
}
shown.bs.tab该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来确定激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
　　e.target
　　e.relatedTarget　//　العلامة الفاصلة السابقة
}

مثال على الإنترنت

في هذا المثال، يتم عرض استخدام أحداث أ插件 علامة التبويب (Tab) في أدوات التبويب. في هذا المثال، سيتم عرض علامة التبويب الحالية وعلامة التبويب التي تم زيارتها مسبقًا:

مثال على الإنترنت

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>مثال Bootstrap - أ插件 علامة التبويب (Tab) أحداث</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<hr>
	<p　class="active-tab"><strong>العلامة الفاصلة النشطة</strong>：<span></span></p>
	<p　class="previous-tab"><strong>العلامة الفاصلة السابقة</strong>：<span></span></p>
<hr>
<ul　id="myTab"　class="nav　nav-tabs">
	<li　class="active"><a　href="#home"　data-toggle="tab">
		基础教程网</a></li>
	<li><a　href="#ios"　data-toggle="tab">iOS</a></li>
	<li　class="dropdown">
		<a　href="#"　id="myTabDrop1"　class="dropdown-toggle"　
		　　　data-toggle="dropdown">
			Java　<b　class="caret"></b></a>
		<ul　class="dropdown-menu"　role="menu"　aria-labelledby="myTabDrop1">
			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="home">
		<p>موقع دروس الأساسيات هو موقع يقدم أحدث تقنيات الويب، يقدم الموقع تقنيات متعلقة ببناء المواقع مجانًا، يساعد الباحثين عن تقنيات الويب على الدخول بسرعة وبناء مواقعهم الخاصة. طير الطائر الصغير يذهب أولاً - تعلم الأساسيات، حتى تتمكن من الذهاب بعيدًا.</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS هو نظام تشغيل الهاتف المحمول الذي طورته وأصدرته شركة Apple. تم إطلاقه لأول مرة في عام 2007 مع إطلاق iPhone، iPod Touch و Apple　
			<p>TV iOS مستوحاة من OS X، وتشاركها الأساس Darwin. نظام التشغيل OS X يستخدم على أجهزة Apple، بينما iOS هو النسخة المحمولة لشركة Apple.</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter هو برنامج اختبار مفتوح المصدر. هو تطبيق Java 100% خالٍ، يستخدم لاختبار الحمل والقدرة.</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans (EJB) هي أرشيتكيت تطوير لإنشاء تطبيقات تجارية قوية ومتوسعة بشكل كبير، يتم نشرها على J2EE المدمج في خدمات التطبيق المتوافقة (مثل JBOSS، Web Logic، إلخ).
		</p>
	</div>
</div>
<script>
$(function() {
	$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
		// الحصول على اسم الوسيلة الفعالة الحالية
		var activeTab = $(e.target).text();　
		// الحصول على اسم الوسيلة الفعالة السابقة
		var previousTab = $(e.relatedTarget).text();　
		$(".active-tab span").html(activeTab);
		$(".previous-tab span").html(previousTab);
	});
});
</script>
</body>
</html>
اختبار رؤية ‹/›

النتيجة كما يلي:

إضافة أدوات النصوص Bootstrapإضافة ملاحظة التمرير Bootstrap