30-列表组-面板-Affix插件使用

列表组

列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。

基本使用：

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>Code language: HTML, XML (xml)

徽章，给列表组加入徽章组件，它会自动被放在右边：

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>Code language: HTML, XML (xml)

列表组还可以是一个a标签：

<div class="list-group">
  <a href="#" class="list-group-item active">Cras justo odio</a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>Code language: HTML, XML (xml)

按钮，列表组中的元素也可以直接就是按钮：

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>Code language: HTML, XML (xml)

面板

虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。

最基本的用法：

<div class="panel panel-default"> 
  <div class="panel-body">Basic panel example</div> 
</div>Code language: HTML, XML (xml)

还可以带有头和脚：

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>Code language: HTML, XML (xml)

顶部栏可以增加一个颜色：

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>Code language: HTML, XML (xml)

Affix 插件使用

Affix 插件可以将内容固定在页面上的某个位置，也可以启用或禁用通过 CSS 来切换定位。

基本用法，通过 data-spy="affix" 属性：

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>Code language: HTML, XML (xml)

通过 JavaScript 调用：

$('#myAffix').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})Code language: JavaScript (javascript)

配合 CSS 类使用，Affix 插件在三种不同状态下会切换不同的 CSS 类：.affix、.affix-top、.affix-bottom。通常需要为 .affix 设置 position: fixed; 来固定位置：

.affix {
  position: fixed;
  top: 20px;
}Code language: CSS (css)