3. Creating Instant Content Panes and Containers using the Bootstrap 3 Framework
Nov 01, 2013
In this tutorial we walk through step by step how to create a responsive skin for DNN using the new Twitter Bootstrap framework version 3.
Bootstrap 3 offers several powerful tools that can be a huge advantage to a DotNetNuke skin developer. Some of these include:
- Various layout options: Bootstrap 3 allows us to work with a variety of layout options such as the grid system, this grid system allows us to create pane layouts extremely quickly.
- Bootstrap 3 comes with excellent typography and button styles.
- Bootstrap 3 has been rebuilt from the ground up and is now a mobile-first framework, meaning it is written and coded perfectly for mobile devices from the beginning. Rather than adapting a desktop HTML/CSS framework to look good on a mobile device, this time the bootstrap framework looks perfect on a mobile device and then it is adapted and extended upon for the extra screen real estate of a tablet and then a desktop screen.
This tutorial will give you a solid template for creating your Bootstrap 3 based skins. You will also learn some techniques such as file inclusion using the client resource management features available in DNN 6 and 7.
This video contains:
- Introduction to the 12 column Bootstrap grid system;
- Introduction to the Bootstrap Row;
- How to create an instant two column layout;
- Creating three equally spaced columns;
- Creating four equally spaced columns;
- How to create the 'Jumbotron' container;
- Creating a Jumbotron container with no title;
- Creating the 'Well' container;