• 补充:学会Twitter Bootstrap不再难


      博客园的兄弟姐妹们很给力,自从这篇文章写出后,有人可能会对2.x版本升级到3.x版本的区别有些好奇和模糊。现在将官方给出的说明贴上去:

      

    Bootstrap 3并不向后兼容Bootstrap v2.x。下面章节列出的内容可以作为从v2.x升级到v3.0的通用指南。如果需要更多信息,可以查看更新记录这篇官方博文。

    class的主要变化

    表格中列出了v2.x 和 v3.0之间样式表的变更。

    Bootstrap 2.xBootstrap 3.0
    .container-fluid .container
    .row-fluid .row
    .span* .col-md-*
    .offset* .col-md-offset-*
    .brand .navbar-brand
    .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-small .input-sm
    .input-large .input-lg
    .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

    新增class

    我们新增了一些页面元素,同时也对一些原有的元素进行了修改。下面列出了新增或更新之后的样式表。

    页面元素描述
    Panels .panel .panel-default .panel-body .panel-title .panel-heading.panel-footer .panel-collapse
    List groups .list-group .list-group-item .list-group-item-text.list-group-item-heading
    Glyphicons .glyphicon
    Jumbotron .jumbotron
    Extra small grid (<768px) .col-xs-*
    Small grid (≥768px) .col-sm-*
    Medium grid (≥992px) .col-md-*
    Large grid (≥1200px) .col-lg-*
    Responsive utility classes (≥1200px) .visible-lg .hidden-lg
    Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
    Push .col-sm-push-* .col-md-push-* .col-lg-push-*
    Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
    Input groups .input-group .input-group-addon .input-group-btn
    Form controls .form-control .form-group
    Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg
    Navbar text .navbar-text
    Navbar header .navbar-header
    Justified tabs / pills .nav-justified
    Responsive images .img-responsive
    Contextual table rows .success .danger .warning .active
    Contextual panels .panel-success .panel-danger .panel-warning .panel-info
    Modal .modal-dialog .modal-content
    Thumbnail image .img-thumbnail
    Well sizes .well-sm .well-lg
    Alert links .alert-link

    被移除的class

    以下列出的页面元素已经在v3.0版本中被去除或修改。

    页面元素从2.x版本中去除3.0版本中对应的元素
    Form actions .form-actions N/A
    Search form .form-search N/A
    Form group with info .control-group.info N/A
    Fluid container .container-fluid .container (no more fixed grid)
    Fluid row .row-fluid .row (no more fixed grid)
    Controls wrapper .controls N/A
    Controls row .controls-row .row or .form-group
    Navbar inner .navbar-inner N/A
    Navbar vertical dividers .navbar .divider-vertical N/A
    Dropdown submenu .dropdown-submenu N/A
    Tab alignments .tabs-left .tabs-right.tabs-below N/A
    Nav lists .nav-list .nav-header No direct equivalent, but List groups and .panel-groupsare similar.

    额外注意

    Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

    有些v3.0中的多修改并不能从表面直接看到。我们对基本class、关键样式和行为都进行了调整,使其更灵活并且适应移动设备优先这一目标。下面是一个部分列表:

    • 默认情况下,文本类型的表单控件只被赋予了最少的样式。将.form-control class赋予这些控件可以使其具有高亮(在获得焦点时)和圆角样式。
    • 添加了.form-control class的文本表单控件默认预设为100%宽度。用<div class="col-*"></div>包裹输入框(input)即可控制其宽度。
    • .badge不再保留状态相关的class(-success、-primary等)。
    • .btn必须和 .btn-default一起使用才能获得“默认”样式的按钮。
    • .container.row目前是基于百分比定义的宽度。
    • 默认情况下,图片不具有由响应式特性,需要使用.img-responsive才能让<img>实现响应式可变大小。
    • 图标,.glyphicon,演变为字体图标。每个图标都需要一个基本class和一个代表特定图标的class(例如,.glyphicon .glyphicon-asterisk
    • 与输入组件被移除,建议使用Twitter Typeahead组件。
    • 模态框组件的HTML结构发生了很大的改变。.modal-header.modal-body.modal-footer部分目前包含在了.modal-content.modal-dialog中,为的是增强移动设备上的样式和行为特性。
    • The HTML loaded by the remote modal option is now injected into the .modal instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.
    • JavaScript事件目前全部都应用了命名空间。例如,模态框的"show"事件的名称为'show.bs.modal'。标签页组件的"shown"事件名称为'shown.bs.tab',还有很多其它事件名称也是类似。
  • 相关阅读:
    javascript 学习笔记
    vim折叠设置(转载)
    描述符
    python运算符优先级
    python repr()和str()
    python super()
    [深入Python]__new__和__init__
    python中,类方法和静态方法区别。
    python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
    关于字符集和字符编码自己汇总记录
  • 原文地址:https://www.cnblogs.com/niuox/p/3583650.html
Copyright © 2020-2023  润新知