Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • jason 1 post 71 karma points
    Dec 22, 2015 @ 21:43
    jason
    0

    Bootstrap navigation layout

    Hi, I am pretty new to umbraco. I must say I am very impressed so far.

    I understand bootstrap uses the 12 column grid system.

    How do i make something like this:

    | A 12 column header. |

    | 3 column nav | 9 column body |

    | 12 column footer. |

    Any help or a push in the right direction would be much appreciated. Thanks.

  • Marc Goodson 2141 posts 14344 karma points MVP 8x c-trib
    Dec 23, 2015 @ 17:02
    Marc Goodson
    0

    Hi jason

    I'm not sure in what context you are looking for help here:

    Are you using the Umbraco Grid Property ?, or do you have a document type, and just want to render content from it in a template ?

    or are you puzzling over how to use bootstrap ? or the code to loop over Umbraco content to build a navigation menu ?

    So this advice might sound pretty random but:

    There are some pretty good bootstrap grid examples here:

    https://getbootstrap.com/examples/grid/

    you maybe can see that you could create your described layout with:

    <div class="container">
    <div class="row">
    <div class="col-md-12">
    <h1>Your site header</h1>
    </div>
    </div>
    </div class="row">
    <div class="col-md-3"><h2>Nav</h2></div>
    <div class="col-md-9"><h2>Body</h2></div>
    </div>
    <div class="row">
    <div class="col-md-12">
    <h3>Your footer</h3>
    </div>
    </div>
    </div>
    

    Umbraco has Templates that you can use with Document Types;

    So if you create a Document Type called 'Standard Page' and create a 'pageTitle', 'bodyText' properties etc

    You can then create a Standard Page Template, and allow the Standard Page document type to use it.

    You can then create content pages based on the Document Type - and you can then 'write out' the values of the properties from your document type in the appropriate part of the html, using Umbraco.Field("pageTitle") or Umbraco.Field("bodyText") etc so you might have

    <h1>@Umbraco.Field("pageTitle")</h1> 
    

    to perhaps write out the page Title inside a heading.

    You can have master layout templates too, so your header and footer don't need to be repeated for each template.

    You can write 'Macros' or use 'Partial Views' to encapsulate any functionality (eg breadcrumb, or navigation that is common across page templates)

    A really great way to get started with all this is to work through the videos on Umbraco TV, particularly the Implementor strand

    http://umbraco.tv/videos/implementor/

    You can 'pay as you go' so it's really cheap for a month, to help you get the gist of Umbraco.

    The Umbraco Level 1 Fundamentals training course: http://umbraco.com/products/training/level-1-course is also a fantastic 2 day course to quicly induct you into the ways of Umbraco!

    When building templates the Umbraco Razor Cheatsheets; are a great way to get your head around what is possible inside a template:

    https://our.umbraco.org/projects/developer-tools/umbraco-v6-mvc-razor-cheatsheets

    Finally you can download starterkit's to see 'how other people do it' https://our.umbraco.org/projects/?category=Starter%20Kits or https://our.umbraco.org/projects/starter-kits/localgov-starter-kit

    and of course search the forum and ask questions; people will do their best to help you; but only if you promise to help other people in the future when you become an Umbraco ninja!!!

Please Sign in or register to post replies

Write your reply to:

Draft