اجعل Bootstrap في متناول اليد


الدرس: الإضافات jQuery


الصفحة السابقة
JQuery هو إطار جافا سكريبت الذي أصبح لا غنى عنه على مر السنين. اختار منشئو Bootstrap ذلك لتقديم ملحقات جمالية وسهلة التنفيذ ، في معظم الحالات دون حتى وضع أصابعك في كود Javascript ! ومع ذلك ، إذا كنت ترغب في الحصول على أفضل هذه المكونات الإضافية ، فستحتاج إلى التعامل مع jQuery قليلاً.
لقد تعاملت مع الإضافات الأكثر أهمية من خلال ترك Affix وهو سهل الاستخدام والاستخدام المحدود. ستكون صفحة مثال بمثابة جامع حالة عملي وسلسلة رسائل مشتركة.

نظرة عامة


مكتبة JQUERY
ما هو جافا سكريبت؟
  • إنها لغة برمجة تجعل صفحات الويب تفاعلية.
  • إنها لغة من جانب العميل ولا تتطلب أي موارد على مستوى الخادم.
  • إنها لغة تفسر مباشرة من قبل المتصفح.
ما هو jQuery؟
jQuery هي مكتبة Javascript ، ونقول أيضًا إطار عمل ، أي مجموعة من الميزات الوظيفية لتبسيط تنفيذ Javascript . يمكننا بسهولة:
  • تعديل عناصر صفحة الويب: النص والأسلوب والرسوم المتحركة ...
  • إدارة الأحداث مثل: النقر بالماوس ، الإجراء على مفتاح لوحة المفاتيح ...
  • إنشاء تأثيرات رسومية ...
  • استخدم Ajax ...
تثبيت JQUERY
لتثبيت jQuery ، يجب عليك إجراء استدعاء للمكتبة. لذلك لديك حلان:
  1.  ستجد أحدث إصدار على http://jquery.com/download/  وانسخ هذا الملف إلى دليل على موقعك.
  2.  يمكنك الرجوع إلى CDN : jQuery ، cdnjs ، Google CDN  ،  Microsoft CDN  ...
إذا اخترت تنزيل المكتبة ، فستجد 3 أسطر من الإصدارات: 1 و 2 و 3. الأول و الثاني لهما نفس الميزات ، والفرق الوحيد هو أن الثاني لا يدعم Internet Explorer في إصداراته 6 إلى 8. يمكنك اختيار الإصدار ، حيث يتم تكييف الإصدارين بشكل مثالي مع Bootstrap 3 . أما بالنسبة للإصدار 3 ، فأنا أحثك على قراءة التفسيرات مباشرة على الموقع.
هناك أيضًا احتمالان للتنزيل:
  • غير مضغوط: إنه إصدار يمكن قراءته وتعليقه لفهم الكود. يمكنك استخدامه أثناء تطوير مواقعك إذا كنت بحاجة إلى معرفة ما يحدث في المكتبة.
  • مصغر: إنها نسخة مضغوطة لتكون "خفيفة" قدر الإمكان. هذا هو الإصدار الذي يجب عليك وضعه على موقعك في "الإنتاج"
عند النقر فوق الارتباط ، يمكنك تنزيل الملف. أعطه اسم jquery.js النسخة الكاملة وjquery.min.js المضغوطة.
مكان JQUERY
من الجيد تنظيم ملفات الموقع في الدلائل المواضيعية (انظر الشكل التالي).
jQuery web
تنظيم ملفات الموقع
إذا كنت تنظم بنية موقعك ، فقم بوضع ملفات jQuery في دليل js.
مرجع JQUERY
إذا كنت قد وضعت المكتبة على موقعك ، فما عليك سوى الرجوع إلى الملف في كود HTML ، ويفضل أن يكون ذلك في النهاية لتجنب تعريض تحميل العناصر المرئية للخطر:

<script src="js/jquery.js"></script>
إذا مررت بشبكة CDN ، فهذا هو نفس الشيء ، باستثناء العنوان الذي يتغير. مثلا :

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
استخدم JQUERY
الوظيفة الرئيسية التي يجب معرفتها هي jQuery()، لكننا نستخدم الرمز $ لجعله أقصر. نريد استخدام jQuery فقط عندما يتم تحميل DOM للصفحة بالكامل لتجنب أخطاء وقت التشغيل ، لذلك نقوم بتغليف كل الكود في كتلة:

$(function(){
	// ...
});
إذا كنت تعرف محددات CSS ، فأنت تعلم بالفعل كيفية استخدام جزء كبير من jQuery . في الواقع ، هذه المكتبة تستخدمها مباشرة! مثلا :

var a = $("div");
هنا يشير المتغير"a" إلى كائن jQuery الذي يحدد كافة علامات div في المستند. يقترح JQuery أيضًا أساليب ، على سبيل المثال لإضافة فئة إلى عنصر:

$("img").addClass( "ma_classe" );
يضيف هذا الإجراء الفئة ma_classe إلى جميع العلامات img في المستند. من الممكن سلسلة الطرق. مثلا :

$('#el').css('background-color', 'red').fadeIn('slow');
هنا نقوم بتغيير خاصية background-color للعنصر باستخدام المعرف #el، مع القيمة red، ونجعلها تظهر تدريجياً.
تكمن قوة كبيرة في jQuery في إدارتها السهلة للأحداث ، على سبيل المثال:

$( "#action" ).click(function() {
	… mon code … 
});
هنا ، #action ستؤدي النقر فوق عنصر المعرف إلى تنفيذ التعليمات البرمجية.
مكتبات جافا سكريبت لـ BOOTSTRAP
SEO
يقدم Bootstrap عددًا من المكونات الإضافية لتحسين صفحات الويب ، وكلها تعتمد على jQuery (انظر الشكل أدناه) . هناك طريقتان لاستخدام هذه المكونات الإضافية:
  • إما أنك تشير فقط إلى ما هو مفيد لك عن طريق أخذ المكتبة المقابلة في حزمة Bootstrap ( والتي يمكنك استرجاعها بالنقر فوق "Download source" في صفحة "Getting started" كما في الشكل التالي) .
    jQuery web
    مكتبات جافا سكريبت لـ Bootstrap
  • إما أن تشير إلى المكتبة الكاملة ( التي تستردها بالنقر على " " Download Bootstrapفي نفس الصفحة) . في الفرضية الأولى ، يجب علينا الانتباه إلى التبعيات. ليست كثيرة ولكن عليك أن تعرفهم:
  • يجب استخدام popover مع tooltip
  • يجب أن تستخدم collapse مع transition
للإشارة إلى المكونات الإضافية على افتراض الاستخدام الفردي ، على سبيل المثال tab :

<script src="js/jquery.js"></script> 
<script src="js/tab.js "></script>
أعلن أولا jQuery ، ثم البرنامج المساعد. في فرضية المكتبة العالمية:

<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js "></script>
يمكنك استخدام الإصدار الذي تم التعليق عليه أثناء مرحلة التطوير:

<script src="js/jquery.js"></script> 
<script src="js/bootstrap.js "></script>
تطبيق
هناك طريقتان لاستخدام المكون الإضافي Bootstrap :
  • من السمات data
  • من كائنات jQuery
فلنأخذ مثالًا على تأثير الأكورديون الذي سنراه بالتفصيل لاحقًا:

<a href="#item" data-toggle="collapse">Changer</a> 
<div id="item" class="collapse">
	Contenu
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
لا تقلق بشأن بناء الجملة الذي سنراه لاحقًا. تم تصميم هذا البرنامج المساعد لإظهار المحتوى أو اختفائه أثناء إجراء المستخدم ، انقر هنا ببساطة. المحتوى ذو الصلة في هذا المثال هو الكلمة Contenu . يتم تشغيل البرنامج المساعد بواسطة السمة data-toggle="collapse" . في حالة الاستخدام هذه ، ليس عليك التعامل مع Javascript .
يمكننا الحصول على نفس النتيجة بالضبط باستخدام jQuery :

<a>Changer</a> 
<div id="item" class="collapse">
	Contenu
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
	$(function() {
	$('a').click(function() {
		$('#item').collapse('toggle');
	});
	});
</script>
هذه المرة ، لم أستخدم السمة ولكن كائن jQuery مع المحدد 'a' للإشارة إلى الرابط والأسلوب collapse مع المُدخل toggle . سوف نرى عدة حالات لاستخدام هذه الطريقة في العمل والتي هي أكثر شدة من سابقتها ، ولكن تبين أنه لا مفر منها وفقًا للإجراءات التي نريد تنفيذها.
الأحداث
معظم الإضافات تكشف الأحداث. متابعة للمثال السابق ، يمكننا عرض رسالة عندما يكون المحتوى مرئيًا:

<a>Changer</a> 
<div id="item" class="collapse">
	Contenu
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
	$(function() {
	$('a').click(function() {
		$('#item').collapse('toggle');
	});
	$('#item').on('shown.bs.collapse', function () {
		alert('On me voit !');
	})
	});
</script>
سنرى أيضًا عدة أمثلة للأحداث في الإضافات Bootstrap .
صفحة المثال
لتجنب التحميل الزائد للفصول على الإضافات ، إليك مثال على الصفحة مكتملة مع حالات استخدام الإضافات المعنية:

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
	body { 
	background-color:#DDD;
	padding-top: 10px;
	}
	[class*="col-"] { margin-bottom: 20px; }
	img { width: 100%; }
	.well {
	background-color:#CCC;
	padding: 20px;
	}
	a:active, a:focus { outline:none; }
	.inline-form input {
	display: inline-block;
	width: 100px;
	}
</style>
</head>

<body>
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">   
<div class="navbar-header">   
<button type="button" class="navbar-toggle" 
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Les Tigres</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <a href="#">Accueil</a> </li>
<li class="dropdown"> 
<a data-toggle="dropdown" href="#">Témoignages 
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dompteurs</a></li>
<li><a href="#">Zoos</a></li>
<li><a href="#">Chasseurs</a></li>
<li class="divider"></li>
<li><a href="#">Autres témoignages</a></li>
</ul>
</li> 
<li> <a href="#">Liens</a> </li>
<li> <a href="#">Références</a> </li>
</ul>
<form class="navbar-form navbar-right inline-form" role="form">
<div class="form-group">
<input type="search" class="input-sm form-control" 
placeholder="Recherche">
<button type="submit" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-eye-open"></span> 
Chercher</button>
</div>
</form>
</div>
</nav>
<header class="row">
<div class="col-lg-12">
<h1>Mon amour pour les tigres</h1>
</div>
</header>
<section class="row">
<div class="col-lg-12">
<p>
Je suis passionné par les <strong>tigres</strong> depuis très 
longtemps. Ce site a été construit en <em>   hommage à ces 
merveilleux félins...</em><br>
Je fais partie de la <abbr title="Société des Amoureux des 
Tigres">SAT</abbr> qui a pour but de faire connaître ces 
splendides animaux. 
</p>
<p>Voici ce qu'en dit le wikipedia :</p>
<blockquote>
Le Tigre (Panthera tigris) est un <a data-toggle="tooltip" href="#" 
title="Classe de vertébrés">mammifère</a> carnivore de la famille 
des félidés (Felidae) du genre Panthera. Aisément reconnaissable 
à sa fourrure rousse rayée de noir, il est le plus grand félin 
sauvage et l'un des plus grands <a data-toggle="tooltip" 
href="#" title='Synonyme de "carnassier"'>carnivores </a>du monde. L'espèce 
est divisée en neuf sous-espèces possédant des différences mineures en 
termes de taille ou de comportement. Superprédateur, il chasse principalement 
les cerfs et les sangliers, bien qu'il puisse s'attaquer à des proies de 
taille plus importante comme les buffles. Jusqu'au XIXe siècle, le Tigre 
était réputé mangeur d'homme. La structure sociale des tigres en fait un 
animal solitaire ; le mâle possède un territoire qui englobe les domaines 
de plusieurs femelles et ne participe pas à l'éducation des petits.<br>
<small class="pull-right">Wikipedia</small><br>
</blockquote>
</div>      
</section>
<section class="row">
<div class="media col-lg-12">
<div class="pull-right">
<iframe width="420" height="320" 
src="http://www.youtube.com/embed/VmnIeLmjuHA" 
frameborder="0" allowfullscreen></iframe>
</div>
<div class="media-body">
<div class="btn-group pull-right" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio">Vidéo 1
</label>
<label class="btn btn-primary">
<input type="radio">Vidéo 2
</label>
<label class="btn btn-primary">
<input type="radio">Vidéo 3
</label>
</div>
</div>
</div>
</section>
<section class="row">
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t1.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t2.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t3.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t4.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t5.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t6.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t7.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t8.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t9.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t10.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t11.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
<div class="col-xs-4 col-sm-3 col-md-2 ">
<a href="#" class="thumbnail">
<img src="images/t12.jpg" alt="Tigre" class="img-rounded">
</a>
</div>
</section>
<div class="row">
<section class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Les sous-espèces des tigres :</h3>
</div>
<div class="list-group">
<a href="#infos" class="list-group-item" data-toggle="modal">
Tigre de Sibérie
<span class="badge">120</span>
</a>
<div class="modal fade" id="infos" role="dialog" 
aria-labelledby="modalTitre" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" 
aria-hidden="true">x</button>
<h4 id="modalTitre" class="modal-title">Plus d'informations 
sur le tigre de Sibérie</h4>
</div>
<div class="modal-body">
<blockquote>
Les tigres de Sibérie pèsent de 180 à 350 kg pour les mâles 
et de 100 à 200 kg pour les femelles. Le plus gros tigre de 
Sibérie, tué en 1950, atteignait les 384 kg. Le Tigre de 
Sibérie est le troisième plus gros prédateur terrestre 
derrière l'ours kodiak et l'ours polaire. La longueur totale 
du corps avec la queue est comprise entre 2,7 et 3,8 m pour 
les mâles et entre 2,4 et 2,75 m pour les femelles. La 
longueur du crâne est de 341 à 383 mm pour les mâles et 
279 à 318 mm pour les femelles.<hr>
<small class="pull-right">Wikipedia</small>
</blockquote>
</div>
</div>
</div>
</div>
<a href="#" class="list-group-item">
Tigre de Chine méridionale
<span class="badge">540</span>
</a>
<a href="#" class="list-group-item">
Tigre de Bali
<span class="badge">230</span>
</a>
<a href="#" class="list-group-item">
Tigre de d'Indochine
<span class="badge">240</span>
</a>
<a href="#" class="list-group-item">
Tigre de Malaisie
<span class="badge">1200</span>
</a>
<a href="#" class="list-group-item">
Tigre de Java
<span class="badge">710</span>
</a>
<a href="#" class="list-group-item">
Tigre de Sumatra
<span class="badge">20</span>
</a>
<a href="#" class="list-group-item">
Tigre du Bengale
<span class="badge">40</span>
</a>
<a href="#" class="list-group-item">
Tigre de la Caspienne
<span class="badge">200</span>
</a>
</div>
</div>
</section>
<section class="col-sm-8">
<div id="carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
<li data-target="#carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active"> <img alt="Tigre" src="images/photo-tigre.jpg">
</div>
<div class="item"> <img alt="Tigre" src="images/photo-tigre1.jpg">
</div>
<div class="item"> <img alt="Tigre" src="images/photo-tigre2.jpg">
</div>
<div class="item"> <img alt="Tigre" src="images/photo-tigre3.jpg">
</div>
</div>
</div>
</section>
</div>
<div class="row">
<section class="col-sm-12">
<div class="panel panel-primary">
<table class="table table-striped table-condensed">
<div class="panel-heading"> 
<h3 class="panel-title">Les menaces pour les tigres</h3>
</div>
<thead>
<tr>
<th>Lieu</th>
<th>Menace</th>
</tr>
</thead>
<tbody>
<tr>
<td>Grand Mekong</td>
<td>Demande croissante de certaines parties de l’animal pour 
la médecine chinoise traditionnelle et fragmentation 
des habitats du fait du développement non durable 
d’infrastructures</td>
</tr>
<tr>
<td>Île de Sumatra</td>
<td>Production d’huile de palme et de pâtes à papiers</td>
</tr>
<tr>
<td>Indonésie et Malaisie</td>
<td>Pâte à papier, l’huile de palme et le caoutchouc</td>
</tr>
<tr>
<td>États-Unis</td>
<td>Les tigres captifs représentent un danger pour les 
tigres sauvages</td>
</tr>
<tr>
<td>Europe</td>
<td>Gros appétit pour l’huile de palme</td>
</tr>
<tr>
<td>Népal</td>
<td>Commerce illégal de produits dérivés de tigres</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<div class="row">
<section class="col-sm-8">
<ul class="nav nav-pills">
<li class="active"><a href="#contact" data-toggle="tab">Contact</a></li>
<li><a href="#informations" data-toggle="tab">Informations pratiques
</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade in" id="contact">
<form class="well" role="form">
<h4><span class="label label-default">Si vous voulez me laisser 
un message</span></h4>
<h4>Comment m'avez-vous trouvé ?</h4>
<fieldset>
<div class="radio">
<label for="ami" class="radio">
<input type="radio" name="origine" value="ami" id="ami">
Par un ami 
</label>
</div>
<div class="radio">
<label for="web" class="radio">
<input type="radio" name="origine" value="web" id="web">
Sur le web 
</label>
</div>
<div class="radio">
<label for="hasard" class="radio">
<input type="radio" name="origine" value="hasard" id="hasard">
Par hasard 
</label>
</div>
<div class="radio">
<label for="autre" class="radio">
<input type="radio" name="origine" value="autre" id="autre">
Autre... 
</label>
</div>
<label for="textarea">Votre message :</label>
<textarea id="textarea" class="form-control" rows="4">

</textarea>
<p class="help-block">Vous pouvez agrandir la fenêtre</p>
<button class="btn btn-primary" type="submit"><span 
class="glyphicon glyphicon-ok-sign"></span> Envoyer</button>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="informations">
<div class="well">
<h2>Informations pratiques</h2>
<p>Si vous êtes intéressés par la protection des tigres et si 
vous désirez prendre part aux actions menées... blablabla...</p>
</div>
</div>
</div>
</section>
<section class="col-sm-4">
<address class="thumbnail">
<p>Vous pouvez me contacter à cette adresse :</p>
<strong>Tigrou Alfred</strong><br>
Allée des fauves<br>
28645 Félins-sur-Loire<br>
</address>
</section>
</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
$(function (){ 
$('.carousel').carousel();
$('blockquote a').tooltip(); 
$('.btn-group .btn:nth-child(1)').click(function () {
$('iframe').attr('src', 'http://www.youtube.com/embed/VmnIeLmjuHA');
})
$('.btn-group .btn:nth-child(2)').click(function () {
$('iframe').attr('src', 'http://www.youtube.com/embed/fRAG4T-iqqY');
})
$('.btn-group .btn:nth-child(3)').click(function () {
$('iframe').attr('src', 'http://www.youtube.com/embed/yua4jzecCIE');
})
});
</script>
</body>
</html>
جرب الكود
سأشرح بالتفصيل في كل فصل تنفيذ الإضافات المختلفة المستخدمة في هذه الصفحة.

قائمة منسدلة


القائمة المنسدلة في شريط التنقل
يتيح لك البرنامج المساعد jQuery Dropdown إعداد قوائم منسدلة لطيفة. فقط قم بتعديل شريط التنقل لإضافة قائمة منسدلة:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
	<li> <a href="#">Accueil</a> </li>
	<li> <a href="#">Liens</a> </li>
	<li class="dropdown"> 
	<a data-toggle="dropdown" href="#">Témoignages<b class="caret">
		</b></a>
	<ul class="dropdown-menu">
		<li><a href="#">Dompteurs</a></li>
		<li><a href="#">Zoos</a></li>
		<li><a href="#">Chasseurs</a></li>
		<li class="divider"></li>
		<li><a href="#">Autres témoignages</a></li>
	</ul>
	</li>
	<li> <a href="#">Références</a> </li>
</ul>
</nav>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
jQuery web
القائمة المنسدلة في شريط التنقل
كان من الضروري إضافة بعض الفصول ولكن النتيجة ناجحة للغاية!
دعونا نلقي نظرة فاحصة: لإضافة ميزة القائمة المنسدلة ، يجب عليك استخدام الفئة dropdown وإضافتها data- toggle="dropdown"إلى العلامة ذات الصلة حتى تعمل القائمة. لقد فعلت ذلك من أجل علامة التي تحتوي على التسمية لارتباط القائمة. يجب أيضًا استخدام الفئة dropdown-menuالموجودة في العلامة
    التي يجب أن تتضمن القائمة المنسدلة.
هذا ما تم في صفحة المثال صفحة المثال .
القائمة المنسدلة في زر
يمكنك إنشاء قائمة منسدلة يتم تنشيطها بواسطة زر. إليك الكود الأساسي:

<div class="btn-group"> 
	<button class="btn btn-default dropdown-toggle" 
	data-toggle="dropdown"> Action</button>
	<ul class="dropdown-menu">
	<li><a href="#">Dompteurs</a></li>
	<li><a href="#">Zoos</a></li>
	<li><a href="#">Chasseurs</a></li>
	<li class="divider"></li>
	<li><a href="#">Autres témoignages</a></li>
	</ul>
</div>
لاحظت استخدام الفئة btn-group اللازمة لتشغيل البرنامج المساعد ، وكذلك التبديل الفئة dropdown. بالنسبة للباقي ، فهو مطابق تقريبًا للكود الذي شاهدناه لشريط التنقل. ستجد النتيجة في الشكل التالي.
jQuery web
القائمة المنسدلة في زر
هذا ليس سيئًا ، لكن هكذا ، لا نفهم حقًا أنه زر خاص ، يمكن أن يكون لدينا علامة رسومية؟
يمكننا ، إضافة فئة:

<button class="btn btn-default dropdown-toggle" 
data-toggle="dropdown">Action <span class="caret"></span>
</button>
أضفت الفئة caret للزر والآن يتم تحديده بشكل جيد ، كما في الشكل التالي.
jQuery web
القائمة المنسدلة في زر مع علامة
نعم هذا جيد ، لكن في بعض الأحيان أحتاج إلى عرض القائمة
يمكننا أيضًا القيام بذلك ، بإضافة الفصل dropup (انظر الشكل التالي) :

<div class="btn-group dropup">
jQuery web
القائمة ترتفع
أزرار ملونة ورموز
يمكننا أيضًا إضافة رموز ولون ، مثل أي زر (انظر الشكل التالي):

<div class="btn-group"> 
   <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
	   Action <span class="caret"></span></button>
   <ul class="dropdown-menu">
   <li><a href="#"><span class="glyphicon glyphicon-user">
	   </span> Dompteurs</a></li>
   <li><a href="#"><span class="glyphicon glyphicon-picture">
	   </span> Zoos</a></li>
   <li><a href="#"><span class="glyphicon glyphicon-screenshot">
	   </span> Chasseurs</a></li>
   <li class="divider"></li>
  <li><a href="#"><span class="glyphicon glyphicon-list-alt">
	  </span> Autres témoignages</a></li>
</ul>
</div>
jQuery web
الرموز في القائمة المنسدلة
وظائف منفصلة
يمكنك جعل الزر له استخدامان: كزر لإجراء ما وكمحرك لقائمة منسدلة. ثم يتم فصلها إلى قسمين: اليسار للعمل ، إلى اليمين من القائمة. لتحقيق ذلك ، نقوم بإنشاء مجموعة من زرين ، أحدهما يتضمن النص والآخر مع العلامة ، كما في الشكل التالي:

<div class="btn-group"> 
	<button class="btn btn-info">Action</button>
	<button class="btn btn-info dropdown-toggle" 
	data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
	<li><a href="#"><span class="glyphicon glyphicon-user">
		</span> Dompteurs</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-picture">
		</span> Zoos</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-screenshot">
		</span> Chasseurs</a></li>
	<li class="divider"></li>
	<li><a href="#"><span class="glyphicon glyphicon-list-alt">
		</span> Autres témoignages</a></li>
	</ul>
</div>
jQuery web
وظيفتين لزر
الرؤوس
لإضافة رؤوس لتقسيم القائمة الفرعية ، استخدم الفصل dropdown-header (انظر الشكل التالي) :

<div class="btn-group"> 
	<button class="btn btn-info">Action</button>
	<button class="btn btn-info dropdown-toggle" 
	data-toggle="dropdown"><span class="caret">
		</span></button>
	<ul class="dropdown-menu">
	<li class="dropdown-header"> Personnel</li>
	<li><a href="#"><span class="glyphicon glyphicon-user">
		</span> Dompteurs</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-screenshot">
		</span> Chasseurs</a></li>
	<li class="divider"></li>
	<li class="dropdown-header"> Lieux</li>
	<li><a href="#"><span class="glyphicon glyphicon-book">
		</span> Bibliothèques</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-cutlery">
		</span> Restaurants</a></li>
	</ul>
</div>
jQuery web
الرؤوس في قائمة منسدلة
المحاذاة الى اليمين
بشكل تلقائي ، يتم محاذاة القائمة إلى الجانب الأيسر من الزر. يمكن استخدام الفصل dropdown-menu-right لمحاذاة الجانب الأيمن (انظر الشكل التالي):

<div class="btn-group"> 
	<button class="btn btn-warning">Action</button>
	<button class="btn btn-warning dropdown-toggle" 
	data-toggle="dropdown"><span class="caret"></span></button>
	<ul class="dropdown-menu dropdown-menu-right">
	<li><a href="#"><span class="glyphicon glyphicon-user">
		</span> Dompteurs</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-picture">
		</span> Zoos</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-screenshot">
		</span> Chasseurs</a></li>
	<li class="divider"></li>
	<li><a href="#"><span class="glyphicon glyphicon-list-alt">
		</span> Autres témoignages</a></li>
	</ul>
</div>
jQuery web
قائمة المنسدلة بمحاذاة الى اليمين
تعطيل خيار
لجعل خيار القائمة غير نشط ، استخدم الفئة disabled :

<div class="btn-group"> 
	<button class="btn btn-danger">Action</button>
	<button class="btn btn-danger dropdown-toggle" 
	data-toggle="dropdown"><span class="caret"></span>
