.NET CMS DNN

DNN Community Blog

Robert-Jan Kuyper
/ Categorie: DNN Modules
Build Bootstrap websites in DNN

Build Bootstrap websites in DNN

Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web. Bootstrap doesn’t only make front-end development faster and easier, it’s also made for all skill levels, devices of all shapes and projects of all sizes. To gain some ideas for your design, check out the Bootstrap Expo.

Integrating Bootstrap in DNN is really easy. In this article, I’ll show you how to build a DNN website with Bootstrap from scratch.

 

Set up your Bootstrap website in DNN

Before you use Bootstrap components, take a look at the Bootstrap website. It’s possible to create a customized version of Bootstrap for your DNN skin.

Start with creating a Head.ascx file in your DNN portal. Register the DNN ClientResourceManagement by adding next line:

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

Next you can make use of DnnCssInclude’s and DnnJsInclude’s. Add the latest version of Bootstrap.

<dnn:DnnCssInclude ID="BootstrapCSS" runat="server" FilePath="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<dnn:DnnJsInclude ID="jQuery" runat="server" FilePath="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" />

<dnn:DnnJsInclude ID="BootstrapJS" runat="server" FilePath="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
 

Bootstrap navigation in DNN

For each DNN Component, such as your navigation menu, we’ll use existing Bootstrap components. For example, your DNN menu exist out of HTML combined with DNN Skinobjects. In a Bootstrap based DNN Skin your menu could be similar as code below. You can also take a look at the free Bootstrap based DNN Navigation Plug-in.

<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="MENU" src="~/Admin/Skins/Menu.ascx" %>
    
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
         <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Awesome-DNN-Nav" aria-expanded="false">
                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><dnn:LOGO id="dnnLOGO" runat="server" class="img-responsive"/></a>
        </div>
        <div class="collapse navbar-collapse" id="Awesome-DNN-Nav">
              <dnn:MENU id="dnnMENU" MenuStyle="mainMenu" runat="server"></dnn:MENU>
              <dnn:SEARCH id="dnnSEARCH" runat="server" showWeb="false" showSite="false"></dnn:SEARCH>
        </div>
    </div>
</nav>

Next, configure the DNN Menu Skinobject. This is explained at the DNN Mobile Plug-in page. Once you followed these steps your DNN menu will work properly.

   

For an awesome DNN search lay-out, use the free Searchbar Plug-in.

 

Bootstrap contentpane in DNN

To use all Bootstrap functionalities I recommend creating a really small skin with several Bootstrap components. Your portal.ascx file will only contain the necessary code. This allows your customer / content manager to be really flexible with adding and managing content. Add "container" and "row" to create a full responsive skin.

<!--#include file="includes/headInclude.ascx"-->
<!--#include file="includes/navigationInclude.ascx"-->
<div class="container">   
    <div id="contentPane" runat="server" class="row"/>
<!--#include file="includes/footerInclude.ascx"-->
</div>
<!--#include file="includes/scripts.ascx"-->

After you created your skin file you have to create some Bootstrap based containers. By creating different containers, your content manager can easily create an awesome landings page without coding. I recommend creating at least 3 containers:

  • Hero_background_container.ascx;
  • Content_container_h2_white_background.ascx;
  • Content_container_h2_colored_background.ascx (+ some variants).

The advantage of this setup is that you only need to change some colors.

<%@ Control AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>

<section class="col-md-12 bg-light-gray">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="section-heading"><dnn:TITLE runat="server" id="dnnTITLE" /></h2>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-md-12 text-center">
                <div id="ContentPane" runat="server"/>
            </div>
        </div>
</section>
   

Your DNN containers should be placed in your portal > containers file. You can add as much containers you want.

 

Bootstrap portfolio in DNN

For business development, you definitely want to show your Portfolio. To manage images and text, use the DNN Form & List module. Why? Because you only need to configure your module once so everyone can manage the portfolio easily. Read the documentation at the “Portfolio Plug-in” page and add the code to your portal.

   

Bootstrap footer in DNN

Create a new file called “footerInclude.ascx”. Add your code, as shown in the example.

 

