.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
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
FishMasters
Websites
FishMasters

Speciaal voor de internationale markt biedt Fishmasters een deelassortiment aan met het Pure Fish Label. Producten met dit label bevatten geen e-nummers, geen kleurstoffen, geen conserveringsmiddelen, noch smaakstoffen. De website is opgeleverd in 6 talen.

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
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
Aspen
Websites
Aspen Benelux

Het bedrijf Aspen werd in 1988 opgericht aan de kust van het Aspen meer ten noorden van Göteborg in Zweden. Aspen is in veel Europese landen en Canada vertegenwoordigd en is hiermee wereldmarktleider in alkylaatbenzine. Idas heeft deze meertalige website voor Aspen ontwikkeld.

Bekijk project
Bekijk alle showcases
agealube
Websites
Agealube

Met deze (volledig responsive) cataloguswebsite van Agealube, kunnen gebruikers producten opzoeken. De catalogus is een door Idas gebouwde maatwerkmodule op basis van Azure Search.

Bekijk project
Bekijk alle showcases
Firelux
Websites
Firelux

Firelux is een zeer schone brandstof voor verplaatsbare petroleumkachels. Deze brandstof is opgebouwd uit extreem zuivere, doorgeraffineerde aardoliedestillaten.

Bekijk project
Bekijk alle showcases
Hovenschool
Websites
OBS de Hovenschool

De Hovenschool is een openbare basisschool, die deel uitmaakt van de stichting Openbaar Onderwijs Deventer. Dit betekent dat zij open staan voor alle kinderen uit de wijk, ongeacht hun achtergrond of levensovertuiging.

Bekijk project
Bekijk alle showcases
butter
Intranet & Extranet
Butter Group International Transport

Idas is al jaren software leverancier voor Butter Group. Butter is gespecialiseerd in het transport van agrarische producten in geïsoleerde onderlossers door heel Europa. De vernieuwde responsive website is in 6 talen beschikbaar en draagt bij aan de professionalisering van dit internationale bedrijf.

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