</button>
	<ul class="dropdown-menu">
	<li><a href="#"><span class="glyphicon glyphicon-book">
		</span> Lire</a></li>
	<li class="disabled"><a href="#"><span 
		class="glyphicon glyphicon-print"></span> Imprimer
	</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-pencil">
		</span> Ecrire</a></li>
	</ul>
</div>
jQuery web
الخيار معطل في القائمة المنسدلة
قوائم فرعية

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;
	left:100%;
	margin-top:-6px;
	margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";
float:right;width:0;height:0;
border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;
border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
فيما يلي مثال للتنفيذ (انظر النتيجة في الشكل التالي):

<div class="btn-group"> 
	<button class="btn btn-primary dropdown-toggle" 
	data-toggle="dropdown">Action <span class="caret"></span></button>
	<ul class="dropdown-menu">
	<li><a href="#"><span class="glyphicon glyphicon-user">
		</span> Dompteurs</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-picture">
		</span> Zoos</a></li>
	<li><a href="#"><span class="glyphicon glyphicon-screenshot">
		</span> Chasseurs</a></li>
	<li class="divider"></li>
	<li class="dropdown-submenu">
		<a tabindex="-1" href="#"><span 
			class="glyphicon glyphicon-list-alt"></span> 
			Autres témoignages</a>
		<ul class="dropdown-menu">
		<li><a tabindex="-1" href="#"><span 
			class="glyphicon glyphicon-eye-close"></span> 
			Non classifiés</a></li>
		<li class="dropdown-submenu">
			<a href="#">Autres...</a>
			<ul class="dropdown-menu">
			<li><a href="#">
				<span class=" glyphicon glyphicon-cutlery">
				</span> Restaurateurs</a></li>
			<li><a href="#">
				<span class="glyphicon glyphicon-globe">
				</span> Voyageurs</a></li>
			</ul>
		</li>
		<li><a href="#">
			<span class="glyphicon glyphicon-shopping-cart">
			</span> Commerçants</a></li>
		<li><a href="#">
			<span class="glyphicon glyphicon-wrench">
			</span> Mécaniciens</a></li>
		</ul>
	</li>
	</ul>
</div>
jQuery web
قوائم فرعية
تفعيل بـ JAVASCRIPT
تحريك القائمة
طالما كنت تريد تنفيذ القائمة المنسدلة بنقرة واحدة ، فإن الخاصية data-toggle كافية. ولكن قد تكون هناك حالات معينة. تخيل أنك تريد تشغيل القائمة المنسدلة ليس عن طريق النقر ، ولكن عن طريق تحريك مؤشر الماوس فوق عنصر معين. في هذه الحالة ، يجب عليك استخدام jQuery لتشغيل قائمتك. انظر إلى هذا المثال:

<div class="btn-group"> 
	<h1 data-toggle="dropdown"><span class="label label-default">
		Passez sur moi !</span></h1>
	<ul class="dropdown-menu">
	<li><a href="#">Dompteurs</a></li>
	<li><a href="#">Zoos</a></li>
	<li><a href="#">Chasseurs</a></li>
	</ul>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
	$('h1').mouseover(function() {
	$(this).dropdown('toggle');
	});
</script>
jQuery web
فتح القائمة عند التحليق
كان من الضروري إضافة القليل من Javascript لإدارة الحدث المقابل واستخدام الطريقة الفريدة للمكون dropdown الإضافي. لاحظ أن المكون الإضافي لا يزال بحاجة data-toggle="dropdown" إلى أن تعمل السمة بشكل صحيح.
الأحداث
لديك أيضًا 4 أحداث لهذا المكون:
حدث وصف
show.bs.tab عند استدعاء طريقة العرض
shown.bs.tab عندما تصبح علامة التبويب مرئية
hide.bs.tab عندما تصبح علامة تبويب غير مرئية
hidden.bs.tab عندما تصبح علامة تبويب غير مرئية
فائدة هذه الأحداث لا يمكن انكارها. إذا كنت لا تزال بحاجة إليها ، فبناء الجملة هو هذا:

$('#mon_dropdown').on('shown.bs.dropdown', function () {
	// Je fais un truc quand le menu est devenu visible
})

نافذة مشروط


أول مثال بسيط
أول مثال بسيط
يتطلب إعداد نافذة مشروطة استخدام بعض الفئات. إليكم المثال الأول:

<button data-toggle="modal" href="#infos" class="btn btn-primary">
	Informations</button>
<div class="modal" id="infos">
	<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			x</button>
		<h4 class="modal-title">Plus d'informations</h4>
		</div>
		<div class="modal-body">
		Le Tigre (Panthera tigris) est un mammifère carnivore 
		de la famille des félidés...
		</div>
	</div>
	</div>
</div>
المبدأ بسيط: نقوم بإنشاء
شامل مع الفئة modal ، وهو المسؤول عن تكوين وتحديد موضع النافذة. نخلق
الثانية تشمل الفئة modal-dialog . يمكننا بعد ذلك ترتيب النافذة بفصل مغلق modal-content ورأس من خلال الفصل modal-header وجسم به modal-body . يتم التخطيط أيضًا لإغلاق النافذة باستخدام زر وفئة close ، والممتلكات data- dismiss="modal". يبقى فقط إنشاء زر لفتح النافذة عن طريق مطابقة الزر والنافذة مع معرف ، واستخدام data- toggle="modal" البرنامج المساعد للعمل. في البداية ، لدينا فقط زر الشكل التالي على الشاشة.
jQuery web
زر القيادة
وعندما ننقر ، نحصل على نافذة مشروطة والخلفية تصبح رمادية ، كما في الشكل التالي.
jQuery web
نافذة مشروط على خلفية رمادية
جرب الكود
لدينا رمز صغير لإغلاق النافذة.
أضع حرف X لتمثيلالرمز الختامي ، فمن الممكن أيضًا استخدام & times؛ النقر خارج إطار النافذة المشروط يغلق هذه النافذة، وهو السلوك العادي. إذا كنا نريد السلوك المعاكس ، يجب إضافة الخيار:

data-backdrop="static"
في زر الأمر.
تذييل
يمكن تحسين بعض الجماليات عن طريق إنشاء تذييل مع الفصل modal-footer وزر للخروج ، كما في الشكل التالي.

<button data-toggle="modal" href="#infos" class="btn btn-primary">
	Informations</button>
<div class="modal" id="infos">
	<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			x</button>
		<h4 class="modal-title">Plus d'informations</h4>
		</div>
		<div class="modal-body">
		Le Tigre (Panthera tigris) est un mammifère carnivore de 
		la famille des félidés...
		</div>
		<div class="modal-footer">
		<button class="btn btn-info" data-dismiss="modal">
			Fermer</button>
		</div>
	</div>
	</div>
</div>
jQuery web
تذييل في نافذة مشروط
انتقال
من الممكن أيضًا الحصول على تأثير انتقالي بإضافة الفصل fade، كما في الشكل التالي:

<div class="modal fade" id="infos">
jQuery web
تأثير الانتقال لإطار مشروط
جرب الكود
الحفاظ على الجزء السفلي من الشاشة
إذا كنت تريد الاحتفاظ بالجانب العادي للإطار السفلي ، فيجب عليك إدخال الخيار backdrop الصحيح افتراضيًا (انظر الشكل التالي):

<button data-toggle="modal" data-backdrop="false" 
href="#infos" class="btn btn-primary">Informations</button>
jQuery web
نافذة مشروط مع خلفية محفوظة
جرب الكود
لاحظ أنه في هذه الحالة لدينا نفس السلوك كما هو الحال مع "static" ولا تغلق النافذة عند النقر خارجها.
حقن صفحة HTML
من الممكن حقن صفحة HTML في نص نافذة الوسائط ، لكن من الضروري التفكير في هذه الصفحة لذلك. سترى مثالاً في الشكل التالي:

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<link href="assets/css/bootstrap.css" rel="stylesheet">
	<style type="text/css">
		body { padding-top: 20px; }
	</style>
	</head>
	<body>
	<div class="container">      
		<button data-toggle="modal" href="remote.html" 
		data-target="#infos" class="btn btn-primary">
		informations
		</button>
		<div class="modal fade" id="infos">
		<div class="modal-dialog">  
			<div class="modal-content"></div>  
		</div> 
		</div>
		</div>
	</div>
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	</body>
</html>
يحتوي الزر على عنوان الصفحة المراد تحميلها مع السمة href . نحن فقط نقوم بتوفير الحاوية مع الفئة modal-content . عندما ننقر على الزر ، يقوم jQuery بتحميل الصفحة المستهدفة وإدخالها
التي تحتوي الفئة modal-content .
لقد تغير هذا التطبيق مع Bootstrap الإصدار 3.1 . سابقا كنا سعداء مع div للفئة modal . إليك رمز الصفحة المراد تحميلها:

<div class="modal-header">
	<button type="button" class="close" 
	data-dismiss="modal">×</button>
	<h1>Mon amour pour les tigres</h1>
</div>
<div class="modal-body">
	<p>
	Je suis passionné par les <strong>tigres</strong> depuis 
	très longtemps. Ce site a été construit en <em> 
	hommage à ces merveilleux félins...</em><br>
	Je fais partie de la <abbr title="Société des Amoureux des 
	Tigres">SAT</abbr> qui a pour but de faire
	connaître ces splendides animaux. 
	</p>
	<p>Voici ce qu'en dit le wikipedia :</p>
	<blockquote>
	Le Tigre (Panthera tigris) est un mammifère carnivore de 
	la famille des félidés (Felidae) du genre Panthera.
	Aisément reconnaissable à sa fourrure rousse rayée de noir, 
	il est le plus grand félin sauvage et l'un des plus
	grands carnivores du monde. L'espèce est divisée en neuf 
	sous-espèces possédant des différences mineures en termes
	de taille ou de comportement. Superprédateur, il chasse 
	principalement les cerfs et les sangliers, bien qu'il
	puisse s'attaquer à des proies de taille plus importante 
	comme les buffles. Jusqu'au XIXe siècle, le Tigre était
	réputé mangeur d'homme. La structure sociale des tigres 
	en fait un animal solitaire ; le mâle possède un territoire
	qui englobe les domaines de plusieurs femelles et ne 
	participe pas à l'éducation des petits.<br>
	<small class="pull-right">Wikipedia</small><br>
	</blockquote>
</div>
يجب توفير الفئات حتى تظهر نافذة الوسائط بشكل جيد. هذه هي النتيجة:
jQuery web
صفحة HTML في نافذة مشروطة
جرب الكود
مثالي أثناء معالجته ليس ذا أهمية كبيرة ، لذا قدم الكود مباشرة في الصفحة الأساسية. من ناحية أخرى ، يمكن أن تصبح مثيرة للاهتمام في حالة توفر العديد من المحتويات. سترى مثالاً في الشكل التالي:

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<link href="assets/css/bootstrap.css" rel="stylesheet">
	<style type="text/css">
		body { padding-top: 20px; }
	</style>
	</head>
	<body>
	<div class="container">  
		<div class="btn-group">
		<button id="page1" type="button" class="btn btn-primary">
			Page 1</button>
		<button id="page2" type="button" class="btn btn-primary">
			Page 2</button>
		<button id="page3" type="button" class="btn btn-primary">
			Page 3</button>
		</div>
		<div class="modal fade" id="infos">
		<div class="modal-dialog">  
			<div class="modal-content"></div>  
		</div> 
		</div>
	</div>
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script>
		$("body").on("hidden.bs.modal", ".modal", function () {
			$(this).removeData("bs.modal");
		});
		$("#page1").click(function() { 
		$("#infos").modal({ remote: "remote1.html" } ,"show");
		});
		$("#page2").click(function() { 
		$("#infos").modal({ remote: "remote2.html" }, "show");
		});
		$("#page3").click(function() { 
		$("#infos").modal({ remote: "remote3.html" }, "show");
		});
	</script>
	</body>
</html>
jQuery web
نوافذ مشروطة تسيطر عليها الأزرار
جرب الكود
لاحظ استخدام الحدث hidden.bs.modal الذي يحدث عند إغلاق إطار الوسائط. من الضروري إعادة ضبط النافذة وإلا فسنفتحها دائمًا ...
بُعد العرض لنافذة مشروطة
الإصدار 3.1 من Bootstrap أضاف إمكانية اختيار البعد من نافذة مشروطة مع فئتين: modal-lg و modal-sm . الأول يجعل من الممكن الحصول على نافذة واسعة ، في حين أن الثانية تفعل العكس عن طريق إنشاء نافذة ضيقة. يجب أن تذهب هذه الفئات مع الفصل modal-dialog . ستجد مثالاً في الشكل التالي:

<div class="container">  
<button class="btn btn-primary" data-toggle="modal" data-target="#f1">
	Grande fenêtre</button>
<div class="modal fade" id="f1">
<div class="modal-dialog modal-lg">
	<div class="modal-content">
	<div class="modal-body">
		Je suis une grande fenêtre !
		<button type="button" class="close" data-dismiss="modal">
			x</button>
	</div>
	</div>
</div>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#f2">
	Petite fenêtre</button>
<div class="modal fade" id="f2">
<div class="modal-dialog modal-sm">
	<div class="modal-content">
	<div class="modal-body">
		Je suis une petite fenêtre !
		<button type="button" class="close" data-dismiss="modal">
			x</button>
	</div>
	</div>
