Twitter Bootstrap 中的数据切换属性

在 Twitter Bootstrap 中，可以使用数据切换属性来实现页面元素的切换和交互效果，包括标签页、按钮组、折叠面板等。这些属性通常都以 data- 开头，可以通过 HTML 属性或 JavaScript 代码来操作。

标签页

通过 data-toggle="tab" 属性和 href 属性相结合，可以实现标签页的切换效果。

示例：

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Home Content</div>
  <div class="tab-pane" id="profile">Profile Content</div>
  <div class="tab-pane" id="messages">Messages Content</div>
  <div class="tab-pane" id="settings">Settings Content</div>
</div>

解释：

• ul 元素创建标签页导航栏，每个导航项都是一个 li 元素。
• a 元素作为导航项的链接，使用 data-toggle="tab" 属性和 href 属性实现切换效果。
• div 元素中使用 class="tab-pane" 表示一个标签页内容项，使用 id 属性指定该项的标识符。

按钮组

通过 data-toggle="buttons" 属性，可以实现按钮组的切换效果，类似于单选框和复选框。

示例：

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

解释：

• div 元素创建按钮组，使用 data-toggle="buttons" 属性实现切换效果。
• label 元素作为按钮，使用 class="btn" 和 class="btn-primary" 来设置样式。
• input 元素设置按钮的选项，使用 type="radio" 和 name 属性来实现单选和复选。

折叠面板

通过 data-toggle="collapse" 属性和 href 属性相结合，可以实现折叠面板的切换效果。

示例：

<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">Collapsible Group Item #1</a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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">Collapsible Group Item #2</a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
  </div>
</div>

解释：

• div 元素创建折叠面板，使用 id="accordion" 属性来指定面板组的标识符。
• div 元素作为面板，使用 class="panel" 和 class="panel-default" 来设置样式。
• div 元素的首个子元素是面板标题，使用 class="panel-heading" 和 a 元素来实现。
• a 元素使用 data-toggle="collapse" 属性和 href 属性实现折叠效果，而 data-parent="#accordion" 属性指定面板组为当前面板的父项。
• div 元素是面板内容，使用 class="panel-collapse collapse" 来设置初始状态。其中 id 属性为面板内容部分的标识符，需要和面板标题中的 href 属性一致。

以上就是 Twitter Bootstrap 中的数据切换属性的用法和示例。可以根据具体的需求进行调整和扩展，实现更复杂的交互效果。