说到布局，有人习惯使用div+css代码来，有人喜欢dreamweaver 可视化布局。不管你是哪一种习惯都没关系，因为bootstrap都能满足你的需求。
注意了，这个功能只能是bootstrap2.x版本的专利了，bootstrap3.x的官方还没有升级，当然了，也不是说bootstrap3.x不能使用可视化布局，只是不能直接使用，需要通过标签转化，后面我会详细讲。
bootstrap的可视化布局设置
打开http://www.bootcss.com/p/layoutit/，然后拖动8 4到右边，则出现如下的效果图
一个两栏的页面布局，就在”拖“的过程中完成了，是不是很轻松呢？
欢迎使用阳光订餐系统，本系统使用PHP5+MYSQL开发而成，距离上一个版本1.2.8发布已经有一年了。本系统集成了留言本，财务管理，菜单管理，员工管理，安全管理，WAP手机端等功能，并继续继承1.X老版本简单、实用、美观的特点，在老版本上的基础上做了如下更新：1.更简洁的前台与后台，菜单及功能布局更合理。2.更合理的文件结构，合理适度的模板机制以及OO运用，更易于理解的代码，更适于二次开发；3.
2
下载代码
点击顶端的下载，则可以把布局好的html代码复制下来
<div class="container-fluid"> <div class="row-fluid"> <div class="span8"> </div> <div class="span4"> </div> </div> </div>
代码解释
Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器。对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
小结：下载的html代码,保存在html文件，用浏览器打开是无法看到布局效果的，需要在span标类中加上css背景色才能看到。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
4290
