Copied to clipboard

Flag this post as spam?

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


  • Chris 3 posts 73 karma points
    Nov 04, 2015 @ 11:05
    Chris
    0

    Umbraco V7 Bootstrap tabs

    Hi all,

    I have been using Umbraco V7 for about a week now and I'm really enjoying using it. I have managed to transfer a site across so far without any glitches or upsets. However I need to do something like Bootstrap Tabs as seen here on their documentation

    http://getbootstrap.com/javascript/#tabs

    Im thinking of the best possible way to achieve this, do I build more document types and go for a structure like so

    PageParent
    - Title 1
    -- Section Content
    - Title 2
    -- Section Content

    Or

    Do I build a custom package ? Im just wondering what you more experienced Umbraco users would do, this still all relatively new to me and I do have experience with Angular so if someone could point me in a direction it would be much appreciated.

  • Paul 184 posts 646 karma points
    Nov 04, 2015 @ 15:06
    Paul
    0

    I've done this within Umbraco 7's grid framework.

    I used LeBlender (which is brilliant I hasten to add!), https://our.umbraco.org/projects/backoffice-extensions/leblender/

    LeBlender makes this a breeze to do. The bootstrap tab code is already there within the examples that LeBlender installs (you'll find those in Views > Partials > Grid > Editors folder).

    It's also got code for accordions as well. I ended up making my tabs responsively change to accordions for small view ports, so a best of both worlds :-) Best of all as it's built in LeBlender backoffice users can just drop an accordion/tabs section into a page when and where they wish.

    I hope that helps!

  • Paul 184 posts 646 karma points
    Nov 04, 2015 @ 15:18
    Paul
    1

    Here's a quick run through from a back office users viewpoint

    Pic 1 - Select Tabs (rather than having to go via Macros)

    Pic 2 - Enter Tab content

    Pic 3 - How the tab section looks in the back office (I set it not to render as it can be confusing within the grid)

    enter image description here

  • Chris 3 posts 73 karma points
    Nov 05, 2015 @ 11:43
    Chris
    0

    Paul, how did you actually construct this with Le Blender in the backoffice?

  • Chris 3 posts 73 karma points
    Nov 04, 2015 @ 16:22
    Chris
    0

    Paul you legend, thank you. Will have a look into le blender later, can see this will save a ton of time. Thanks again!!

Please Sign in or register to post replies

Write your reply to:

Draft