</div>
</div>
</div>
jQuery web
نافذة صغيرة مع فئة مشروط SM
jQuery web
نافذة كبيرة مع فئة مشروط LG
صفحة المثال وسهولة الوصول إليها
تمت إضافة نافذة مشروطة إلى صفحة المثال. لعدم التحميل الزائد لهذه الصفحة ، خططت للتو نافذة تفتح عندما ننقر على الرابط "Siberian Tiger" ، كما في الشكل التالي.
jQuery web
نافذة مشروطة في صفحة المثال
جرب الكود
هنا هو الكود:

<a href="#infos" class="list-group-item" data-toggle="modal">
	Tigre de Sibérie
	<span class="badge">120</span>
</a>
<div class="modal fade" id="infos" role="dialog" 
aria-labelledby="modalTitre" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" 
		aria-hidden="true">x</button>
		<h4 id="modalTitre" class="modal-title">Plus d'informations 
			sur le tigre de Sibérie</h4>
		</div>
		<div class="modal-body">
		<blockquote>
			Les tigres de Sibérie pèsent de 180 à 350 kg pour les 
			mâles et de 100 à 200 kg pour les femelles. 
Le plus gros tigre de Sibérie, tué en 1950, atteignait les 384 kg. 
Le Tigre de Sibérie est le troisième plus 
gros prédateur terrestre derrière l'ours kodiak et l'ours polaire. 
La longueur totale du corps avec la queue 
est comprise entre 2,7 et 3,8 m pour les mâles et entre 2,4 et 2,75
 m pour les femelles. La longueur du crâne 
est de 341 à 383 mm pour les mâles et 279 à 318 mm pour les 
femelles.<hr>
			<small class="pull-right">Wikipedia</small>
		</blockquote>
		</div>
	</div>
	</div>
</div>
قمت بدمج كود ARIA لسهولة الوصول. تم تعريف الدور بأنه dialog ( تعريف W3C ) ، وهو ما ينصح به مؤلفو Bootstrap . إذا قرأنا التعريف ، فإننا نتحدث عن نافذة تقاطع التدفق الطبيعي وتتطلب إدخال المستخدم (وهذا ليس هو الحال هنا). أعترف أنني لم أقلق أبدًا من هذا الجانب من إمكانية الوصول وقراءة توصية W3C شاقة إلى حد ما. ومع ذلك ، يبدو من المنطقي مراعاة احتياجات الأشخاص ذوي الإعاقات الحسية. في تصفح الأدوار ، أفضّل استخدام التكميلي في هذه الحالة.
تشير خاصية aria-labelledby إلى عنوان نافذة الوسائط. على سبيل المثال ، سيقرأ قارئ الشاشة النص المقابل لإعلام المستخدم بمحتويات نافذة الوسائط. أخيرًا ، تشير الخاصية aria-hidden إلى تجاهل العنصر. من الواضح أن إضافات إمكانية الوصول هذه لا تكون منطقية إلا إذا تمت معالجة الصفحة بأكملها بهذه الطريقة ...
نموذج في النافذة
من الممكن أن يكون لديك عناصر تفاعلية في نافذة الوسائط مثل نموذج. هنا مثال على التنفيذ:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
	body {padding-top: 20px;}
</style>
</head>
<body>
<div class="container">      
	<div id="html">
	<button data-toggle="modal" data-backdrop="false" 
	href="#formulaire" class="btn btn-primary">
	Informations</button>
	</div>
	<div class="modal fade" id="formulaire">
	<div class="modal-dialog">
		<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close"
			data-dismiss="modal">x</button>
			<h4 class="modal-title">Vos infos :</h4>
		</div>
		<div class="modal-body">
			<form action="test.php">
			<div class="form-group">
				<label for="nom">Nom</label>
				<input type="text" 
				class="form-control" name ="nom" 
				id="nom" placeholder="Votre nom">
			</div>
			<div class="form-group">
				<label for="email">Email</label>
				<input type="email" class="form-control" 
				name="email" 
				id="email" placeholder="Votre Email">
			</div>
			<button type="submit" class="btn btn-default">
				Envoyer</button>
			</form>
		</div>
		<div class="modal-footer">
			<button class="btn btn-info" data-dismiss="modal">
				Annuler

			</button>
		</div>
		</div>
	</div>
	</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
	$(function(){
	$("form").submit(function(e) {
		e.preventDefault();
		var $form = $(this);
		$.post($form.attr("action"), $form.serialize())
		.done(function(data) {
		$("#html").html(data);
		$("#formulaire").modal("hide"); 
		})
		.fail(function() {
		alert("ça marche pas...");
		});
	});
	});
</script>
</body>
</html>
في البداية لدينا فقط زر:
jQuery web
زر الأمر
تظهر النافذة بنقرة واحدة كما رأينا سابقًا:
jQuery web
النافذة مع النموذج
ستتم معالجة النموذج في Ajax ، وبهذه الطريقة يكون من السهل إدارة التحقق من الصحة (وهو ما لا أقوم به في هذا المثال لعدم تضييق الكود) . نحتاج إلى ملف PHP صغير ( test.php) للتعامل مع معالجة النماذج:

<?php
echo("Le nom est " . $_POST['nom'] . " et l'Email est " . 
$_POST['email'] . ".");
?>
أقوم فقط بتهيئة قطعتي المعلومات وإرسالها مرة أخرى. ثم أعرض الجملة على الصفحة بعد مسح نافذة الوسائط:

الاسم:Dupont  و البريد الالكتروني   dupont@pacher.fr.
جرب الكود
التنشيط مع جافا سكريبت
تحريك نافذة مشروطة
لقد رأينا أنه يمكنك فعل أي شيء تقريبًا باستخدام الخصائص ، ولكن يمكنك أيضًا استخدام Javascript لاستخدام هذا البرنامج المساعد. تقوم الخاصية data-toggle="modal" الموضوعة في المشغل بتنشيط المكون الإضافي تلقائيًا. دعنا نأخذ مثالاً موضح أعلاه من خلال عدم استخدام هذه الخاصية:

<button class="btn btn-primary">Informations</button>
<div class="modal" id="infos">
	<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			x</button>
		<h4 class="modal-title">Plus d'informations</h4>
		</div>
		<div class="modal-body">
		Le Tigre (Panthera tigris) est un mammifère carnivore de 
		la famille des félidés...
		</div>
		<div class="modal-footer">
		<button class="btn btn-info" data-dismiss="modal">
			Fermer</button>
		</div>
	</div>
	</div>
</div>
الآن عند النقر فوق الزر ، لا يحدث شيء. لتنشيط المكون الإضافي ، يجب عليك استخدام Javascript :

$('.btn').click(function() {
	$('.modal').modal('show');
});
يمكنك أيضًا تعديل سلوك النافذة مع الخصائص. على سبيل المثال ، keyboard تغلق خاصية Boolean ، والتي تكون عادةً صحيحة ، النافذة عن طريق الضغط على مفتاح Echap . يمكننا إبلاغه عن طريق استكمال مثالنا. ولكن من الضروري أيضًا إبلاغ الخاصية showالتي تكون True تلقائيا ، وفتح النافذة بمجرد تحميل الصفحة ، وهو أمر لا نريده بالطبع. هنا هو الكود:

$('.modal').modal({
	keyboard: false,
	show: false
});
الأحداث
لديك أيضًا 5 أحداث لهذا المكون:
الحدث وصف
show.bs.modal عند استدعاء طريقة العرض
shown.bs.modal عندما تصبح النافذة مرئية
hide.bs.modal عند استدعاء لإخفاء الطريقة
hidden.bs.modal عندما تكون النافذة مخفية
loaded.bs.modal عندما تقوم النافذة بتحميل المحتوى المسترد مع الخاصيةremote
على سبيل المثال ، إذا كان لديك نموذج على صفحة الوسائط كما هو موضح أعلاه وتريد أن يكون عنصر التحكم الأول نشطًا عند عرض الصفحة ، فيمكنك إنشاؤه بسهولة كما يلي:

$(".modal").on('shown.bs.modal', function(){
	$('input:first').focus();
});

علامات التبويب


أول مثال بسيط
يُسهِّل المكون الإضافي Tab إنشاء علامات تبويب ، كما في الشكل التالي.

<ul class="nav nav-tabs">
	<li class="active"><a href="#accueil" data-toggle="tab">Accueil</a>
	</li>
	<li><a href="#livres" data-toggle="tab">Livres</a></li>
	<li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="accueil">Texte d'accueil</div>
	<div class="tab-pane" id="livres">Tous les livres</div>
	<div class="tab-pane" id="temoignages">Tous les temoignages</div>
</div>
jQuery web
علامات تبويب بسيطة
نستخدم قائمة وبعض الفئات ، لا شيء معقد. الطبقات nav و nav-tab رعاية التنسيق. يتم تنشيط البرنامج المساعد بواسطة data-toggle="tab". نشير المحتوى الصحيح مع href .
جانب آخر
إذا كان هذا المظهر الجدولي لا يناسبك ، فيمكنك التغيير إلى جانب آخر بأقل تعديل ، كما في الشكل التالي.

<ul class="nav nav-pills">
jQuery web
علامات تبويب
الانتقال التدريجي
للحصول على تأثير تدريجي ، ما عليك سوى إضافة الفئة fade لكل من tab-pane :

<ul class="nav nav-pills">
  <li class="active"><a href="#accueil" data-toggle="tab">Accueil</a></li>
  <li><a href="#livres" data-toggle="tab">Livres</a></li>
  <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade active in" id="accueil">Texte d'accueil</div>
  <div class="tab-pane fade" id="livres">Tous les livres</div>
  <div class="tab-pane fade" id="temoignages">Tous les témoignages</div>
</div>
يجب عليك أيضا إضافة فئة in لـ tab-pane لإظهار النص (التعتيم 1) عند تحميل الصفحة.
التّراص
إذا كان لا يزال غير مناسب لك ، فيمكنك تكديس الروابط (انظر الشكل التالي):

<ul class="nav nav-pills nav-stacked">
jQuery web
علامات التبويب مكدسة
مبرر
من الممكن أيضًا جعل علامات التبويب تشغل كل المساحة المتاحة عن طريق تقسيمها بالتساوي (انظر الشكل التالي).

<div class="col-lg-8">    
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#accueil" data-toggle="tab">Accueil</a></li>
  <li><a href="#livres" data-toggle="tab">Livres</a></li>
  <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="accueil">Texte d'accueil</div>
  <div class="tab-pane" id="livres">Tous les livres</div>
  <div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>
</div>
jQuery web
علامات التبويب المضبوطة
تعطيل الرابط
يمكنك وضع علامة على رابط غير نشط مع الفصل disabled، كما في الشكل التالي:

<ul class="nav nav-pills">
  <li class="active"><a href="#accueil" data-toggle="tab">Accueil</a></li>
  <li class="disabled"><a href="#livres" data-toggle="tab">Livres</a></li>
  <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="accueil">Texte d'accueil</div>
  <div class="tab-pane" id="livres">Tous les livres</div>
  <div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>
jQuery web
علامة تبويب معطلة
ولكن ليس لأنه يبدو غير نشط أنه حقا! لجعله غير نشط حقًا ، يجب إزالة الخاصية data-toggle :

<li class="disabled"><a href="#livres">Livres</a></li>
قائمة منسدلة في علامة تبويب
للحصول على قائمة منسدلة في علامة تبويب ، استخدم المكوّن الإضافي dropdown الذي رأيناه بالفعل (كما في الشكل التالي):

<ul class="nav nav-tabs">
	<li><a href="#accueil" data-toggle="tab">Accueil</a></li>
	<li class="dropdown"><a class="dropdown-toggle" 
		data-toggle="dropdown" href="#">Livres <span class="caret">
	</span></a>
	<ul class="dropdown-menu">
		<li><a href="#policiers" data-toggle="tab">Policiers</a></li>
		<li><a href="#romans" data-toggle="tab">Romans</a></li>
		<li><a href="#contes" data-toggle="tab">Contes</a></li>
	</ul>
	</li>
	<li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="accueil">Texte d'accueil</div>
	<div class="tab-pane" id="temoignages">Tous les témoignages</div>
	<div class="tab-pane" id="policiers">Tous les livres policiers</div>
	<div class="tab-pane" id="romans">Tous les romans</div>
	<div class="tab-pane" id="contes">Tous les contes</div>
</div>
jQuery web
القائمة المنسدلة في علامة تبويب
علامات التبويب الجانبية
يمكنك تكييف التصميم ، على سبيل المثال ، وضع علامات التبويب المكدسة على اليسار ، كما هو موضح في الشكل التالي:

<ul class="nav nav-pills nav-stacked pull-left">
  <li><a href="#accueil" data-toggle="tab">Accueil</a></li>
  <li class="active"><a href="#livres" data-toggle="tab">Livres</a></li>
  <li><a href="#temoignages" data-toggle="tab">Témoignages</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane" id="accueil">Texte d'accueil</div>
	<div class="tab-pane" id="temoignages">Tous les témoignages</div>
	<div class="tab-pane active" id="livres">Tous les livres</div>
</div>
jQuery web
علامات التبويب على اليسار
أو على اليمين (انظر الشكل التالي):

