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

دليل تعليمات Bootstrap الأساسية

مكتبات Bootstrap

مكتبة Bootstrap Carousel

مكتبة Bootstrap Carousel هي طريقة مرونة لإنشاء شرائح مرونة لضيف مواقعك. بالإضافة إلى ذلك، فإن المحتوى هو أيضًا مرون، يمكن أن يكون صورًا، إطارات تعميمية، فيديوهات أو أي نوع من المحتوى تريده.

إذا كنت ترغب في الاستفادة من ميزات هذا المدمج بشكل مستقل، فإنك بحاجة إلى تضمين carousel.js، أو كما مراجعة مكتبات Bootstrap كما ذكر في الفصل bootstrap.js أو النسخة المضغوطة bootstrap.min.js。

在线示例

إليك شريحة بسيطة باستخدام مكتبة Bootstrap Carousel المدمجة لعرض عنصر يلعب دورة دائرية. لإنشاء العرض، لا تحتاج إلى استخدام خصائص data، بل يمكنك فقط استخدام تطوير قائم على الصفوف.

在线示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - عرض بسيط (Carousel) المدمج</title>
	<link　rel="stylesheet"　href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
	<!--　مؤشرات(Carousel)ـالنوع　-->
	<ol class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0"　class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>　　　
	<!--　عنوان(Carousel)ـالمشاريع　-->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="الشريحة الأولى">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="الشريحة الثانية">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="الشريحة الثالثة">
		</div>
	</div>
	<!--　عنوان(Carousel)ـتوجيه　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">السابق</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">التالي</span>
	</a>
</div>　
</body>
</html>
اختبار لمعرفة ‹/›

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

العنوان الاختياري

يمكنك من خلال .item داخل .carousel-caption يضيف العنصر عنوانًا للشريحة. يمكنك فقط وضع أي HTML اختياري هنا، وسيعمل على تنسيقه تلقائيًا. يوضح هذا المثال ذلك:

在线示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>مثال Bootstrap - عنوان عرض (Carousel) المدمج</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>
<div id="myCarousel" class="carousel slide">
	<!--　مؤشرات(Carousel)ـالنوع　-->
	<ol class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0"　class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>　　　
	<!--　عنوان(Carousel)ـالمشاريع　-->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="الشريحة الأولى">
			<div　class="carousel-caption">العنوان 1</div>
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="الشريحة الثانية">
			<div　class="carousel-caption">العنوان 2</div>
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="الشريحة الثالثة">
			标题　3
</div> </div> <!--　عنوان(Carousel)ـتوجيه　--> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 　　　　<span class="sr-only">السابق</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 　　　　<span class="sr-only">التالي</span> </a> </div>　 </body> </html>اختبار لمعرفة ‹/›

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


<div class="carousel-caption">عنوان 3</div>

الخيارات

بعض الخيارات يتم نقلها عبر خاصية البيانات أو JavaScript. يُظهر الجدول أدناه هذه الخيارات:

اسم الخيارنوع/القيمة الافتراضيةاسم خاصية البيانات描述
intervalnumber
القيمة الافتراضية: 5000		data-intervalالوقت بين كل مشروع تلقائيًا. إذا كان equals false، لن يتم تدوير العرض التلقائي تلقائيًا.
pausestring
القيمة الافتراضية: "hover"		data-pauseتوقف عن تدوير العرض التلقائي عند دخول الفأرة، وإعادة بدء عند مغادرة الفأرة.
wrapboolean
القيمة الافتراضية: true		data-wrapهل العرض التلقائي متكرر.

الأساليب

هناك بعض الأساليب المفيدة في مكتبة العرض التلقائي (Carousel):

