.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

1 reacties op artikel "Build Bootstrap websites in DNN"

0
0
Avatar image

http://jasaseomurah.org

Thanks for the explanation regarding Bootstrap. It's very useful for me.

Laat een reactie achter

This form collects your name, email, IP address and content so that we can keep track of the comments placed on the website. For more info check our Privacy Policy and Terms Of Use where you will get more info on where, how and why we store your data.
Reactie toevoegen

Theme picker

  • 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
  • Het Beekdal Lyceum

    Bekijk project
  • De Spil

    Bekijk project
  • 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
  • Noordwest Ziekenhuisgroep

    Bekijk project
  • Bald Logistics

    Bekijk project
  • Tribuut

    Bekijk project
  • Vmbo 't Venster

    Bekijk project
  • Maarten van Rossem VMBO

    Bekijk project