• bootstrap2.0与3.0的区别


    在阅读这篇bootstrap2.0与3.0的区别的文章之前,大家一定要先了解什么是响应式网站设计?推荐大家看看这篇"教你快速了解响应式网站设计" 。

    我觉得bootstrap的可视化网页布局是个不错的工具,Bootstrap可视化布局说了,这个工具只适用于bootstrap2.x版本,在新版本的bootstrap3.x,就不能直接使用了,不知是因为官方更新不及时还是停止更新,如果是后者,那真有点可惜了。

    上面说了,新版本的bootstrap3.x不是不能使用可视化布局,而是不能直接使用。那么在bootstrap3.x版本使用可视化布局需要作相应的标签替换。

    新版本的bootstrap3.x相对于旧版本,改动比较大,对于版本的升级,官方给出了相关的说明文档,不过官方也真是的,这么重要的文档竟然放在一个很偏的角落里,还是我无意中找到的,以至于我再次查找时竟然无果而终,如果不是我事先收藏了网址。

    在bootstrap2.x的栅格类标签使用的是.span*,但在新版本中这一标签不再保留,而是使用了.col-md-*替代。这样,如果在bootstrap3.x,使用可视化布局的功能,就是在旧版本中使用可视化工具布局好页面,然后把所有.span*的标签替换成.col-md-*

    就可以了,这对于布局来说,已经够用了。

    我在官方文档中代到的升级指南,不敢私藏,把它分享给大家--请点击这里

    下表列举了 v2.0x 版本和 v3.0 版本之间的样式差异。

    Bootstrap 2.xBootstrap 3.0
    .row-fluid .row
    .span* .col-md-*
    .offset* .col-md-offset-*
    .brand .navbar-brand
    .navbar .nav .navbar-nav
    .nav-collapse .navbar-collapse
    .nav-toggle .navbar-toggle
    .btn-navbar .navbar-btn
    .hero-unit .jumbotron
    .icon-* .glyphicon .glyphicon-*
    .btn .btn .btn-default
    .btn-mini .btn-xs
    .btn-small .btn-sm
    .btn-large .btn-lg
    .alert-error .alert-danger
    .visible-phone .visible-xs
    .visible-tablet .visible-sm
    .visible-desktop Split into .visible-md .visible-lg
    .hidden-phone .hidden-xs
    .hidden-tablet .hidden-sm
    .hidden-desktop Split into .hidden-md .hidden-lg
    .input-block-level .form-control
    .control-group .form-group
    .control-group.warning .control-group.error .control-group.success .form-group.has-*
    .checkbox.inline .radio.inline .checkbox-inline .radio-inline
    .input-prepend .input-append .input-group
    .add-on .input-group-addon
    .img-polaroid .img-thumbnail
    ul.unstyled .list-unstyled
    ul.inline .list-inline
    .muted .text-muted
    .label .label .label-default
    .label-important .label-danger
    .text-error .text-danger
    .table .error .table .danger
    .bar .progress-bar
    .bar-* .progress-bar-*
    .accordion .panel-group
    .accordion-group .panel .panel-default
    .accordion-heading .panel-heading
    .accordion-body .panel-collapse
    .accordion-inner .panel-body
     

    参考资料:http://www.yuechengnet.com/news/detail_223_3_0.html

  • 相关阅读:
    ActiveSync合作关系对话框的配置
    WINCE对象存储区(object store)
    Wince 隐藏TASKBAR的方法
    Wince输入法换肤换语言机制
    poj 3080 Blue Jeans 解题报告
    codeforces A. Vasily the Bear and Triangle 解题报告
    hdu 1050 Moving Tables 解题报告
    hdu 1113 Word Amalgamation 解题报告
    codeforces A. IQ Test 解题报告
    poj 1007 DNA Sorting 解题报告
  • 原文地址:https://www.cnblogs.com/yanwei067/p/4971161.html
Copyright © 2020-2023  润新知