Summary of Bootstrap differences¶
This section is intended as a quick reference for someone who knows the previous Widgets and Layouts and who needs to figure out how to map an older tool to its Bootstrap equivalent.
If that’s not you, you can safely skip this section.
The reahl.web.bootstrap package contains equivalent Layouts and
Widgets for all of the Widgets previously supported. The new
Widgets essentially do similar tasks but may look and behave
differently to previous counterparts. In many cases the Widgets also
have a different programming interface and the means by which their
layout is controlled may also be different.
Below follows a more detailed breakdown of changes.
Basic Widgets¶
Simple Widgets are located in reahl.web.bootstrap.ui. These include Widgets that
represent HTML (but styled versions) and a very small number of
equally basic Widgets.
Whereas the standard reahl.web.ui module includes all basic Widgets, reahl.web.bootstrap.ui
excludes basic Widgets that pertain to larger topics that were split out into
their own modules:
reahl.web.bootstrap.formscontains Inputs, Form and related Layoutsreahl.web.bootstrap.filescontains Inputs for uploading filesreahl.web.bootstrap.tablescontains Tables and related Widgets and Layouts
The following changes happened here:
Before, an Input automatically displayed an error message below itself if it contained invalid input. Bootstrap versions do not. Depending on where they are used (via another Widget or a Layout) how and where error messages are displayed can differ, hence the Input cannot determine this by itself any longer.
The
reahl.web.bootstrap.uimodule now only contains Widgets corresponding to basic HTML elements or elements that are as simple as basic HTML elements in bootstrap-world. More complex Widgets are split out into separate modules.Widgets that dealt with Layout of Forms, such as
reahl.web.ui.LabelledBlockInputandreahl.web.ui.LabelledInlineInputhave been axed. Instead, when using Bootstrap the layout of Forms are controlled using the newFormLayoutand its subclasses:
- Other Layouts have been added for these basic Widgets:
ButtonLayout(forButtonorA).TableLayout(forTable)
- Some other Widgets that attempted to deal with styling, or that were mere aliases for HTML elements were removed:
- Instead of a SimpleFileInput, there are two simple kinds of file input:
FileInputButton(just a button which behaves like a file input)FileInput(a stylized version of a standard browser file input)
- CheckboxInput has been split into two versions:
PrimitiveCheckboxInput(just a checkbox)CheckboxInput(a checkbox wrapped in a label)
List of equivalent Widgets¶
Aside from the basic Widgets above, here is a list of old Widgets, and what the Bootstrap equivalent is. The old versions of these Widgets will disappear in Reahl 4.0:
Old version Bootstrap version reahl.web.ui.FileUploadInputreahl.web.bootstrap.files.FileUploadInputreahl.web.ui.SlidingPanelreahl.web.bootstrap.carousel.Carouselreahl.web.ui.TabbedPanelreahl.web.bootstrap.tabbedpanel.TabbedPanelreahl.web.ui.Menureahl.web.bootstrap.navs.Nav(and related classes)reahl.web.ui.CueInputreahl.web.bootstrap.forms.CueInputreahl.web.ui.ErrorFeedbackMessagereahl.web.bootstrap.ui.Alertreahl.web.ui.PopupAreahl.web.bootstrap.popups.PopupA(works differently)reahl.web.datatablereahl.web.bootstrap.tablesreahl.web.layoutreahl.web.bootstrap.gridreahl.web.pagerreahl.web.bootstrap.pagination
Page layout¶
In Reahl 3.1, reahl.web.pure.PageColumnLayout was used to
create a page with several columns. In Reahl 3.2 the same results can
be achieved by using a reahl.web.layout.PageLayout that uses
a reahl.web.pure.ColumnLayout for its contents area.
This new arrangement works with Bootstrap as well: use
reahl.web.layout.PageLayout in conjunction with a with
reahl.web.bootstrap.grid.ColumnLayout for its contents.
Bootstrap’s reahl.web.bootstrap.grid.ResponsiveSize works
differently to Pure’s reahl.web.pure.UnitSize: with Pure, you
could state sizes as fractions, eg ‘1/2’. Bootstrap sizes are
stated as integers and their meaning is always “how many 1/12ths”. Ie:
1 is 1/12th, 6 is 6/12ths and so on.
Added in (or for) Bootstrap¶
A small number of classes/modules were added for Bootstrap that do not have simple equivalents:
Class or package or module Contents reahl.web.bootstrap.navbar.NavbarA more elaborate header for a site. reahl.web.bootstrap.forms.StaticDataAn Inputthat can only be used for output.reahl.web.bootstrap.forms.InputGroupA composed Input with Widgets before and after it.