Introduction et utilisation du plug-in Bootstrap

Présentation du plugin Bootstrap
Les composants abordés dans le chapitre précédent sur les composants de mise en page ne sont que le début. Les 12 plug-ins jQuery fournis avec Bootstrap ont des fonctions étendues et peuvent ajouter davantage d'interactions au site. Même si vous n'êtes pas un développeur js avancé,
vous pouvez apprendre le plugin js de Bootstrap. Grâce à l'API Bootstrap Data, la plupart des plug-ins peuvent être déclenchés sans écrire de code.
Il existe deux manières pour le site de référencer le plug-in bootstrap :
Référence séparée : utilisez des fichiers *.js individuels de Bootstrap. Certains plugins et composants CSS dépendent d’autres plugins. Si vous référencez des plugins individuellement, assurez-vous d'abord de déterminer les dépendances entre ces plugins.
Compilez la référence (simultanée) : utilisez Bootstrap.js ou la version compressée de bootstrap.min.js
N'essayez pas de référencer les deux fichiers en même temps, car bootstrap.js et bootstrap.min.js contiennent tous deux tous les plugins.
Tous les plugins dépendent de jQuery. JQuery doit donc être cité avant le fichier du plug-in. Veuillez visiter bower.json pour afficher la version de jQuery actuellement prise en charge par boostrap.
attribut de données
Vous pouvez utiliser tous les plug-ins d'amorçage uniquement via l'API d'attribut de données sans écrire une ligne de code javascript. Il s'agit de l'API de première classe en bootstrap et devrait être votre méthode préférée.
Là encore, il peut y avoir des situations dans lesquelles vous devrez désactiver la fonctionnalité. Par conséquent, nous fournissons également une méthode pour désactiver l’API d’attribut de données, c’est-à-dire pour débloquer l’événement lié au document avec l’espace de noms data-api. Comme ceci :
$(document).off('.data-api')
Si vous devez désactiver un plug-in spécifique, il vous suffit d'ajouter le nom du plug-in avant le espace de noms data-api, comme indiqué ci-dessous :
$(document).off('.alert.data-api')
API programmatique
Nous fournissons une API javascript pure pour tous les plug-ins Bootstrap. Toutes les API publiques prennent en charge les méthodes d'appel individuelles ou en chaîne et renvoient une collection d'éléments pour toutes les opérations (remarque : le formulaire d'appel est cohérent avec jQuery).
$('.btn.danger').button('toggle').addClass('fat')

Importer

[Importation unique]

Bootstrap fournit un fichier unique qui contient tous les plug-ins JavaScript de Bootstrap, à savoir bootstrap.js (version compressée : bootstrap.min.js)

[Import individuel]

Pour faciliter l'import séparé des fichiers d'effets spéciaux, Bootstrap fournit 12 plug-ins JavaScript, ce sont :

　☑ Transitions d'animation (Transitions) : le fichier de plug-in correspondant "transition.js"

☑Fenêtre pop-up Module Modal (Modal) : le fichier du plug-in correspondant "modal.js"

　☑ Menu déroulant (Dropdown) : le fichier du plug-in correspondant "dropdown.js"

　☑ Détection de défilement (Scrollspy ) : Le fichier du plug-in correspondant "scrollspy.js"

　☑ Onglet : Le fichier du plug-in correspondant "tab.js"

　☑ Info-bulles : Le fichier plug-in correspondant "tooltop.js"

　☑ Boîte pop-up (Popover) : le fichier plug-in correspondant "popover.js"

　☑ Boîte d'alerte (Alert) : le fichier de plug-in correspondant "alert.js"

　☑ Boutons : Le fichier de plug-in correspondant "button.js"

　☑ Collapse/Accordion : Le fichier de plug-in correspondant "collapse. js"

　☑ Carrousel d'images Carrousel : Le fichier plug-in correspondant "carousel.js"

　☑ Positionnement automatique de la bouée Affix : Le fichier plug-in correspondant "affix.js"

attribut de données

Oui Tous les plug-ins Bootstrap peuvent être utilisés simplement via l'API d'attribut de données sans écrire une seule ligne de code JavaScript. Il s'agit d'une API de première classe dans Bootstrap et devrait être l'approche privilégiée.

Là encore, dans certains cas, cette fonctionnalité devra peut-être être désactivée. Par conséquent, une méthode est également fournie pour fermer l'API d'attribut de données, c'est-à-dire pour débloquer l'événement lié au document avec data-api comme espace de noms. Comme ce qui suit :

$(document).off('.data-api')

De plus, s'il s'agit d'un plug-in spécifique, ajoutez simplement le nom de ce plug-in comme espace de noms devant data-api , comme suit :

$(document).off('.alert.data-api')

API

Bootstrap fournit une API JavaScript pure pour tous les plugins. Toutes les API publiques prennent en charge les méthodes d'appel individuelles ou en chaîne et renvoient l'ensemble des éléments sur lesquels elles opèrent, ce qui est cohérent avec le formulaire d'appel de jQuery

$('.btn.danger').button('toggle').addClass('fat')

Toutes les méthodes peuvent accepter un objet option facultatif. en paramètre, ou une chaîne représentant une méthode spécifique, ou ne fournissant rien (auquel cas le plugin sera initialisé avec les valeurs par défaut)

$('#myModal').modal()                      // 以默认值初始化$('#myModal').modal({ keyboard: false })   // initialized with no keyboard$('#myModal').modal('show')                // 初始化后立即调用 show 方法

　　每个插件还通过 Constructor 属性暴露了其原始的构造函数：$.fn.popover.Constructor。如果想获取某个插件的实例，可以直接通过页面元素获取：$('[rel="popover"]').data('popover')

【默认设置】

　　每个插件都可以通过修改其自身的 Constructor.DEFAULTS 对象从而改变插件的默认设置：

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

【避免命名空间冲突】

　　某些时候可能需要将 Bootstrap 插件与其他 UI 框架共同使用。在这种情况下，命名空间冲突随时可能发生。如果不幸发生了这种情况，可以通过调用插件的 .noConflict 方法恢复其原始值

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

【事件】

　　Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词(如shown)表示在动作执行完毕之后被触发。

　　所有 Bootstrap 事件的名称都采用命名空间方式。所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予在动作开始执行前将其停止的能力

$('#myModal').on('show.bs.modal', function (e) {  if (!data) return e.preventDefault() // 阻止模态框的展示})

过渡效果

　　Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

　　☑ 调用统一编译的bootstrap.js；

　　☑ 调用单一的过渡动画的JavaScript插件文件transition.js

　　transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果

　　默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

　　☑ 模态弹出窗（Modal）的滑动和渐变效果；

　　☑ 选项卡（Tab）的渐变效果；

　　☑ 警告框（Alert）的渐变效果；

　　☑ 图片轮播（Carousel）的滑动效果

　　transition.js 是针对 transitionEnd 事件的一个基本辅助工具，也是对 CSS 过渡效果的模拟。它被其它插件用来检测当前浏览器对是否支持 CSS 的过渡效果

　　通过下面的代码可以在全局范围禁用过渡效果，并且必须将此代码放在transition.js(或bootstrap.js或bootstrap.min.js)后面，确保在js文件加载完毕后再执行下面代码

$.support.transition = false

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!