BootstrapContainerApplication

Bootstrap container application is a page builder which structures a page into 5 areas:

  • Header
  • Navigation bar
  • Navigation pane
  • Content pane
  • Footer

Page structuring is performed with Bootstrap container, rows and columns.

Appearance of the top-level container can be customized using Appearance child element. Appearance of the row containing navigation and content panels can be customized using children/content-row attributes section.

E.g.

children:
    content-row:
        style:
            min-height: 15rem

Also application can be customized by providing a stylesheet or script. Script can be used to implement “rules inheritance” which is not supported by CSS. Below is a sample script demonstrating the approach:

$(document).ready( function() {
  $('.nsd-root-action').css(['.display-4']);
}

Overview video in Russian.

Supertypes

Members

Attributes

fluid : EBoolean

If true the application takes the whole width of the page.

Type EBoolean
Cardinality 0..1

router : EBoolean

If true, a Backbone router code is generated in the header, which allows to build single-page applications. Such applications typically deliver better user experience, but don’t work over the file protocol, i.e. when files are opened from disk.

Type EBoolean
Cardinality 0..1

References

builders : BootstrapContainerApplicationBuilder*

Builders operate on an instance of org.nasdanika.html.app.impl.BootstrapContainerApplication or org.nasdanika.html.app.impl.BootstrapContainerRouterApplication passed to them by this model element during generation.

Type BootstrapContainerApplicationBuilder
Cardinality 0..*

contentPanel : BootstrapContainerApplicationPanel

Content panel on the right of the navigation panel.

Type BootstrapContainerApplicationPanel
Cardinality 0..1

footer : BootstrapContainerApplicationSection

Application footer.

The footer may contribute to appearance of its content provided by application builders by specifiying action key under the children pseudo-attribute of its appearance.

The action key defines appearance of the context children of the root action.

Example:

children:
    action:
        class:
            text: light
Type BootstrapContainerApplicationSection
Cardinality 0..1

header : BootstrapContainerApplicationSection

Application header.

The header may contribute to appearance of its content provided by application builders by specifiying title and navs keys under the children pseudo-attribute of its appearance.

The title key defines appearance of the header title - the link of the root action. The navs key defines appearance of the navigation bar build from the root’s navigation children after the first one (the principal action).

Example:

children:
    title:
        class:
            display: 4
            text: light
        style:
            text-decoration: none
    title:
        class:
            text: light
Type BootstrapContainerApplicationSection
Cardinality 0..1

navigationBar : BootstrapContainerApplicationSection

Navigation bar.

Type BootstrapContainerApplicationSection
Cardinality 0..1

navigationPanel : BootstrapContainerApplicationPanel

Left navigation panel.

Type BootstrapContainerApplicationPanel
Cardinality 0..1