2. Creating a DDR Bootstrap 3 Navbar Menu
  1. 7m 37s
    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.
  • A selection of handy javascript plugins such as popups, animated menus, and a responsive carousel.
  • 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;
  • Creating the menu markup;
  • Preventing the Bootstrap menu conflicting with the admin menu;
  • Implementing the DDR menu within a DNN skin;
  • How to convert the bootstrap menu into a DDR menu;
  • How to display the portal title within a skin inside the Bootstrap menu;
  • How to add the login link to the Bootstrap menu using the Login skin object;
  • About the nav-collapse CSS class;
dnn7 skin bootstrap menu
Andy Stephenson

About 2013 Edition

2h 47m 18s All Jan 01, 2013

DNN Video Tutorials posted during 2013

dnn5 dnn6 dnn7 3rd party module advanced beginners bootstrap email installation menu search skin
Andy Stephenson

30 days money back guaranteed