الأساليب描述示例
.carousel(options)إعداد العرض التلقائي كعنصر خيار options، وإعادة بدء المشاريع.
$('#identifier').carousel({
　　　　interval: 2000
)
.carousel('cycle')تدوير العرض التلقائي للمشاريع من اليسار إلى اليمين.
$('#identifier').carousel('cycle')
.carousel('pause')توقف عن تدوير العرض التلقائي للمشاريع.
$('#identifier').carousel('pause')
.carousel(number)تدوير العرض التلقائي إلى إطار معين (تبدأ من 0 وتشبه المجموعات).
$('#identifier').carousel(number)
.carousel('prev')循环轮播到上一个项目。
$('#identifier').carousel('prev')
.carousel('next')循环轮播到下一个项目。
$('#identifier').carousel('next')

在线示例

下面的示例演示了方法的用法：

在线示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　轮播(Carousel)插件方法</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>
<div id="myCarousel" class="carousel slide">
	<!--　مؤشرات(Carousel)ـالنوع　-->
	<ol class="carousel-indicators">
		<li　data-target="#myCarousel"　data-slide-to="0"　class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>　　　
	<!--　عنوان(Carousel)ـالمشاريع　-->
	<div class="carousel-inner">
		<div class="item active">
		<img src="/run/images/slide1.png" alt="الشريحة الأولى">
		</div>
		<div class="item">
		<img src="/run/images/slide2.png" alt="الشريحة الثانية">
		</div>
		<div class="item">
		<img src="/run/images/slide3.png" alt="الشريحة الثالثة">
		</div>
	</div>
	<!--　عنوان(Carousel)ـتوجيه　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">السابق</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">التالي</span>
	</a>
</div>
<!--　控制按钮　-->
<div　style="text-align:center;">
	<input　type="button"　class="btn　start-slide"　value="Start">
	<input　type="button"　class="btn　pause-slide"　value="Pause">
	<input　type="button"　class="btn　prev-slide"　value="Previous　Slide">
	<input　type="button"　class="btn　next-slide"　value="Next　Slide">
	<input　type="button"　class="btn　slide-one"　value="Slide　1">
	<input　type="button"　class="btn　slide-two"　value="Slide　2">
	<input　type="button"　class="btn　slide-three"　value="Slide　3">
</div>
<script>
	$(function() {
		//　初始化轮播
		$(".start-slide").click(function(){
			$("#myCarousel").carousel('cycle');
		});
		//　停止轮播
		$(".pause-slide").click(function(){
			$("#myCarousel").carousel('pause');
		});
		//　循环轮播到上一个项目
		$(".prev-slide").click(function(){
			$("#myCarousel").carousel('prev');
		});
		// 循环轮播到下一个项目
		$(".next-slide").click(function(){
			$("#myCarousel").carousel('next');
		});
		// 循环轮播到某个特定的帧　
		$(".slide-one").click(function(){
			$("#myCarousel").carousel(0);
		});
		$(".slide-two").click(function(){
			$("#myCarousel").carousel(1);
		});
		$(".slide-three").click(function(){
			$("#myCarousel").carousel(2);
		});
	});
</script>
</body>
</html>
اختبار لمعرفة ‹/›

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


事件

下表列出了轮播(Carousel)插件中要用到的事件。这些事件可在函数中当钩子使用。

事件描述示例
slide.bs.carousel当调用 slide 示例方法时立即触发该事件。
$('#identifier').on('slide.bs.carousel', function () {
　　　　// 执行一些动作...
)
slid.bs.carousel当轮播完成幻灯片过渡效果时触发该事件。
$('#identifier').on('slid.bs.carousel', function () {
　　　　// 执行一些动作...
)

在线示例

下面的示例演示了事件的用法：

在线示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 示例 - 轮播(Carousel)插件事件</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>
<div id="myCarousel" class="carousel slide">
	<!--　مؤشرات(Carousel)ـالنوع　-->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0"　
			class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>　　　
	<!--　عنوان(Carousel)ـالمشاريع　-->
	<div class="carousel-inner">
		<div class="item active">
			<img src="/run/images/slide1.png" alt="الشريحة الأولى">
		</div>
		<div class="item">
			<img src="/run/images/slide2.png" alt="الشريحة الثانية">
		</div>
		<div class="item">
			<img src="/run/images/slide3.png" alt="الشريحة الثالثة">
		</div>
	</div>
	<!--　عنوان(Carousel)ـتوجيه　-->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
	　　　　<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	　　　　<span class="sr-only">السابق</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
	　　　　<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	　　　　<span class="sr-only">التالي</span>
	</a>
</div>　
<script>
	$(function() {
		$('#myCarousel').on('slide.bs.carousel', function () {
			alert("يتم تنشيط هذا الحدث عند استدعاء مثال method slide.");
		});
	});
</script>
</body>
</html>
اختبار لمعرفة ‹/›

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

معايير الترميز HTML Bootstrapملحق انحناء Bootstrap