Now you just created an entire DNN website, which is easy to manage and easy to contain.

Enthousiast geworden? Mis niets met de maandelijkse DNN nieuwsbrief!

Delen

Printen

Laat een reactie achter

Naam:
Email:
Reactie:
Reactie toevoegen
Gently
Websites
Gently

Gently produceert reinigings- en onderhoudsproducten voor caravans, campers en boten. De website is in 2 talen beschikbaar en is een showcase van de verschillende lijnen die dit merk vertegenwoordigt.

Bekijk project
Bekijk alle showcases
Vindjeruimte
Maatwerk
Vindjeruimte.nl

Vindjeruimte is een online platform dat vraag en aanbod van het maatschappelijk vastgoed bij elkaar brengt. Op de website kun je eenvoudig een ruimte of accommodatie vinden en boeken. Het complete platform wordt door diverse gemeenten en organisaties gebruikt als reserveringssysteem.

Bekijk project
Bekijk alle showcases
KMU
Websites
Koninklijke Metaalunie

Koninklijke Metaalunie is met meer dan 13.000 leden de grootste ondernemersorganisatie voor het midden- en kleinbedrijf (mkb) in de metaal. Idas heeft de nieuwe site ontworpen en gebouwd.

Bekijk project
Bekijk alle showcases
Solutions
Websites
Solutions Center

SolutionS is een private verslavingszorginstelling en biedt een integrale behandeling voor doserings- en verslavingsproblemen. De behandeling is gebaseerd op het 12 Stappen Minnesota Model in combinatie met zowel inzichtgevende en lichaamsgerichte therapie als cognitieve groepstherapie.

Bekijk project
Bekijk alle showcases
Sallandsche
Websites
Sallandsche Golfclub 'De Hoek'

In opdracht van Sallandsche Golfclub 'De Hoek' heeft Idas deze website ontworpen en gebouwd. De baanconditie op de homepage is tevens gekoppeld aan de (tevens door Idas geproduceerde) iPhone App.

Bekijk project
Bekijk alle showcases
VvOCM
Websites
VvOCM - de Oefentherapeut

De Vereniging van Oefentherapeuten Cesar en Mensendieck is de beroepsvereniging van oefentherapeuten. Idas heeft deze website ontworpen en gebouwd. Het besloten deel van de website telt honderden leden. Leden kunnen producten bestellen, zich inschrijven voor events, deelnemen aan forumdiscussies en elkaar opzoeken in een locatiezoeker.

Bekijk project
Bekijk alle showcases
Combacte
Interactive
COMBACTE

COMBACTE doet op Europees niveau onderzoek naar resistentie van bacteriën. De website heeft een afgesloten ledengedeelte wat fungeert als kennisbank voor aangesloten professionals. Zij kunnen kennis delen, zich inschrijven voor events en onderling berichten sturen.

Bekijk project
Bekijk alle showcases
Olympos
Websites
Sportcentrum Olympos

Sportcentrum Olympos is een ruime en veelzijdige sportaccommodatie. Met de meertalige webshop die Idas voor Olympos heeft gerealiseerd, kunnen gebruikers online lessen boeken en betalen. Gevolg van de webshop is een forse besparing, gezien de boekingen niet meer handmatig hoeven te worden aangenomen en verwerkt.

Bekijk project
Bekijk alle showcases
GVG
Websites
GVG Oliehandel

GVG Oliehandel: internationaal actief in alles wat met benzine, olie en reiniging te maken heeft. Idas heeft deze responsive website gerealiseerd in meerdere talen. Doel is het etaleren van de 6 merken die GVG vertegenwoordigt.

Bekijk project
Bekijk alle showcases
NJO
Websites
Noordwijkse Jeugd Open

Op de website van de Noordwijkse Jeugd Open kunnen jongeren zich inschrijven voor dit golftoernooi. Hierdoor kan de organisatie van NJO de inschrijvingen in veel kortere tijd verwerken. Deze website is volledig responsive en daardoor geoptimaliseerd voor mobiel gebruik.

Bekijk project
Bekijk alle showcases