<ul class="nav nav-pills nav-stacked pull-right">
jQuery web
علامات التبويب على اليمين
صفحة المثال
يتم الآن إثراء صفحة مثالنا بعلامات تبويب في الجزء السفلي ، كما في الشكل التالي.
jQuery web
علامات التبويب في صفحة المثال
جرب الكود
فيما يلي جزء الكود المعني:

<section class="col-sm-8">
<ul class="nav nav-pills">
<li class="active"><a href="#contact" data-toggle="tab">Contact</a></li>
<li><a href="#informations" data-toggle="tab">Informations pratiques</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade in" id="contact">
<form class="well" role="form">
<h4><span class="label label-default">Si vous voulez me laisser un message
	</span></h4>
<h4>Comment m'avez-vous trouvé ?</h4>
<fieldset>
	<div class="radio">
	<label for="ami" class="radio">
		<input type="radio" name="origine" value="ami" id="ami">
		Par un ami 
	</label>
	</div>
	<div class="radio">
	<label for="web" class="radio">
		<input type="radio" name="origine" value="web" id="web">
		Sur le web 
	</label>
	</div>
	<div class="radio">
	<label for="hasard" class="radio">
		<input type="radio" name="origine" value="hasard" id="hasard">
		Par hasard 
	</label>
	</div>
	<div class="radio">
	<label for="autre" class="radio">
		<input type="radio" name="origine" value="autre" id="autre">
		Autre... 
	</label>
	</div>
	<label for="textarea">Votre message :</label>
	<textarea id="textarea" class="form-control" rows="4"></textarea>
	<p class="help-block">Vous pouvez agrandir la fenêtre</p>
	<button class="btn btn-primary" type="submit"><span 
		class="glyphicon glyphicon-ok-sign"></span> Envoyer</button>
</fieldset>
</form>
</div>
<div class="tab-pane fade" id="informations">
	<div class="well">
	<h2>Informations pratiques</h2>
	<p>Si vous êtes intéressés par la protection des tigres et si 
	vous désirez prendre part aux actions menées... blablabla...
    </p>
	</div>
</div>
<div class="tab-content">
</section>
باستخدام جافا سكريبت
تفعيل علامات التبويب
لقد قمنا بتنشيط البرنامج المساعد أعلاه مع الخاصية data-toggle="tab" . من الممكن أيضًا استخدام البرنامج المساعد مباشرةً مع Javascript . فيما يلي أحد الأمثلة دون أن تملأ الخاصية:

<ul class="nav nav-pills nav-stacked pull-right">
	<li><a href="#accueil">Accueil</a></li>
	<li class="active"><a href="#livres">Livres</a></li>
	<li><a href="#temoignages">Témoignages</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane" id="accueil">Texte d'accueil</div>
	<div class="tab-pane" id="temoignages">Tous les témoignages</div>
	<div class="tab-pane active" id="livres">Tous les livres</div>
</div>
أصبحت علامات التبويب غير نشطة. لهذا العمل عليك إضافة القليل من جافا سكريبت:

$('a').click(function (e) {
	e.preventDefault();
	$(this).tab('show');
});
يجب تنشيط جميع علامات التبويب ، ولهذا اخترت محدد الصفحة 'a' الذي لا لبس فيه لصفحتي.
الأحداث
لديك أيضًا 4 أحداث لهذا المكون:
حدث وصف
show.bs.dropdown عند استدعاء طريقة العرض
shown.bs.dropdown عندما تصبح القائمة مرئية/td>
hide.bs.dropdown عند استدعاء لإخفاء الطريقة
hidden.bs.dropdown عندما تكون القائمة مخفية
من ناحية أخرى ، من الممكن معرفة علامة التبويب النشطة مع event.target علامة التبويب المحددة مسبقًا مع علامة التبويب event.relatedTarget . سنستخدم كل هذا لعرض اسم علامة التبويب الحالية والسابقة مع كل تغيير. سنضيف كود HTML لاستيعاب المعلومات:

<ul class="nav nav-pills">
	<li class="active"><a href="#accueil">Accueil</a></li>
	<li><a href="#livres">Livres</a></li>
	<li><a href="#temoignages">Témoignages</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="accueil">Texte d'accueil</div>
	<div class="tab-pane" id="livres">Tous les livres</div>
	<div class="tab-pane" id="temoignages">Tous les témoignages</div>
</div>
<hr>
<p id='actif'><strong>Onglet actif </strong>: <span></span></p>
<p id='precedent'><strong>Onglet précédent </strong>: <span></span></p>
يبقى فقط توقع كود Javascript لتشغيل المكون الإضافي وإعداد الاستماع إلى الحدث والتصرف وفقًا لذلك (انظر الشكل التالي):

$(function(){
	$('a')
	.click(function (e) {
	e.preventDefault();
	$(this).tab('show');
	})
	.on('shown.bs.tab', function (e) {
	$('#actif span').html($(e.target).text());
	$('#precedent span').html($(e.relatedTarget).text());
	});
});
باستخدام الحدث هو موضح
jQuery web

BOUTONS


أزرار ثنائية الحالة
نحتاج أحيانًا إلى أزرار ثنائية الحالة: الراحة والمضغوطة. البرنامج المساعد يجعل من السهل القيام بذلك. فقط قم بإنشاء الزر واستعمل data-toggle="button" (كما في الشكل التالي) :

<a class="btn btn-success" data-toggle="button">Simple Bascule</a>
jQuery web
زر التبديل
أزرار بتأثير "خانة اختيارCHECKBOX "
نستطيع تجميع أزرار مع الفئة btn-group وتشغيلها مثل checkbox مع data-toggle="buttons" . تظل الأزرار مستقلة في عملها ولكنها تتمتع بميزة التجميع. لتحقيق ذلك ، يجب استخدام عناصر التحكم في inputالكتابة checkbox (انظر الشكل التالي) :

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-success">
	<input type="checkbox">Un
	</label>
	<label class="btn btn-success">
	<input type="checkbox">Deux
	</label>
	<label class="btn btn-success">
	<input type="checkbox">Trois
	</label>
</div>
jQuery web
أزرار مع تأثير مربع
أزرار مع تأثير "راديو"
نستطيع تجميع أزرار مع الفئة btn-group وتشغيلها مثل radio button مع data-toggle="buttons". يتم ربط الأزرار الآن في عملها ، يمكن الضغط على واحد فقط. لتحقيق ذلك ، يجب استخدام عناصر التحكم في inputمن نوع radio (انظر الشكل التالي) :

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-success">
	<input type="radio">Un
	</label>
	<label class="btn btn-success">
	<input type="radio">Deux
	</label>
	<label class="btn btn-success">
	<input type="radio">Trois
	</label>
</div>
jQuery web
أزرار مع تأثير الراديو
أزرار لعملية الانتظار
في بعض الأحيان تقوم بالنقر فوق زر لتنفيذ عملية تتطلب قدراً معيناً من الوقت ، مثل إرسال ملف. البرنامج المساعد يوفر هذا الاحتمال. هنا مثال أول مع تأخير مصطنع فقط للاحتفال بالتأثير. أولاً نقوم بإنشاء الزر:

<a class="btn btn-primary" data-loading-text="Chargement...">Cliquez !</a>
ثم نقوم بإنشاء الكود للتعامل مع التأثير. تقوم الطريقة التي يتم من خلالها تحميل تغيير نص الزر مع الإشارة إلى نص تحميل البيانات وتعيد الطريقة الزر إلى حالته الأولية (انظر الشكل التالي):

$(function (){
	$('a').click(function () {
	with($(this)) {
		button('loading');
		setTimeout(function () {
		button('reset');
		}, 4000);
	}
	})
});
jQuery web
زر لانتظار نهاية العملية
جرب الكود
الآن دعونا نرى حالة استخدام أكثر واقعية قليلا. لدينا صورة ثقيلة ليتم تحميلها ، ونريد من الزر أن يغير حالة وقت تحميل الصورة. هنا هو الزر وعلامة جاهزة لاستقبال الصورة:

<a class="btn btn-primary" data-loading-text="Chargement en cours...">
	Chargez l'image !</a>
<img id="mon_image">
وهنا هو كود Javascript للتعامل مع التأثير:

$(function (){
  $('a').click(function() {
  with($(this)) {
	if(hasClass('btn-primary')) {
	removeClass('btn-primary').addClass('btn-danger').button('loading');
	var image = new Image();
	image.onload = function() {
	  removeClass('btn-danger').addClass('btn-primary').button('reset');
	  $("#mon_image").attr({ src:"images/legumes.jpg" });
	};
	image.src = "images/legumes.jpg"; 
	}
 }
})
});
جرب الكود
باستخدام هذا المثال ، سترى التأثير مرة واحدة فقط في المستعرض الخاص بك ، حيث سيتم تخزين الصورة مؤقتًا بعد ذلك.
صفحة المثال
تم تزيين صفحة المثال بأزرار مجموعة "الراديو" لاختيار مقطع فيديو (انظر الشكل التالي).
jQuery web
أزرار مع خيار التأثير في صفحة المثال
جرب الكود

<div class="btn-group pull-right" data-toggle="buttons">
	<label class="btn btn-primary active">
	<input type="radio">Vidéo 1
	</label>
	<label class="btn btn-primary">
	<input type="radio">Vidéo 2
	</label>
	<label class="btn btn-primary">
	<input type="radio">Vidéo 3
	</label>
</div>

انتقال الدائري CAROUSEL


صفحة المثال
تحتوي صفحة المثال على دائري (انظر الشكل التالي).
jQuery web
دائري في صفحة المثال
جرب الكود
أول مثال بسيط
هذا البرنامج المساعد يجعل من السهل إنشاء تنقّل دائري. الإعداد يتطلب استخدام عدد قليل من الطبقات. إليك بنية HTML الأساسية:

<div class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
		<div class="item active"> ... </div>
		<div class="item"> ... </div>
		<div class="item"> ... </div>
	</div>
</div>
فيما يلي مثال بسيط بسيط:

<div class="container">
  <div class="col-lg-offset-2 col-lg-8">
  <div class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
	<div class="item active"> <img alt="" src="images/img47.png"></div>
	<div class="item"> <img alt="" src="images/img48.png"></div>
	<div class="item"> <img alt="" src="images/img49.png"></div>
	</div>
  </div>
  </div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
لكل عنصر يتم وضع علامة للإشارة إلى صورة. يتم استخدام الفئة active لتعيين الصورة التي يجب أن تظهر أولاً. لقد استخدمت الفئة col-lg-8 لمعايرة الكاروسيل و الفئة col-lg-offset-2 لتوسيطه. الصور 3 هي بنفس الحجم. يجب علينا أيضا تهيئة التنقل الدائري pullata-ride = "carousel". تلقائيا ، يتم تمرير الصور بمعدل 5 ثوانٍ (انظر الشكل التالي):
jQuery web
بسيط carousel
جرب الكود
عناوين للصور
من الممكن أن تظهر عنوانًا لكل صورة في الجزء السفلي مع شرح كلاسي كاروسيل (انظر الشكل التالي):

<div class="col-lg-offset-2 col-lg-8">
	<div class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
	  <div class="item active"> <img alt="" src="images/img47.png">
	  <h1 class="carousel-caption">Une présentation</h1>
	  </div>
	  <div class="item"> <img alt="" src="images/img48.png">
	  <h1 class="carousel-caption">Une autre présentation</h1>
	  </div>
	  <div class="item"> <img alt="" src="images/img49.png">
	  <h1 class="carousel-caption">Et encore une autre !</h1p>
	</div>
	</div>
	</div>
</div>
jQuery web
العناوين في داخل الصور
جرب الكود
لاحظ أن العنوان يأتي أعلى الصورة وبالتالي يتعين عليك تكييف النمط مع الألوان الموجودة في الصورة بحيث يصبح العنوان قابلاً للقراءة.
مؤشر للصورة المعروضة
من الممكن عرض مؤشر لمعرفة الصورة المعروضة وأيضًا للوصول مباشرة إلى صورة معينة. يجب عليك تحديد الكاروسيل ووضعه مع السمة data-target. السمة data-slide-to تُمكّن من تعريف الشريحة المعنية. يمكنك أيضًا تحديد الشريحة المراد عرضها بالنقر على المؤشر (انظر الشكل التالي): :

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
  <li data-target="#carousel" data-slide-to="0" class="active"></li>
  <li data-target="#carousel" data-slide-to="1"></li>
  <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
  <div class="item active"> <img alt="" src="images/img47.png"></div>
  <div class="item"> <img alt="" src="images/img48.png"></div>
  <div class="item"> <img alt="" src="images/img49.png"></div>
  </div>
</div>
jQuery web
مؤشر للصورة المعروضة
جرب الكود
لاحظ أن المؤشر يأتي فوق الصورة ، لذلك تحتاج إلى تكييف النمط مع ألوان الصورة لجعله قابلاً للقراءة.
أزرار التمرير
يمكنك أيضًا عرض أزرار اليمين واليسار للسماح بالتمرير اليدوي للصور. من الضروري تحديد الكاروسيل للإشارة إليه في الروابط مع href (انظر الشكل التالي) :

<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
	<div class="item active"> <img alt="" src="images/img47.png">
	</div>
	<div class="item"> <img alt="" src="images/img48.png"></div>
	<div class="item"> <img alt="" src="images/img49.png"></div>
	</div>
	<a class="left carousel-control" href="#carousel" data-slide="prev">
	<span class="glyphicon glyphicon-chevron-left"></span>
	</a>
	<a class="right carousel-control" href="#carousel" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right"></span>
	</a>
