.NET CMS DNN

DNN Community Blog

Anonym
/ 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
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
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
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
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
Discovered
Websites
Discovered

Discovered staat voor een breed assortiment van exotische groenten en fruit. Op deze website worden recepten en producten door middel van een catalogus getoond. Gebruikers kunnen o.a. filteren op thema, ingrediënt, aantal personen en moeilijkheidsgraad. Tevens worden er gerelateerde recepten getoond.

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
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
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
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
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