欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

bootstrap布局篇详解(二)

程序员文章站 2022-04-11 08:14:53
...
我觉得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.x Bootstrap 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