bootstrap2.x与3的区别

来源:互联网 发布:淘宝开店流程步骤ppt 编辑:程序博客网 时间:2024/06/02 09:29

实验室要做个什么项目的展示,实在没有人手了,就又把我拉来弄了,完全没弄过jsp和前端的东西,又全部从头弄,现在还没弄完。之前听人说过bootstrap好用,结果开始的时候发现用可视化布局下的html完全没效果(就是这个坑爹的可视化布局),最后才发现教程里面已经更新了bootstrap3,但是实际上这个可视化布局还是用的2.x,所以又花了一堆时间来改…… = =浪费了好多时间在前端,现在决定不管做得丑不丑了,先把功能弄出来,不过还是看了看总结,发现还是挺多区别的,网上搜了下,把区别罗列在下面:

bootstrap已经推出了3.0的新版,看起来2.3.x版本也不会再更新了。那么bootstrap 2.3版与3.0版的区别在哪里呢?下面我们就来介绍一下。

Bootstrap 3.0增加了一些新的特性,对于一些类也进行了调整。不过两个版本在使用的方法上是没什么大的区别的。

bootstrap 2.3版与3.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.visible-phone.visible-sm.visible-tablet.visible-md.visible-desktop.visible-lg.hidden-phone.hidden-sm.hidden-tablet.hidden-md.hidden-desktop.hidden-lg.input-small.input-sm.input-large.input-lg.checkbox.inline .radio.inline.checkbox-inline .radio-inline.input-prepend .input-append.input-group.add-on.input-group-addon.thumbnail.img-thumbnailul.unstyled.list-unstyledul.inline.list-inline

bootstrap 3.0版新增的类

ElementDescriptionPanels.panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapseList groups.list-group .list-group-item .list-group-item-text .list-group-item-headingGlyphicons.glyphiconJumbotron.jumbotronTiny grid (<768 px).col-xs-*Small grid (>768 px).col-sm-*Medium grid (>992 px).col-md-*Large grid (>1200 px).col-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-btnForm controls.form-control .form-groupButton group sizes.btn-group-xs .btn-group-sm .btn-group-lgNavbar text.navbar-textNavbar header.navbar-headerJustified tabs / pills.nav-justifiedResponsive images.img-responsiveContextual table rows.success .danger .warning .activeContextual panels.panel-success .panel-danger .panel-warning .panel-infoModal.modal-dialog .modal-contentThumbnail image.img-thumbnailWell sizes.well-sm .well-lgAlert links.alert-link

bootstrap 3.0版删除的类

ElementRemoved from 2.x3.0 EquivalentForm actions.form-actionsN/ASearch form.form-searchN/AFluid container.container-fluid.container (no more fixed grid)Fluid row.row-fluid.row (no more fixed grid)Navbar inner.navbar-innerN/ADropdown submenu.dropdown-submenuN/ATab alignments.tabs-left .tabs-right .tabs-belowN/A


再吐槽一下:做网页东西真的多,一个人写这么多个网页还是挺吃力的,导师什么时候才能意识到我不能充当螺丝钉的角色啊,能力完全没有他想的那么强啊!!!!2个很简单的页面我就写了6天啊!!!!!!!!后面还有7个页面……我吐了。

0 0