AdminLte学习记录二_box

adminLTE的box是它样式中的主要组成部分,

下面基本上列举出来所有的样式和插件,另外我们可以直接在F12的调试窗口(在adminLTE官网上),选中我们想要的样式,直接复制粘贴。

以下是我用过的几个例子,这是adminLTE的box中几种分类,若是没有自己想要的样式,可到官网上去提取想要的格式


1、info-box

Messages 1,410



2、info-box 标题带背景

Bookmarks 41,410
70% Increase in 30 Days



3、small-box 带背景

150

New Orders

More info
AdminLte学习记录二_box_第1张图片



4、box 默认样式

Expandable

The body of the box



5、box 成功样式 标题solid(可删除box)

Removable

The body of the box



6、box 聊天对话框

Direct Chat

3
Alexander Pierce 23 Jan 2:00 pm
Message User Image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
Message User Image
You better believe it!

AdminLte学习记录二_box_第2张图片



7、用户头像

Elizabeth Pierce

Web Designer
User Avatar
AdminLte学习记录二_box_第3张图片

8、小窗口样式

User Image Jonathan Burke Jr. Shared publicly - 7:30 PM Today
Photo

I took this photo this morning. What do you guys think?

127 likes - 3 comments

AdminLte学习记录二_box_第4张图片 AdminLte学习记录二_box_第5张图片


9、信息框info-box

  
  
    
CPU Traffic 90%


10、常用框

名称

3 8 New Members

Sales: 1 Jan, 2014 - 30 Jul, 2014

AdminLte学习记录二_box_第6张图片


11、对话框


Alexander Pierce 23 Jan 2:00 pm
message user image
Is this template really for free? That's unbelievable!
Sarah Bullock 23 Jan 2:05 pm
message user image
You better believe it!
123
AdminLte学习记录二_box_第7张图片


12、信息框2

Inventory 5,200
50% Increase in 30 Days




你可能感兴趣的:(AdminLte学习记录二_box)