JavaScript结合Bootstrap仿微信后台多图文界面管理

这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

js模仿微信后台管理的多图文界面，集成了ajax异步上传文件的插件，供大家参考，具体内容如下

效果图：

详细代码：

html:

`<``div` `id``=``"wrap"``>`
`<``div` `id``=``"sidebar"``>`
`<``div` `class``=``"previewBox"``>`
`<!-- <p style="margin:10px 14px 0 14px;"><span class="msg-date">2013-08-14</span></p>-->`
`<``div` `class``=``"cover"` `onmouseout``=``"removeCover(this);"`
`onmouseover``=``"showCover(this);"``>`
`<``h4` `class``=``"msg-t"` `style``=``"width: 320px;"` `id``=``"title2div0"``>`
`标题<``span` `class``=``"i-title"``></``span``>`
`</``h4``>`
`<``img` `src``=``"../assets/homer_admin-v1.5/images/2.png"` `style``=``"width: 320px;"` `/>`
`<``ul` `class``=``"abs tc sub-msg-opr"`
`style``=``"margin: 10px 10px; height: 150px; width: 320px;"``>`
`<``a` `class``=``"th"` `href``=``"javascript:void(0)"` `onclick``=``"editDiv('div0')"``>`
`<``div` `style``=``"width: 320px; height: 120px; font-size: 16px;"``>`
`编辑</``div``>`
`</``a``>`
`</``ul``>`
`</``div``>`
`</``div``>`
`<``div` `class``=``"sub-add"``>`
`<``a` `class``=``"block tc sub-add-btn"` `href``=``"#"` `id``=``"add"``> <``span`
`class``=``"vm dib sub-add-icon"``></``span``>增加一条`
`</``a``>`
`</``div``>`
`</``div``>`
`<``div` `id``=``"main"``>`
`<``div` `class``=``"msg-editer"` `id``=``"div0"``>`
`<``form` `method``=``"POST"` `enctype``=``"multipart/form-data"` `action``=``""``>`
`<``label` `class``=``"block"` `for``=``""``>标题</``label``> <``input` `type``=``"text"`
`name``=``"Title"` `value``=``"第0个"` `id``=``"titlediv0"`
`onchange``=``"setTitle('div0')"` `class``=``"msg-input"` `/> <``label`
`class``=