</div>
jQuery web
أزرار لتمرير الصور
جرب الكود
لاحظ أن الشيفرون(>) أعلى الصورة ، لذلك يجب عليك تكييف النمط مع الألوان الموجودة في الصورة بحيث تكون مرئية.
تحسين العرض التقديمي
يمكن تحسين عرض الشرائح بأسلوب ، كما في الشكل التالي:

.carousel-inner {
	border: 5px solid white;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
jQuery web
تحسين العرض
ولكن يمكنك أيضًا استخدام فئة Bootstrap للحصول على تأثير لطيف دون إضافة نمط (انظر الشكل التالي):

<div class="carousel-inner thumbnail">
jQuery web
باستخدام فئة الصور المصغرة للعرض التقديمي
خيارات التنقل الدائري
وقت التمرير
في الأمثلة السابقة أطلقنا الكاروسيل باستخدام data-ride = "carousel". إذا كنت ترغب في تغيير العملية الأساسية قليلاً ، فعليك تشغيلها بشكل صريح من Javascript. على سبيل المثال هنا لتغيير سرعة التمرير::

$(function () {
	$('.carousel').carousel({ interval: 2000 });
});
جرب الكود
اذا قمت بإطلاق الكاروسيل بشكل صريح باستخدام Javascript ، فمن الواضح أنك لا تحتاج إلى وضع data-ride="carousel"
والذي سيتم استخدامه بعد ذلك مرتين..
دورة و وقفة
باستخدام jQuery ، يمكنك بدء الدورة أو الإيقاف المؤقت (انظر الشكل أدناه):

<div class="container">
	<div class="col-lg-2">
	<div class="btn-group" data-toggle="buttons">
		<label class="btn btn-primary active" id="cycle">
		<input type="radio" name="options">Cycle
		</label>
		<label class="btn btn-primary" id="pause">
		<input type="radio" name="options">Pause
		</label>
	</div>
	</div>
	<div class="col-lg-8">
	<div id="carousel" class="carousel slide">
		<div class="carousel-inner">
		<div class="item active"><img alt="" src="images/img47.png">
		</div>
		<div class="item"> <img alt="" src="images/img48.png"></div>
		<div class="item"> <img alt="" src="images/img49.png"></div>
		</div>
	</div>
	</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
	$(function () {
	$('.carousel').carousel({ interval: 2000 });
	$('#cycle').click(function() {
		$('.carousel').carousel('cycle');
	});
	$('#pause').click(function() {
		$('.carousel').carousel('pause');
	});
	});
</script>
jQuery web
التحكم دائري مع أزرار
جرب الكود
يتحكم كلا الزرين في عرض الشرائح. فرصة جيدة لمراجعة كيفية تكوين أزرار نوع "الراديو" باستخدام Bootstrap .
أوامر أخرى
هنا مثال أكثر اكتمالا مع لوحة من أزرار الأوامر (انظر الشكل التالي):

<div class="container">
	<div class="row">
	<div class="col-lg-offset-2 col-lg-8">
	  <div id="carousel" class="carousel slide">
	  <div class="carousel-inner">
		<div class="item active"><img alt="" src="images/img47.png">
		</div>
		<div class="item"> <img alt="" src="images/img48.png"></div>
		<div class="item"> <img alt="" src="images/img49.png"></div>
	  </div>
	  </div>
	</div>  
	</div>  
	<div class="row">
	<div class="col-lg-12">  
		<div class="btn-group" data-toggle="buttons">
		<label class="btn btn-success" id="first">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-fast-backward"></span>
		</label>
		<label class="btn btn-success" id="previous">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-step-backward"></span>
		</label>
		<label class="btn btn-success" id="pause">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-pause"></span>
		</label>
		<label class="btn btn-success active" id="play">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-play"></span>
		</label>
		<label class="btn btn-success" id="next">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-step-forward"></span>
		</label>
		<label class="btn btn-success" id="last">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-fast-forward"></span>
		</label>
		</div>  
	</div>
	</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
	$(function () {
	$('.carousel').carousel({ interval: 2000 });
	$('#first').click(function() { $('.carousel').carousel(0); });
	$('#previous').click(function() { $('.carousel').carousel('prev'); }); 
	$('#pause').click(function() { $('.carousel').carousel('pause'); });
	$('#play').click(function() { $('.carousel').carousel('cycle'); });
	$('#next').click(function() { $('.carousel').carousel('next'); });
	$('#last').click(function() { $('.carousel').carousel(2); });
	});
</script>
jQuery web
شريط زر للتحكم دائري
جرب الكود
الأحداث
لديك حدثان لهذا المكون:
حدث وصف
slide.bs.carousel عند استدعاء طريقة الشريحة
slid.bs.carousel عند اكتمال الترجمة
حدث وصف slide.bs.carousel عند استدعاء طريقة الشريحة slid.bs.carousel عند اكتمال الترجمة
دعنا نكمل المثال السابق بفهرس الشريحة الحالية والعدد الإجمالي للشرائح (انظر الشكل أدناه). إليك الكود الذي يحتوي على هذه الوظيفة الإضافية:

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
	body { padding-top: 20px; }
	.col-lg-offset-2 {margin-bottom: 10px; }
	.col-lg-12 { text-align: center; }
</style>
</head>

<body>
<div class="container">
	<div class="row">
	<div class="col-lg-offset-2 col-lg-8">
		<div id="carousel" class="carousel slide">
		<div class="carousel-inner">
		<div class="item active"> <img alt="" src="images/img47.png">
		</div>
		<div class="item"> <img alt="" src="images/img48.png"></div>
		<div class="item"> <img alt="" src="images/img49.png"></div>
		</div>
		</div>
	</div>  
	</div>  
	<div class="row">
	<div class="col-lg-12">  
		<div class="btn-group" data-toggle="buttons">
		<label class="btn btn-success" id="first">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-fast-backward"></span>
		</label>
		<label class="btn btn-success" id="previous">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-step-backward"></span>
		</label>
		<label class="btn btn-success" id="pause">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-pause"></span>
		</label>
		<label class="btn btn-success active" id="play">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-play"></span>
		</label>
		<label class="btn btn-success" id="next">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-step-forward"></span>
		</label>
		<label class="btn btn-success" id="last">
			<input type="radio" name="options"><span 
			class="glyphicon glyphicon-fast-forward"></span>
		</label>
		</div>  
		<p><span class="label label-info"></span></p>
	</div>
	</div>
	
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
  function affichage() {
  var total = $('.item').length;
  var current = $('.item.active').index() + 1;
  $('.label').text(current + ' / '+ total);
  }
  $(function () {
  affichage();
  $('.carousel').carousel({ interval: 2000 });
  $('#first').click(function() { $('.carousel').carousel(0); });
  $('#previous').click(function() { $('.carousel').carousel('prev'); }); 
  $('#pause').click(function() { $('.carousel').carousel('pause'); });
  $('#play').click(function() { $('.carousel').carousel('cycle'); });
  $('#next').click(function() { $('.carousel').carousel('next'); });
  $('#last').click(function() { $('.carousel').carousel(2); });
  $('.carousel').on('slid.bs.carousel', function () {
	affichage();
  });
});
</script>
</body>
</html>
jQuery web
عرض الفهرس والعدد الإجمالي للشرائح
جرب الكود
للبقاء في استخدام Bootstrap ، خططت للعرض في شارة. لتحديد عدد الشرائح ، نحسب عدد مرات العثور على الفئة item . بالنسبة للشريحة الحالية ، نحن نبحث عن الفئة active .

تلميحات الأدوات و POPOVER


صفحة المثال
تمتلئ صفحة المثال بنصائح الأدوات (انظر الشكل التالي).
jQuery web
تلميحات الأدوات في صفحة المثال
جرب الكود
يشترك هذان الملحقان ( Tooltips و Popover ) في مكتبة ولديهما عملية مماثلة ، لذلك سنتعامل معهما معًا.
تلميح الأدوات
مثال بسيط
الهدف هو الحصول على تلميحات أدوات جميلة ، كما في الشكل التالي.
jQuery web
ظهور تلميح الأدوات
إليك الكود المقابل لهذا المثال الأول:

Le Tigre (Panthera tigris) est un <a data-toggle="tooltip" 
href="#" title="Classe de vertébrés">
mammifère</a> carnivore de la famille des félidés (Felidae)
 du genre Panthera. Aisément reconnaissable à sa 
fourrure rousse rayée de noir, il est le plus grand félin
 sauvage et l'un des plus grands <a data-toggle="tooltip" 
href="#" title='Synonyme de "carnassier"'> carnivores</a>
 du monde. L'espèce est divisée en neuf 
sous-espèces possédant des différences mineures en termes
 de taille ou de comportement. 

$(function (){
	$('a').tooltip();
});
وضع تلميح الأدوات
يمكنك تغيير موضع تلميح الأدوات ، والذي يكون تلقائيا فوق الخيار placement . الاحتمالات هي top ( وهذا هو الخيار التلقائي) ، bottom (أدناه ) ، left (يسار) و right (يمين) . فيما يلي مثال للاستخدام مع نفس كود HTML :

$(function (){
	$('a:first-child').tooltip({ placement:'left' });
	$('a:last-child').tooltip({ placement:'bottom' });
});
هنا نستخدم الخيار من placement خلال تحديده left للرابط الأول bottom والثاني (انظر الشكل التالي).
jQuery web
تلميح الأدوات أدناه
يمكننا أيضًا إصلاح الموضع باستخدام سمة موضع البيانات:

<a data-toggle="tooltip" href="#" data-placement="bottom" 
title='Synonyme de "carnassier"'>
تحريك تلميح الأدوات
تلقائيا ، يتم تشغيل تلميح الأدوات عندما يتحرك مؤشر الماوس فوق العنصر أو إذا كان به التركيز. يمكن تعديل هذا السلوك مع الخيار trigger . الاحتمالات هي click ، hover ، focus و manual . فيما يلي مثال للاستخدام مع نفس كود HTML :

$(function (){
	$('a:first-child').tooltip({ trigger:'click' });
	$('a:last-child').tooltip({ 
		placement: 'bottom', trigger:'hover click' 
	});
});
هنا نستخدم الخيار trigger عن طريق وضع لـ click أول وصلة hover و click للمرة الثانية (انظر الشكل أدناه).
jQuery web
متنوعة مما اثار نصائح
جرب الكود
مهلة لتشغيل تلميح الأدوات
بشكل تلقائي ، تظهر تلميح الأدوات فورًا وتختفي بنفس السرعة. يمكن تعديل هذا السلوك مع الخيار delay . يمكننا إما تحديد تأخير مماثل للمظهر والاختفاء ، أو التمييز بين الاثنين. فيما يلي مثال للاستخدام مع نفس كود HTML :

$(function (){
	$('a:first-child').tooltip({ delay: 400 });
	$('a:last-child').tooltip({ delay: { show: 400, hide: 200 } });
});
نحن هنا نستخدم الخيار من delay خلال ضبطه على 400 مللي ثانية للرابط الأول للعرض والاختفاء. نحن نفرق مع 400 مللي ثانية للعرض و 200 مللي ثانية للاختفاء للمرة الثانية (انظر الشكل التالي).
jQuery web
مهلة لتشغيل تلميح الأدوات
جرب الكود
POPOVER
مثال بسيط
popover هي تلميح أدوات كبير. العملية مطابقة لما رأيناه سابقًا. فيما يلي المثال الأول للتنفيذ على مستوى HTML :

<a href="#" id="pop" class="btn btn-info" data-toggle="popover" 
data-content="C'est tout simple à faire !" title="Test du Popover">
Cliquez sur moi pour le popover</a>

$(function (){
	$("#pop").popover(); 
});
مجرد استخدام وظيفة popover مع المحدد الصحيح ، وهنا اخترنا ببساطة واحدة id . سترى النتيجة في الشكل التالي.
jQuery web
Popover الناجمة عن زر
إغلاق عند النقر
تلقائيا لإغلاق النافذة ، من الضروري النقر مرة أخرى على المشغل ، وهنا الزر. إذا كنت ترغب في الإغلاق مع النقر في أي مكان آخر بالصفحة ، فيجب عليك إضافة تركيز المشغل:

<a href="#" id="pop" class="btn btn-info" data-toggle="popover" 
data-trigger="focus" data-content="C'est tout simple à faire !" 
title="Test du Popover">
Cliquez sur moi pour le Popover</a>
ما يمكن تحقيقه أيضًا في Javascript :

$("#pop").popover({trigger: 'focus'});
تحديد الموقع
بالنسبة إلى تلميح الأدوات ، يمكن تعديل الموضع باستخدام الخيار placement بنفس الإمكانيات top (أعلاه ، هو الخيار التلقائي) و bottom (أدناه) و left (على اليسار) و right (على اليمين) (انظر الشكل التالي):

$("#pop").popover({placement:'left'});
jQuery web
Popover على اليسار
مدة الظهور و الاختفاء
يمكننا أيضًا تحديد تأخر الظهور والاختفاء:

$("#pop").popover({delay: { show: 800, hide: 300 }});
جرب الكود
إطلاق
السلوك الافتراضي هو مشغل النقر على العنصر ، ولكن يمكنك بسهولة تغيير هذا السلوك:

$("#pop").popover({placement:'bottom', trigger:'hover'});
هنا استخدمنا الخيار trigger للحصول على نقطة انطلاق بشأن الانتقال ( hover) للعنصر (الاحتمالات الأخرى click ، focus و manual) . نظهر أيضًا أنه يمكننا تجميع العديد من الخيارات نظرًا لأننا حددنا أيضًا الموضع السفلي bottom .
جرب الكود
باستخدام الخيار ، manual يمكننا تحديد أي إجراء لتحريك popover الذي نريده. انظر إلى هذا المثال على مستوى HTML :

<div class="well"> 
  <img id="img" data-toggle="popover" data-content="Je suis en colère !"
	title="Attention à vous !" src="images/visage.png"> 
  <a href="#" id="pop" class="btn btn-info pull-right" >Cliquer sur moi
		plusieurs fois pour le popover</a> 
  </div>
هذه المرة ، قمنا بتعيين popoverعلى مستوى صورة ونقترح تشغيلها من زر. هنا هو كود jQuery :

$("#img").popover({trigger:'manual'}); 
$("#pop").click(function() {
	$('#img').popover('toggle');
});
تتم تهيئة popover على صورة المشغل اليدوية:

$("#img").popover({trigger:'manual'});
الحدث باستخدام click الزر لبدء وظيفة popover مع toggle كمُدخل:

$('#img').popover('toggle'); 
سترى النتيجة في الشكل التالي.
jQuery web
Popover على مستوى صورة
جرب الكود
HTML في POPOVER
بشكل تلقائي ، يمكنك فقط وضع نص عادي في النافذة المنبثقة. ومع ذلك، يمكنك تعيين الخيار html لـ true لـتغيير هذا السلوك (انظر الشكل أدناه):

<a href="#" id="pop" class="btn btn-info" data-toggle="popover" 
data-html="true" data-content="<em>C'est tout simple à faire !</em>"
	title="<h3>Test du popover</h3>">
Cliquez sur moi pour le popover</a>
jQuery web
HTML في popover

تأثير الأكورديون


مثال بسيط
تم تكييف المكوّن الإضافي الأكورديون (Collapse) بشكل جيد مع المكون panel، وفيما يلي مثال أول (انظر الشكل التالي):

<div class="panel panel-default col-lg-6">
	<h4> Les plugins de Bootstrap</h4>
	<div class="panel-heading"> 
	<a href="#item1" data-toggle="collapse"> Accordéon </a> 
	</div>
	<div id="item1" class="panel-collapse collapse in">
	<div class="panel-body"> Ce plugin permet de créer des effets 
		"accordéon" totalement paramétrables</div>
	</div>
	<div class="panel-heading"> 
	<a href="#item2" data-toggle="collapse"> Fenêtre modale </a> 
	</div>
	<div id="item2" class="panel-collapse collapse">
	<div class="panel-body"> Ce plugin permet de créer des fenêtres 
		modales élégantes avec une grande simplicité. </div>
	</div>
	<div class="panel-heading"> 
	<a href="#item3" data-toggle="collapse"> Carousel </a> 
	</div>
	<div id="item3" class="panel-collapse collapse">
	<div class="panel-body"> Ce plugin permet de faire défiler des 
	images ou des vidéo, ou tout autre élément média avec une mise 
en forme esthétique </div>
	</div>
	<br>
</div>
jQuery web
تأثير الأكورديون
جرب الكود
يجب أن نميز عنصرين:
يتم إنشاء الرابط بين المشغل والمنطقة بواسطة معرف المنطقة . يتم استخدام الفئة in لتحديد ما إذا كان يتم عرض منطقة أم لا. في المثال الخاص بي ، وضعت هذه الفئة للمنطقة الأولى ، لذلك يتم عرضها عند التحميل. إذا قمت باختبار المكون ، فسترى أنه يعين هذه الفئة فقط. خدعت قليلا مع استخدام المكون panel ...
حدود لتحديد العناصر
سنرى الآن استخدامًا أكثر اكتمالا للمكون panel (انظر الشكل التالي):

<div class="panel-group col-lg-6">
	<h3> Les plugins de Bootstrap</h3>
	<div class="panel panel-default">
		<div class="panel-heading"> 
		<h3 class="panel-title">
			<a href="#item1" data-toggle="collapse"> 
				Accordéon 
			</a> 
		</h3>
		</div>
		<div id="item1" class="panel-collapse collapse in">
		<div class="panel-body"> 
			Ce plugin permet de créer des effets 
			"accordéon" totalement paramétrables</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading"> 
		<h3 class="panel-title">
		<a href="#item2" data-toggle="collapse"> 
				Fenêtre modale 
			</a> 
		</h3>
		</div>
		<div id="item2" class="panel-collapse collapse">
		<div class="panel-body"> Ce plugin permet de créer 
			des fenêtres modales élégantes avec une grande 
			simplicité. </div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading"> 
		<h3 class="panel-title">
		<a href="#item3" data-toggle="collapse"> Carousel </a> 
		</h3>
		</div>
		<div id="item3" class="panel-collapse collapse">
		<div class="panel-body"> Ce plugin permet de faire d
		éfiler des images ou des vidéo, ou tout autre élément 
		média avec une mise 
	en forme esthétique </div>
	</div>
	</div>
</div>
jQuery web
حدود لتمييز الكتل
الآن الكتل متميزة ...
جرب الكود
إظهار منطقة واحدة فقط
بشكل عام ، عند إنشاء تأثير الأكورديون ، نريد أنه عندما نعرض منطقة ما ، فإن المناطق الأخرى سوف تختفي تلقائيًا. إليك كيفية المتابعة (ينتج عن الشكل التالي):

<div class="container">
	<div id="monaccordeon" class="panel-group col-lg-6">
	<h3> Les plugins de Bootstrap</h3>
	<div class="panel panel-default">
		<div class="panel-heading"> 
		<h3 class="panel-title">
		<a href="#item1" data-parent="#monaccordeon" 
		data-toggle="collapse"> Accordéon 
		</a> 
		</h3>
		</div>
		<div id="item1" class="panel-collapse collapse in">
		<div class="panel-body"> 
			Ce plugin permet de créer des effets 
			"accordéon" totalement paramétrables
		</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading"> 
		<h3 class="panel-title">
			<a href="#item2" data-parent="#monaccordeon" 
			data-toggle="collapse"> Fenêtre modale </a> 
		</h3>
		</div>
		<div id="item2" class="panel-collapse collapse">
		<div class="panel-body"> Ce plugin permet de créer des 
		fenêtres modales élégantes avec une grande simplicité. 
		</div>
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading"> 
		<h3 class="panel-title">
			<a href="#item3" data-parent="#monaccordeon" 
			data-toggle="collapse"> Carousel </a> 
		</h3>
		</div>
		<div id="item3" class="panel-collapse collapse">
		<div class="panel-body"> Ce plugin permet de faire défiler 
		des images ou des vidéo, ou tout autre élément média avec
		une mise en forme esthétique 
			</div>
		</div>
	</div>
	</div>
</div>
كان من الضروري إضافة معرف ( #monaccordeon) إلى العلامة المحيطة وإشارة في المشغلات مع data-parent="#monaccordeon" .
jQuery web
تظهر منطقة واحدة فقط في وقت واحد
جرب الكود
رؤوس جميلة
يعمل بشكل جيد ولكنه محزن قليلاً بدون لون ، نظرًا لأننا نستخدم مكون اللوحة ، فمن السهل الترتيب (انظر الشكل التالي):

<div class="container">
	<div id="monaccordeon" class="panel-group col-lg-6">
	<h3> Les plugins de Bootstrap</h3>
	<div class="panel panel-info">
		<div class="panel-heading"> 
		<h3 class="panel-title">
		<a href="#item1" data-parent="#monaccordeon" 
		data-toggle="collapse"> 
			Accordéon 
		</a> 
		</h3>
		</div>
		<div id="item1" class="panel-collapse collapse in">
		<div class="panel-body"> Ce plugin permet de créer 
			des effets "accordéon" totalement paramétrables
		</div>
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading"> 
		<h3 class="panel-title">
			<a href="#item2" data-parent="#monaccordeon" 
			data-toggle="collapse"> Fenêtre modale </a> 
		</h3>
		</div>
		<div id="item2" class="panel-collapse collapse">
		<div class="panel-body"> Ce plugin permet de créer 
			des fenêtres modales élégantes avec une grande 
			simplicité. 
		</div>
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading"> 
		<h3 class="panel-title">
			<a href="#item3" data-parent="#monaccordeon" 
			data-toggle="collapse"> Carousel 
		</a> 
		</h3>
		</div>
		<div id="item3" class="panel-collapse collapse">
		<div class="panel-body"> Ce plugin permet de faire 
			défiler des images ou des vidéo, ou tout autre 
			élément média avec une mise 
			en forme esthétique </div>
		</div>
	</div>
	</div>
</div>
jQuery web
الرؤوس الجمالية
تأثير الأكورديون على قائمة مجمعة
لا يقتصر تأثير الأكورديون على المكون panel . على سبيل المثال ، يمكن استخدامه لقائمة مجمعة. فيما يلي مثال للتنفيذ (انظر أيضًا الشكل التالي):

<div class="col-sm-3 col-md-3">
	<div class="panel panel-info">
	<div class="panel-heading">
		<h4 class="panel-title">
		<span id="icone" class="glyphicon glyphicon-folder-close">
			</span> <a data-toggle="collapse" href="#menu">
				Contenu
			</a>
		</h4>
	</div>
	<ul id="menu" class="list-group collapse in">
		<li class="list-group-item"><span 
			class="glyphicon glyphicon-pencil text-primary">
		</span> 
<a href="#"> Articles</a></li>
		<li class="list-group-item"><span 
			class="glyphicon glyphicon-tag text-primary">
		</span> 
<a href="#"> Nouvelles</a></li>
		<li class="list-group-item"><span 
			class="glyphicon glyphicon-file text-primary">
		</span> 
<a href="#">   Lettre d'information</a></li>
		<li class="list-group-item"><span 
			class="glyphicon glyphicon-comment text-success">
		</span> 
		<a class="text-success" href="#">Commentaires</a>
		<span class="badge">28</span>
</li>
	</ul>
	</div>
</div>
jQuery web
تأثير الأكورديون على قائمة مجمعة
جرب الكود
الأمر في جافا سكريبت
يمكنك تفعيل هذا البرنامج المساعد مع Javascript وإطلاق الأوامر على أي عنصر. فيما يلي مثال (ينتج عن الشكل التالي):

<div class="container">
	<div class="col-lg-6">
	<div class="btn-group btn-group-justified" data-toggle="buttons">
		<label class="btn btn-primary active" id="show">
		<input type="radio" name="options">Show
		</label>
		<label class="btn btn-primary" id="hide">
		<input type="radio" name="options">Hide
		</label>
		<label class="btn btn-primary" id="toggle">
		<input type="radio" name="options">Toggle
		</label>
	</div>  
	<div class="panel panel-info">
	<div class="panel-heading"> 
	<h3 class="panel-title"> Je suis le titre de l'accordéon</h3>
	</div>
	<div class="panel-body"> Je suis le contenu de l'accordéon</div>
	</div>
	</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('.panel').collapse();
		$('#show, #hide, #toggle').click(function(){
		$('.panel').collapse($(this).attr('id'));
		});
	});
