Join David Powers for an in-depth discussion in this video Understanding how Bootstrap works, part of Dreamweaver CC 2015: Responsive Design with Bootstrap.
Bootstrap 4 is already at an advanced stage of development, and Adobe is committed to incorporating it into Dreamweaver. When that happens, this course will be updated. A major advantage of the way Bootstrap has been integrated is that Dreamweaver recognizes existing Bootstrap pages, so you can use Dreamweaver to edit Bootstrap sites that have been created in a different development environment. You can also use Dreamweaver to create Bootstrap pages from scratch.
All the code generated by Dreamweaver is standard. There's nothing proprietary. Bootstrap is a grid system for page layouts. The default layout grid consists of 12 columns, but you can change this to any number you'd like in Dreamweaver. The default gutter, in other words, the space between the columns of the layout grid, is 30 pixels. Again, this is customizable. The width of the layout grid columns expands and contracts depending on the width of the browser or device viewport.
The grid container can be either fluid or fixed-width. A fluid container fills the available viewport, whereas a fixed-width container fills the entire width only on extra small devices. Otherwise, it uses the Media Query breakpoints to determine the page width and centers it. Page content is laid out in rows and columns using the layout grid as a guide. Rows generate the grid layout. You can't resize a row.
It always fills the entire width of its parent element which is normally the outer container for the whole page. Columns are resizable containers nested inside a row. Grid classes lie at the heart of Bootstrap design. They control the width of the resizable columns inside a row. The class names are based on the Media Query breakpoints defined in the Bootstrap style sheet.
.col-xs-* applies to extra small devices. In other words, those that are not as wide as the first breakpoint. The asterisk represents a number that indicates how many grid columns the resizable column should span. If you don't apply a .col-xs-* class to a column, it spans the full width on extra small devices. .col-sm-* controls the width of columns on small devices. In other words, those between the first and second Media Query breakpoints.
Although the default layout grid has only 12 columns, you're not limited to 12. In this example, the row contains six columns that each span six layout grid columns on small devices. Because columns are floated inside a row, the xs columns wrap within the row which expands vertically. col-md-* applies to medium size devices. Here, the six columns have been resized to span just four layout grid columns, so they sit three abreast in the row.
.col-lg-* applies to viewports wider than the last Media Query breakpoint. The grid class applies to higher levels unless overridden. So .col-md-four also applies to large devices. Because CSS allows you to apply multiple classes to an element, these grid classes can be used to change the layout at different screen resolutions. Although rows can't be resized, they can be nested inside other elements.
For example, you can nest a row inside a column. This gives you great flexibility because nested rows have an independent layout grid. For example, here are six columns nested inside a row. Each column spans six columns of the layout grid, but if you nest a row inside one of the columns, it gets its own layout grid. If you're using the default grid of 12 columns, it has 12 grid columns of its own, not six.
As a result, unlike flexible grid layouts in Dreamweaver, the Bootstrap layout grid is invisible, but I think that's a good idea. Having multiple grids in the background would be visually distracting, and you'll soon find that snapping through the Bootstrap grid is easy and far more flexible than the little amended flexible grid layouts.
- Defining a custom Bootstrap layout grid
- Inserting and modifying a navigation bar
- Adding a container for a hero image
- Working with columns inside a Bootstrap container
- Creating placeholder content with Emmet
- Speeding up layout by duplicating columns
- Moving page elements in the DOM
- Previewing the mobile webpage with Device Preview