• 新闻资讯
  • 公司新闻
  • 行业新闻
  • bob棋牌安卓下载设计技术
  • bob棋牌安卓下载优化推广
  • bob棋牌安卓下载建设知识
  • 建站常见问题
  • 关于我们
  • 公司简介
  • 服务理念
  • 招贤纳士
  • 联系我们
  • 海南bob棋牌安卓下载建设新闻
    您当前位置:海南bob棋牌安卓下载建设首页 >> 海南bob棋牌安卓下载建设新闻 >> bob棋牌安卓下载设计技术
  • 公司新闻
  • 行业新闻
  • bob棋牌安卓下载设计技术
  • bob棋牌安卓下载优化推广
  • bob棋牌安卓下载建设知识
  • 建站常见问题
  • 海南微信资讯
  • 海南电脑维修资讯
  • 杂文趣事
  • 海口bob棋牌安卓下载建设新闻

    Bootstrap可视化布局

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

    相信大家看过教你快速了解响应式bob棋牌安卓下载设计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背景色才能看到。

    相关文章