海南网站建设新闻
您当前位置:海南网站建设首页 >> 海南网站建设新闻 >> 网站设计技术
海口网站建设新闻

Bootstrap可视化布局

时间: 2015-08-17 来源:越诚网络 作者: 点击:0

相信大家看过教你快速了解响应式网站设计Bootstrap可视化布局,大家应该会个印象在脑海里,有人习惯使用div+css代码来,有人喜欢Dreamweaver 可视化布局。不管你是哪一种习惯都没关系,因为bootstrap都能满足你的需求。

注意了,这个功能只能是bootstrap2.x版本的专利了,bootstrap3.x的官方还没有升级,当然了,也不是说bootstrap3.x不能使用可视化布局,只是不能直接使用,需要通过标签转化,bootstrap2.0与3.0的区别后面我会详细讲。

bootstrap的可视化布局设置

bootstrap的可视化布局设置

打开http://www.bootcss.com/p/layoutit/,然后拖动8 4到右边,则出现如下的效果图

 

一个两栏的页面布局,就在”拖“的过程中完成了,是不是很轻松呢?

下载代码

点击顶端的下载,则可以把布局好的html代码复制下来

1 <div class="container-fluid">
2  <div class="row-fluid">
3   <div class="span8">
4   </div>
5   <div class="span4">
6   </div>
7  </div>
8 </div>

代码解释

Bootstrap默认的栅格系统为12列 ,形成一个940px宽的容器。对于简单的两列式布局,创建一个 .row 容器,并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格,所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。现在Bootstrap已经升级到了3.0版本,但是可视化布局工具仍未更新,查看这里bootstrap2.0与3.0的区别

 

小结:下载的html代码,保存在html文件,用浏览器打开是无法看到布局效果的,需要在span标类中加上css背景色才能看到。

相关文章