Use blaze-html with Bootstrap to create HTML template

In this recipe, we will use Blaze HTML to create bootstrap based HTML. In this recipe, we will create a Navbar (which is actually one of the examples at http://getbootstrap.com).

How to do it... 

1. Create a new folder blaze-html. We will not be creating a separate project. Instead, create a new file called index.hs file. Open the file and enable the extension OverloadedStrings for being able to use a generic string syntax for supporting text as well as ByteString: 

        {-# LANGUAGE OverloadedStrings #-}

2. Add the necessary imports:

 import Prelude import qualifiedPreludeasP import Data.Monoid (mempty,(<>))

 import Text.Blaze.Html5hiding (main)
 import qualifiedText.Blaze.Html5asH import Text.Blaze.Html5.Attributes import qualifiedText.Blaze.Html5.AttributesasA import Text.Blaze.Html.Renderer.Utf8 (renderHtml)
 import qualifiedData.ByteString.Lazy.Char8asBC

3. Define the functions to represent often used URLs:

 -- Attribute value -- Point...