# 面板/Panel 创建拥有不同样式的布局盒。 UIKit使用面板勾勒网页内容中的某些部分，它可以拥有不同的样式。通常，面板被布置在[网格组件](grid.html)的网格列中。 * * * ## 用法 面板组件由面板本身，面板标题和面板徽章组成。为了防止产生多余的空白，面板内容顶部和底部的maigin都被移除了。 | Class | 描述 | | --- | --- | | `.uk-panel` | 为`&lt;div&gt;`元素添加这个类，定义面板组件。 | | `.uk-panel-title` | 为标题元素添加这个类创建面板标题。 | | `.uk-panel-badge` | 为 `&lt;div&gt;` 元素添加这个类创建一个面板的徽章。风格化徽章样式最简单的方法，就是通过加入[徽章组件](badge.html)中的修饰符类。 | ### Example  注意默认情况下，面板是空白的也没有样式。因此，为面板添加修饰符类的样式是很重要的。在例子中，我们使用了 `.uk-panel-box` 类。 ### Markup ``` <div class="uk-panel"> <div class="uk-panel-badge uk-badge">...</div> <h3 class="uk-panel-title">...</h3> ... </div> ``` * * * ### 网格中的面板Panels in a grid 这是一个关于如何在[网格组件](grid.html)中使用面板的简单例子。两个面板都使用了`.uk-width-medium-1-2`类。 #### Example  #### Markup ``` <div class="uk-grid"> <div class="uk-width-medium-1-2"> <div class="uk-panel">...</div> </div> <div class="uk-width-medium-1-2"> <div class="uk-panel">...</div> </div> </div> ``` * * * ## 修饰 使用修饰类为面板添加一个特定的样式是很有必要的。UIkit含有多种面板修饰，你也可以自己创建。 ### 面板框 添加 `.uk-panel-box` 类来创建一个可见的面板框。这是默认的面板修饰样式。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-box">...</div> ``` 注意 为面板创建鼠标经过效果，只需添加 `.uk-panel-box-hover` 类。这将在使用锚文本时带来方便。 * * * ### 醒目的面板盒/Panel box primary 添加 `.uk-panel-box-primary` 类来修饰面板框，并以不同的颜色使其显得突出。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-box uk-panel-box-primary">...</div> ``` 注意 为面板创建鼠标经过效果，只需添加 `.uk-panel-box-primary-hover` 类。这将在使用锚文本时带来方便。 * * * ### 次要的面板盒/Panel box secondary 为面板框添加 `.uk-panel-box-secondary` 类，给它一个白色的背景。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div> ``` 注意 为面板创建鼠标经过效果，只需添加 `.uk-panel-box-secondary-hover` 类。这将在使用锚文本时带来方便。 * * * ### 鼠标经过面板/Panel hover 添加 `.uk-panel-hover` 类为面板天鼠标经过效果，这将为用作锚的面板带来便利。 #### Example  #### Markup ``` <a class="uk-panel uk-panel-hover" href="">...</a> ``` * * * ### 面板标题/Panel header 添加`.uk-panel-header`类，用一条水平线分隔面板的标题和内容。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-header">...</div> ``` * * * ### 面板间距 添加 `.uk-panel-space` 添加类来增加面板四周的间距。 #### Example  #### Markup ``` <div class="uk-panel uk-panel-space">...</div> ``` * * * ### 面板分隔线 添加 `.uk-panel-divider` 类将垂直堆叠的面板用水平线进行分隔。 #### Example  #### Markup ``` <div class="uk-grid"> <div class="uk-width-medium-1-2"> <div class="uk-panel uk-panel-divider">...</div> <div class="uk-panel uk-panel-divider">...</div> <div class="uk-panel uk-panel-divider">...</div> </div> </div> ``` 注意使用[网格组件](grid.html) 中的 `.uk-grid-divider` 类分隔网格列。 * * * ## 带图片预览的面板框 为了在一个面板内显示不带有任何边框的图片，仅需添加`.uk-panel-teaser`类至该面板内部的`&lt;div&gt;`元素。 ### Example  ### Markup ``` <div class="uk-panel uk-panel-box"> <div class="uk-panel-teaser"> <img src="" alt=""> </div> </div> ``` * * * ## 带图标的面板 在面板标题中为`&lt;i&gt;`或`&lt;span&gt;`元素添加一个`.uk-icon-*`类，可以轻松地将 [图标组件](icon.html)中的图标应用在面板中。 ### Example  #### Markup ``` <div class="uk-panel"> <h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3> </div> ```