Effondrement du bootstrap


Bootstrap Plugin Collapse

Le plugin Collapse facilite la réduction des zones de page. Que vous l'utilisiez pour créer une navigation en accordéon ou des panneaux de contenu, il permet de nombreuses options de contenu.

Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencer collapse.js. Vous devez également référencer le plugin Transition dans votre version Bootstrap. Alternativement, comme mentionné dans le chapitre Présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou la version minifiée de bootstrap.min.js.

Vous pouvez utiliser le plugin Collapse :

  • Créer des groupes ou accordéons pliables , comme indiqué ci-dessous :

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 折叠面板</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseOne">
          点击我进行展开，再次点击我进行折叠。第 1 部分
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseTwo">
          点击我进行展开，再次点击我进行折叠。第 2 部分
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseThree">
          点击我进行展开，再次点击我进行折叠。第 3 部分
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
        vice lomo.
      </div>
    </div>
  </div>
</div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" " pour afficher des exemples en ligne

    1. data-toggle="collapse" Ajoutez au lien le composant que vous souhaitez développer ou réduire. L'attribut

    2. href ou data-target est ajouté au composant parent et sa valeur est l'id< du composant enfant. 🎜>. L'attribut

    3. data-parent ajoute l'identifiant de l'accordéon au lien du composant à développer ou à réduire.

  • Créez un simple pliable sans la balise accordéon, comme indiqué ci-dessous :

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 简单的可折叠组件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<button type="button" class="btn btn-primary" data-toggle="collapse" 
   data-target="#demo">
   简单的可折叠组件
</button>

<div id="demo" class="collapse in">
  Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
  cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
  vice lomo.
</div>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

  • Comme vous pouvez le voir dans l'exemple, nous avons créé un composant pliable et contrairement à l'accordéon, nous n'avons pas ajouté l'attribut

    data-parent .

Utilisation

Le tableau suivant répertorie les classes utilisées par le plugin Collapse pour gérer une mise à l'échelle importante :

Vous pouvez utiliser le plugin Collapse des deux manières suivantes :

  • Avec l'attribut data : ajoutez data-toggle=" à l'élément cliff" et data-target, attribuent automatiquement des contrôles aux éléments réductibles. L'attribut data-target accepte un sélecteur CSS et lui appliquera un effet de réduction. Assurez-vous d'ajouter la classe .collapse à l'élément pliable. Si vous souhaitez qu'il soit activé par défaut, ajoutez une classe supplémentaire .in.

    Pour ajouter une gestion de regroupement en accordéon à un contrôle réductible, ajoutez l'attribut de données data-parent="#selector".

  • Via JavaScript : La méthode de réduction peut être activée via JavaScript comme suit :

$(' .collapse').collapse()

Options

Certaines options sont transmises via l'attribut data ou JavaScript. Le tableau suivant répertorie ces options :

选项名称类型/默认值Data 属性名称描述
parentselector
默认值：false		data-parent如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。
toggleboolean
默认值：true		data-toggle切换调用可折叠元素。

Méthodes

Voici quelques méthodes utiles dans le plugin Collapse :

< tbody>
MéthodeDescriptionInstance
方法描述实例
Options: .collapse(options)激活内容为可折叠元素。接受一个可选的 options 对象。
$('#identifier').collapse({
  toggle: false
})
Toggle: .collapse('toggle')切换显示/隐藏可折叠元素。
$('#identifier').collapse('toggle')
Show: .collapse('show')显示可折叠元素。
$('#identifier').collapse('show')
Hide: .collapse('hide')隐藏可折叠元素。
$('#identifier').collapse('hide')
Options :< 🎜> .collapse (options)		Activer le contenu en tant qu'élément pliable. Accepte un objet d'options facultatif. 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 折叠（Collapse）插件方法</title>
  <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
   <div class="panel panel-default">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseOne">
               点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
            </a>
         </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-success">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseTwo">
               点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
            </a>
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseThree">
               点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
   <div class="panel panel-warning">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseFour">
               点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
            </a>
         </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
            nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
            lomo.
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>  

</body>
</html>
<🎜>Basculer :<🎜> .collapse('toggle')Activer/masquer l'élément pliable . 
$('#identifier').on('show.bs.collapse', function () {
  // 执行一些动作...
})
<🎜>Afficher :<🎜> .collapse('show')Afficher les éléments pliables. 
$('#identifier').on('shown.bs.collapse', function () {
  // 执行一些动作...
})
<🎜>Masquer :<🎜> .collapse('hide')Masquer les éléments réductibles. 
$('#identifier').on('hide.bs.collapse', function () {
  // 执行一些动作...
})

Exemple

L'exemple suivant montre l'utilisation de la méthode

Exemple

$('#identifier').on('hidden.bs.collapse', function () {
  // 执行一些动作...
})

Exécuter l'exemple»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Événements

Le tableau suivant répertorie les événements utilisés dans le plug-in Collapse. Ces événements peuvent être utilisés comme hooks dans les fonctions.

事件描述实例
show.bs.collapse在调用 show 方法后触发该事件。
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 折叠（Collapse）插件事件</title>
    <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
     <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="panel-group" id="accordion">
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" 
               href="#collapseexample">
               点击我进行展开，再次点击我进行折叠。--shown 事件
            </a>
         </h4>
      </div>
      <div id="collapseexample" class="panel-collapse collapse">
         <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. 
            Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>
</div>

<script type="text/javascript">
   $(function () { 
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('嘿，当您展开时会提示本警告');})
   });
</script> 


</body>
</html>
shown.bs.collapse当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。rrreee
hide.bs.collapse当调用 hide 实例方法时立即触发该事件。rrreee
hidden.bs.collapse当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。rrreee

Exemple

L'exemple suivant illustre l'utilisation des événements :

Instance

rrreee

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne