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 |
上一篇: 脚本是什么
推荐阅读
-
Flutter 布局(二)- Padding、Align、Center详解
-
Android通信方式篇(二)-消息机制(ThreadLocal详解)
-
bootstrap的常用组件和栅格式布局详解
-
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
-
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
-
轻松pick移动开发第二篇,rem布局
-
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
-
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明_PHP教程
-
ListView 源码详解 有这一篇就够了!!!(二)
-
Bootstrap 网格系统布局详解