I think bootstrap's visual web page layout is a good tool. As described in bootstrap layout (1), this tool is only applicable to bootstrap2.x and later versions of bootstrap3.x, it cannot be used directly. I don't know if the official update is not timely or the update is stopped. If it is the latter, it is a pity. I think bootstrap's visual web page layout is a good tool. As described in bootstrap layout (1), this tool is only applicable to bootstrap2.x and later versions of bootstrap3.x, it cannot be used directly. I don't know if the official update is not timely or the update is stopped. If it is the latter, it is a pity.
As mentioned above, the new version of bootstrap3.x cannot be directly used instead of visual layout. In bootstrap3.x, labels must be replaced for visual layout.
The new version of bootstrap3.x has relatively large changes compared with the old version. For version upgrades, the official documentation is provided, but the official documentation is also true, such an important document was put in a very biased corner, and I accidentally found it, so that I did not find it again, if it was not my favorite URL.
The raster label of bootstrap2.x uses. span *, but this label is not retained in the new version, but is replaced by. col-md. In this way, if bootstrap3.x is used, the visual layout function is used to layout the page with the visual tool in the old version, and then replace all. span * labels with. col-md -*
This is enough for the layout.
The upgrade guide I provided in the official documentation does not dare to hide it and share it with you-click here.
The following table lists the style differences between v2.0x and 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 |