Bootstrap可视化布局系统使用文档

 利用Bootstrap可视化布局系统可以拖拽生成统一的基本的样式布局HTML代码,对于没有前端介入的情况下,java开发也能快速搭建一套标准美观的后台系统,使用简单、方便、灵活。可视化布局系统地址:http://www.bootcss.com/p/layoutit/。另外bootstrap提供了一整套CSS样式,可以满足后台系统所有样式需求,不用依赖前端开发,想要什么样式先到这里找找http://v3.bootcss.com/css/,一定能找到你想要的。

可视化布局系统默认提供的样式有以下几种:

  1. 布局设置,利用bootstrap的栅格系统样式,默认提供了5种可拖拽布局。理解了bootstrap的栅格系统样式,可以通过更改样式来满足我们任意想要的布局。

栅格系统样式:
     

  1. 基本CSS,默认提供了常用的一些DOM元素和组件,比如表格、表单、搜索框等。后台系统的信息管理页面必然会用到这些,即使没有前端,利用可视化布局也能做出统一漂亮的后台管理页面来。
  2. 组件,默认提供了常用的组件样式,例如按钮组,导航,分页等。
  3. 交互组件,提供了常用的交互组件样式,例如:遮罩窗体、导航栏、轮换图、切换卡等。

          

使用说明:

第一步:拖拽布局设置。

第二步:拖拽表格。

第三步:拖拽分页。

第四步:布局编辑和预览

第五步:下载代码
附件有示例操作视频,可下载观看!!!

时间: 2025-01-30 11:22:33

Bootstrap可视化布局系统使用文档的相关文章

Win8系统帮助文档打不开怎么办?

Win8系统帮助文档打不开怎么办?          当我们在使用win8系统电脑的过程中遇到问题时,可以借助windows系统帮助文档来进行分析问题,及时解决故障问题.但是最近有用户发现win8系统帮助文档打不开,这是怎么回事呢?如何解决系统帮助文档打不开问题呢?不要着急,小编整理出一些解决方法给大家,有需要的可以看看. 解决方法: 1.一般情况下无法显示网页:右键 chm文件属性里最下面有个"解除锁定",点击"解除锁定"按钮就可以了; 2.如果没有解除锁定,由于

Win7系统WPS文档取消不设置密码的方法

  Win7系统WPS文档取消不设置密码的方法: 1.打开WPS文档,点击最左上方"WPS文字",展开下方功能项;注意:需要记住文档原来的密码,打开文档后才可以取消; 2.在下方功能项里找"文件信息"项,点击展开,出现"文件加密(Y)"."属性(I)"两项; 3.点击"文件加密(Y)"项,出现"安全"对话框; 4.将"打开文件密码"和"再次键入密码"

win7系统word文档计算器功能怎么用?

  win7系统word文档计算器功能怎么用?          具体方法如下: 1.其实Word中早已内置了一个简易版"计算器"组件,位置就在"文件"→"选项"→"自定义功能区"中,点击"不在功能区中的命令"; 2.然后从列表中查找一项名为"计算"的组件,通过"添加"按钮将其添加到一个新选项卡后即可; 2.添加好的计算器如何使用呢?很简单,首先在Word中打入要计算

win8系统word文档设置为只读文件的方法

  1.返回到win8系统的传统桌面位置,同时按下win8电脑键盘上的win+R快捷键打开电脑的运行窗口,在打开的运行窗口中,输入netplwiz并单击回车; 文档设置为只读文件的方法-mac系统word文档只读"> 2.屏幕中就会弹出用户账户设置的界面了,需要在该窗口中选中你的用户名,点击属性按钮.然后在弹出窗口,选择"组成员"页面; 3.最后选中其他选项,并且在下拉列表里选择Administrators,完成之后,点击窗口下方的确定按钮进行保存就可以了. 为保证文件

css+div布局要素:文档流position属性 父级对象和同级对象

div+css布局要素:文档流position属性.父级对象和同级对象.从学div+css以来,一直对position几个属性的理解不够清晰.自己对position这一属性有了更深入和清晰的认识,同时让自己对整个div+css布局有了更深入的认识. 因为div实质是一个四方块,被很多业界人士形象的比喻成盒子.那么div+css布局的过程其实就是摆放这些盒子的过程.最近一周来,专门针对这个问题进行了深入的思考和研究.结果通过对这一问题的研究不仅让自己对position这一属性有了更深入和清晰的认识

win7系统word文档设置图片有倒影效果的方法

  word文档一款文字处理器,可以编辑和排版文字,有时候编辑word文档为了能够让内容更加生动,我们会配上图片.win7旗舰版系统中word文档中插入一张图片,有什么办法能让图片有倒影效果呢?如果想要让图片有倒影效果,可以参考下面下面教程设置. 具体方法如下: 1.首先把图片插入到文档中; 2.选中图片,并选中图片工具,格式选项卡; 3.在格式选项卡下,找到图片样式组,图片效果; 4.图片效果下拉菜单中选择映像; 5.在映像设置选项中可以选择不同的效果,如先选择第一张效果; 6.返回到word

win7系统word文档将空格键设置为圆点符号如何解决

  我们大家装机win系统的电脑中基本上都会安装office软件,这个软件是所有人都会使用到的办公软件,用的最多的就是Word和excel,这两个软件是我们写文章和做表格最常用的,大家在使用的时候有可能会出现一些问题,今天就有客户说自己在使用Word的时候,如何把键盘上的空格键变成圆点符号呢,不知道的朋友跟着小编一起来设置吧! 如何把空格键设置成为圆点的操作方法: 文档将空格键设置为圆点符号如何解决-按空格键出现圆点"> 1.大家直接用鼠标点击打开Word程序,双击打开的界面中,我们可以看

Win7系统Word文档无法输入中文怎么办?

  解决方法如下: 1.首先打开Word; 文档无法输入中文怎么办?-"> 2.在菜单栏里,单击"工具",然后在下拉菜单中选择"选项"; 3.在弹出的选项框中选择"编辑",在编辑选项的最下面把"输入法控制处于活动状态(L)"勾除,单击确定.

Bootstrap栅格布局系统的

栅格布局系统的特点:  (1)所有的行必须放在容器中: .container或.container-fluid  (2)分为多行(row),一行中平均分为12列(col)  (3)网页内容只能放在列(col)中,不能直接放在行(row)  (4)可以在col中再嵌套row  (5)col分为四大类: col-xs   col-sm    col-md   col-lg  (6)col-md-*  *值可为1~12,值就为某个列的宽度(  */12  )  (7)可以为一个列指定不同屏幕下的不同宽