</script>
jQuery web
باستخدام جافا سكريبت
جرب الكود
يتم تطبيق تأثير الأكورديون هنا على
الفئة التي تحتوي على الفئة panel . يتم تنشيط البرنامج المساعد مع الطريقة collapse . ثم يبدأ أحد الإجراءات على أحد الأزرار الثلاثة في تشغيل الأمر المقابل: إظهار أو إخفاء أو تبديل. لجعل الكود أكثر إيجازًا ، تأكد من أن معرف الأزرار يتوافق مع اسم الأمر.
باستخدام الأحداث
هناك عدة أحداث قابلة للاستخدام لهذا المكون:
حدث وصف
show.bs.collapse عند استدعاء طريقة العرض
shown.bs.collapse عندما تصبح المنطقة مرئية
hide.bs.collapse عند استدعاء لإخفاء الطريقة
hidden.bs.collapse عندما تكون المنطقة مخفية
فيما يلي مثال لاستخدام الحدث shown.bs.collapse ( انظر أيضًا الشكل التالي) :

<div class="container">
	<div id="monaccordeon" class="panel-group col-lg-6">
		<h3> Les plugins de Bootstrap</h3>
		<div class="panel panel-info">
		<div class="panel-heading"> 
			<h3 class="panel-title">
			<a href="#item1" data-parent="#monaccordeon" 
			data-toggle="collapse"> 
				Accordéon 
			</a> 
			</h3>
		</div>
		<div id="item1" class="panel-collapse collapse in">
			<div class="panel-body"> Ce plugin permet de créer 
			des effets "accordéon" totalement paramétrables
			</div>
		</div>
		</div>
		<div class="panel panel-info">
		<div class="panel-heading"> 
			<h3 class="panel-title">
			<a href="#item2" data-parent="#monaccordeon" 
			data-toggle="collapse"> Fenêtre modale </a> 
			</h3>
		</div>
		<div id="item2" class="panel-collapse collapse">
			<div class="panel-body"> Ce plugin permet de 
				créer des fenêtres modales élégantes avec 
				une grande simplicité. 
			</div>
		</div>
		</div>
		<div class="panel panel-info">
		<div class="panel-heading"> 
			<h3 class="panel-title">
			<a href="#item3" data-parent="#monaccordeon" 
			data-toggle="collapse"> Carousel </a> 
			</h3>
		</div>
		<div id="item3" class="panel-collapse collapse">
			<div class="panel-body"> Ce plugin permet de faire 
			défiler des images ou des vidéo, ou tout autre 
			élément média avec une mise 
		en forme esthétique </div>
		</div>
	</div>
	<br>
	<div id="affichage"><span class="label label-warning">"Accordéon" 
		a été affiché !</span>
	</div>
	</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
