面板干啥的
如图，一个面板由3部分组成
image.png
举个例子
如下，首先创建面板组件，再div中添加uk-panel类可以。接下来创建面板徽章。添加uk-badge类。之后是面板标题，以及内容。
<div class="uk-panel">
<div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
<h3 class="uk-panel-title">Title</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
结果如下
image.png
在grid中创建面板
既然grid是用来布局的，那么布局里面当然是可以放面板的。
首先创建grid。
然后在创建两块区域，uk-width-1-2之后分别把面板嵌套在这两块区域里面。
<div class="uk-grid">
<div class="uk-width-1-2">
<div class="uk-panel">
<div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
<h3 class="uk-panel-title">Title</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</div>
<div class="uk-width-1-2">
<div class="uk-panel">
<div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
<h3 class="uk-panel-title">Title</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</div>
</div>
结果如下
image.png
给面板添加修饰
比如uk-panel-box可以为面板添加边框。当然你也可以利用传统的css自定义边框。
<div class="uk-panel uk-panel-box">
<div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
<h3 class="uk-panel-title">Title</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</div>
结果如下可以看到这个uk-panel-box还自带阴影效果。
image.png
面板添加背景色，只要加上uk-panel-box-primary 类即可，结果背景色变了
image.png
鼠标经过效果
什么意思呢？就是说鼠经过面板之前面板是一个风格，经过面板时是另一个风格，类似hover 。这个添加uk-panerl-hover类就可以
给标题和内容添加分割线
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
<div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
<h3 class="uk-panel-title">Title</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</div>
结果如下
image.png
就是添加一个uk-panel-header而已。
带图标的面板
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
<div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
<h3 class="uk-panel-title"><i class="uk-icon-user"></i>Title</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</div>
在面板标题内添加一个图标即可。
结果如下
image.png
带图片的面板
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-panel-header">
<div class="uk-panel-teaser">
<img src="data:image">
</div>
<div class="uk-panel-badge uk-badge uk-badge-success">Hot</div>
<h3 class="uk-panel-title"><i class="uk-icon-user"></i>Title</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
</div>
</div>
结果如下
image.png
这个得添加一个div，这个div还得添加一个叫做uk-panel-teaser的类，然后把图片嵌在里面就好了。
