![]() So they are stacked on top of each other. ![]() On smaller screens (or smaller windows, for that matter) there's not enough screen estate to display the panels side-by-side. As you can see on the first tab, the four panels of the example are displayed in two rows, each consisting of two columns. The "medium size" layout of Bootstrap is targeted at large tablets, notebooks and small desktop screens. Basically, the pom.xml consists of three dependencies (or only one, if you're running your project on an application server): Most developers are familiar with Maven, so let's create a Maven project. Today's project is the subfolder ResponsiveDesign of this repository. I've prepared a repository on GitHub, so you can check out the source codes used in this article. Let's write a simple BootsFaces application showing how easy it is to add responsive design to JSF applications. Without Bootstrap you'd have to scroll both horizontally and vertically, which is clearly worse. Maybe you have to scroll a lot on a small device, but that's a small price to pay. Usually, that doesn't look as good as the original design aimed at larger screen estates, but the bottom line is that the application can be used even on small phones. If everything else fails, Bootstrap starts to stack screen elements over each other if they can't be displayed side-by-side. Probably you already know the idea: screen elements are resized to fit on smaller screens. One of the more attractive traits of Bootstrap is its built-in responsive design. BootsFaces is a JSF framework adding Bootstrap to JSF pages.
0 Comments
Leave a Reply. |