$(function (){
  $("#item1").on("shown.bs.collapse", function () {
  $("#affichage").html('<span class="label label-warning">"Accordéon" 
  a été affiché !</span>');
  })
  $("#item2").on("shown.bs.collapse", function () {
  $("#affichage").html('<span class="label label-warning">"Fenêtre modale" 
  a été affiché !</span>');
  })
  $("#item3").on("shown.bs.collapse", function () {
  $("#affichage").html('<span class="label label-warning">"Carousel" 
  a été affiché !</span>');
  })
}); 
</script>
jQuery web
باستخدام الأحداث
جرب الكود
الآن ، دعونا نلقي نظرة على مثال ثانٍ ، باستخدام تأثير الأكورديون على قائمة مجمعة مذكورة أعلاه. سيكون من الجمالي للغاية تعديل الكود وفقًا لوضوح القائمة. فقط قم بتعديل الرمز قليلاً عن طريق تحديد القائمة وإضافة القليل من جافا سكريبت (ينتج عن الشكل التالي):

<div class="container">
  <div class="row">
  <div class="col-sm-3 col-md-3">
	 <div class="panel panel-info">
	 <div class="panel-heading">
		 <h4 class="panel-title">
		 <span id="icone" class="glyphicon glyphicon-folder-open">
		 </span> 
		 <a data-toggle="collapse" href="#menu">Contenu</a>
		 </h4>
		</div>
		<ul id="menu" class="list-group collapse in">
		 <li class="list-group-item"><span 
		 class="glyphicon glyphicon-pencil text-primary"></span> 
         <a href="#"> Articles</a></li>
		 <li class="list-group-item"><span 
		 class="glyphicon glyphicon-tag text-primary"></span> 
         <a href="#"> Nouvelles</a></li>
		 <li class="list-group-item"><span 
		 class="glyphicon glyphicon-file text-primary"></span> 
         <a href="#"> Lettre d'information</a></li>
		 <li class="list-group-item"><span 
		 class="glyphicon glyphicon-comment text-success"></span> 
         <a class="text-success" href="#">Commentaires</a>
         <span class="badge">28</span></li>
		</ul>
		</div>
	</div>
	</div>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
	$(function (){
	$('#menu').on('shown.bs.collapse', function () {
		$('#icone').removeClass('glyphicon-folder-close').
		addClass('glyphicon-folder-open');
	})
	$('#menu').on('hidden.bs.collapse', function () {
		$('#icone').removeClass('glyphicon-folder-open').
		addClass('glyphicon-folder-close');
	})
	});
</script>
jQuery web
كلتا الحالتين للقائمة مع تغيير الرمز
جرب الكود
شريط التنقل قابل للسحب
أحد استخدامات عنصر الأكورديون هو جعل شريط التنقل قابلًا للسحب وفقًا لحجم الشاشة ، وبمعنى آخر لجعله مستجيبًا . لقد فعلنا ذلك على سبيل المثال الصفحة (انظر الشكل التالي).
jQuery web
شريط التنقل القابل للسحب في صفحة العينة
جرب الكود
فيما يلي جزء الكود المعني:

<nav class="navbar navbar-inverse" role="navigation">   
	<div class="navbar-header">   
	<button type="button" class="navbar-toggle" data-toggle="collapse" 
	data-target=".navbar-collapse">
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">Les Tigres</a>
	</div>
	<div class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
		<li> <a href="#">Accueil</a> </li>
		<li class="dropdown"> 
		<a data-toggle="dropdown" href="#">Témoignages 
		<b class="caret"></b></a>
		<ul class="dropdown-menu">
			<li><a href="#">Dompteurs</a></li>
			<li><a href="#">Zoos</a></li>
			<li><a href="#">Chasseurs</a></li>
			<li class="divider"></li>
			<li><a href="#">Autres témoignages</a></li>
		</ul>
		</li> 
		<li> <a href="#">Liens</a> </li>
		<li> <a href="#">Références</a> </li>
	</ul>
	<form class="navbar-form navbar-right" role="form">
		<div class="input-group">
		<input type="text" style="width:150px" 
		class="input-sm form-control" placeholder="Recherche">
			<span class="input-group-btn">
			<button type="submit" class="btn btn-primary btn-sm">
			<span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
			</span>
		</div>
	</form>
	</div>
</nav>
نضيف زرًا للتحكم في خطوط تأثير الأكورديون من 3 إلى 7. ثم نقوم بتضمين كل شيء يجب أن يخضع للتأثير مع الفئات collapse و navbar-collapse . بشكل تلقائي ، تحدث نقطة الانتقال (أي ، تشغيل التأثير) عندما تكون الشاشة أقل من 768 بكسل. من الممكن تغيير نقطة النقل هذه عن طريق تعديل ملف Bootstrap LESS . سنرى في الفصل التالي كيفية تعديل Bootstrap لتكييفها مع احتياجاتنا.

التمرير SCROLLSPY


تخطيط مع SCROLLSPY
يتيح لك هذا البرنامج المساعد ربط عناصر التنقل تلقائيًا بمناطق HTML باستخدام التمرير. على سبيل المثال ، غالبًا ما يكون المثال أكثر فاعلية من التفسير ، خاصة بالنسبة لهذا النوع من العمليات ، إليك أسلوب تخطيط يستخدم أكثر فأكثر في المواقع (انظر أيضًا الشكل التالي).

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<link href="assets/css/bootstrap.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar">

<div class="container-fluid">
	<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
		<button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a href="#" class="navbar-brand">La boutique en délire</a>
		</div>
		<div class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#accueil">Accueil</a></li>
			<li><a href="#produits">Produits</a></li>
			<li><a href="#nouvelles">Nouvelles</a></li>
			<li><a href="#localisation">Localisation</a></li>
		</ul>
		</div>
	</div>
	</nav>

	<div class="jumbotron" id="accueil">
	<div class="container">
		<h1 class="well">Bienvenue dans notre espace !</h1>
		<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
		</p>
	</div>
	</div>

	<div class="jumbotron" id="produits">
	<div class="container">
		<h1 class="well">Nos produits attractifs !</h1>
		<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
		</p>
		<hr>
		<div class="row">
		<div class="well">
			<div class="row">
			<div class="col-sm-4">
				<button type="button" class="btn btn-primary btn-lg btn-block">
				<span class="glyphicon glyphicon-wrench"></span><br>Outillage
				</button>
			</div>
			<div class="col-sm-4">
				<button type="button" class="btn btn-primary btn-lg btn-block">
				<span class="glyphicon glyphicon-fire"></span><br>Incendie
				</button>
			</div>
			<div class="col-sm-4">
				<button type="button" class="btn btn-primary btn-lg btn-block">
				<span class="glyphicon glyphicon-home"></span><br>Habitation
				</button>
			</div>
			</div>
		</div>
		</div>     
		<hr>
	</div>
	</div>

	<div class="jumbotron" id="nouvelles">
	<div class="container">
		<h1 class="well">Les nouvelles de nos activités !</h1>
		<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
		</p>
		<hr>
		<div class="row">
		<div class="well">
			<div class="row">
			<div class="col-sm-4">
				<button type="button" class="btn btn-info btn-lg btn-block">
				<span class="glyphicon glyphicon-wrench"></span><br>Outillage
				</button>
			</div>
			<div class="col-sm-4">
				<button type="button" class="btn btn-info btn-lg btn-block">
				<span class="glyphicon glyphicon-fire"></span><br>Incendie
				</button>
			</div>
			<div class="col-sm-4">
				<button type="button" class="btn btn-info btn-lg btn-block">
				<span class="glyphicon glyphicon-home"></span><br>Habitation
				</button>
			</div>
			</div>
		</div>
		</div>     
		<hr>
	</div>
	</div>

	<div class="jumbotron" id="localisation">
	<div class="container">
		<h1 class="well">L'emplacement de nos boutiques !</h1>
		<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
		</p>
		<hr>
		<div class="row">
		<div class="well">
			<div class="row">
			<div class="col-sm-4">
				<button type="button" class="btn btn-warning btn-lg btn-block">
				<span class="glyphicon glyphicon-wrench"></span><br>Outillage
				</button>
			</div>
			<div class="col-sm-4">
				<button type="button" class="btn btn-warning btn-lg btn-block">
				<span class="glyphicon glyphicon-fire"></span><br>Incendie
				</button>
			</div>
			<div class="col-sm-4">
				<button type="button" class="btn btn-warning btn-lg btn-block">
				<span class="glyphicon glyphicon-home"></span><br>Habitation
				</button>
			</div>
			</div>
		</div>
		</div>     
		<hr>
	</div>
	</div>

</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
jQuery web
تخطيط مع Scrollspy
جرب الكود
المبدأ بسيط. من الضروري تطبيق المكوّن الإضافي مع السمة data-spy="scroll" ونقطة التنقل باستخدام data-target :

<body data-spy="scroll" data-target=".navbar">
ثم نقوم بإنشاء التنقل الذي يشير إلى مناطق لتظهر دون إضافة فئات أخرى ، تكون العملية تلقائية.
الحركة FLUID
المثال يعمل بشكل صحيح ، ولكن يمكننا أن نأسف على وحشية الحركة. تظهر المنطقة المطلوبة تلقائيًا ، ولا تفهم حقًا وجود التمرير. سيكون أكثر أناقة أن يكون لديك حركة سائلة(fluid) للانتقال من منطقة إلى أخرى. هذا غير متوقع في المكون الإضافي ، ولكن مع بعض سطور Javascript يمكننا تحقيق ذلك:

$(function () {
	$('li>a').on('click', function(e) {
	e.preventDefault();
	var hash = this.hash;
	$('html, body').animate({
		scrollTop: $(this.hash).offset().top
	}, 1000, function(){
		window.location.hash = hash;
	});
	});
});
جرب الكود
تفعيل جافا سكريبت
لقد رأينا في المثال أن البرنامج المساعد يمكن تنفيذه ببساطة باستخدام خاصية "data" . من الممكن أيضًا القيام بذلك في Javascript . لاختبار هذا الاحتمال ، أزل سمات العلامة body وأضف هذا السطر من Javascript :

$('body').scrollspy({ target: '.navbar' });
جرب الكود
لديك أيضًا الحدث activate.bs.scrollspy الذي يتم تشغيله عند عرض منطقة جديدة. فائدة هذا الحدث ليست واضحة ، ولكن إذا كنت في حاجة إليها فإن بناء الجملة هو:

$('#monScrollspy').on('activate.bs.scrollspy', function () {
	//...
})

في الخلاصة


  • يقدم Bootstrap مجموعة من الإضافات jQuery التي يسهل تنفيذها.
  • تسمح القوائم المنسدلة بعرض روابط النص ، والتي يمكن إضافة الرموز والرؤوس إليها. يمكنهم الاندماج مع شريط التنقل أو زر. يمكننا إنشاء قوائم فرعية عن طريق إضافة بعض الأنماط إلى الإطار.
  • تسمح النوافذ المشروطة بعرض المعلومات. يمكن أن تشمل العنوان والمحتوى وتذييل الصفحة. يمكنك حتى حقن صفحة HTML .
  • تتيح لك علامات التبويب الموجودة على نفس المساحة عرض معلومات متعددة بنقرة واحدة. يسهل تنظيم علامات التبويب: أفقية ، مكدسة ، يمينًا أو يسارًا ، روابط أو أزرار بسيطة. يمكنك أيضًا دمج قائمة منسدلة في علامة تبويب.
  • يمكننا إنشاء أزرار "تبديل" ، أو مع تأثير "الراديو" أو "خانة اختيار" ، أو في انتظار نهاية العملية.
  • يسمح لك الكاروسيل بتمرير الصور مع إمكانية إضافة تعليق حسب الصورة ، وأزرار التمرير وضبط سرعة التمرير.
  • تتيح تلميحات الأدوات عرض نص إعلامي صغير أثناء التمرير فوق عنصر ما ، كما تتيح النوافذ المنبثقة محتوى أكثر ثراءً.
  • يجعل تأثير الأكورديون من الممكن إظهار أو إخفاء مساحة من الصفحة. من الممكن إضافة رؤوس ودمج القوائم المجمعة. يتم استخدامه بشكل خاص لجعل شريط التنقل قابل للسحب.
  • يتيح لك Scrollspy ربط عناصر التنقل تلقائيًا بمناطق HTML باستخدام التمرير. يستخدم بشكل متزايد على المواقع.