Bootstrap Navigation

of 23 /23
Bootstrap Navigation Easy and good-looking navigation tabs and bars

Embed Size (px)

Transcript of Bootstrap Navigation

  • Bootstrap Navigation Easy and good-looking navigation tabs and bars

  • Let's talk about ...

    Dropdown and dropup menus Tabs Pills Navbars

  • Remember, thinking in Bootstrap means content first, styling second

    For all of these components, you should start with the structure and the content

    Then you'll apply classes

    3

  • DROPDOWN MENUS

  • News Team

    Ron Burgundy

    Veronica Corningstone

  • News Team

    Ron Burgundy

    Veronica Corningstone

  • To make a dropup menu Wrap it in a div class="dropup"

    News Team Ron Burgundy ...

  • TABS

  • Tabbed Browsing - Content

    KQHS Channel 9

    Wes Mantooth

    Baxter's Bites

    San Diego News

    This will allow the user to click on a tab and visit that page

    But they don't look like tabs yet

    9

  • Tabbed Browsing - Styling

    KQHS Channel 9

    Wes Mantooth

    Baxter's Bites

    San Diego News

    10

  • That's great for multiple pages, but what about SPAs? For a single page application (SPA), change the

    links to internal anchors and put the target content in s

    Then we let Bootstap hide and show the divs as needed

    Like so ...

    11

  • Tabbed Sections In The Same Document 1. Put your "pages" (aka "panes") in s 2. Enclose those in a bigger 3. Enclose them and your tabs in an even bigger KQHS Channel 9 Wes Mantooth Baxter's Bites San Diego News Stuff about KQHS here Stuff about Wes here Stuff about Baxter Stuff about News here

    12

  • Tabbed Sections In Same Document - Styling

    KQHS Channel 9 Wes Mantooth Baxter's Bites San Diego News Stuff about KQHS here Stuff about Wes here Stuff about Baxter Stuff about News here

  • PILLS

  • Pills are an attractive navigation option

    (The glyphs are optional)

  • Pills are made exactly like tabs

    KQHS Channel 9 Mantooth Baxter's Bites San Diego News

  • NAVIGATION BARS

  • The Goal

    We want to create something like this:

    18

  • Remember, start with the content

    KVWN Channel 4

    Schedule

    News Team

    San Diego Sites

    Search

  • Then add classes so it will behave

    KVWN Channel 4

    Schedule

    News Team

    San Diego Sites

    Search

  • To create submenus add a nested ...

    KVWN Channel 4

    Schedule News Team Ron Burgundy Veronica Corningstone

    Brick Tamland Champ Kind Brian Fantana San Diego Sites

    ...

  • ... and assign it certain classes KVWN Channel 4

    Schedule News Team Ron Burgundy Veronica Corningstone

    Brick Tamland Champ Kind Brian Fantana San Diego Sites

    ...

  • tl;dr Bootstrap allows you to easily create navigation

    affordances like: Tabs Pills Dropdown menus Responsive navbars