Navbar

How to make a Bootstrap Navbar

We are going to explain how to reproduce a bootstrap navbar using our components to represent each navbar element.

http://www.w3schools.com/bootstrap/bootstrap_navbar.asp http://getbootstrap.com/components/#navbar

This example is by code to be more clear, but of course you can do it with the gui.

var
  ...
begin

  // add a navbar
  Navbar := TIWBSNavBar.Create(Self);
  Navbar.BSFixed := True;

  // add a navbar header inside the container
  NavbarHeader := TIWBSNavBarHeader.Create(Self);
  NavbarHeader.Parent := Navbar;

  // add a navbar collapse inside the container
  NavbarCollapse := TIWBSNavBarCollapse.Create(Self);
  NavbarCollapse.Parent := Navbar;

  // add a navbar brand inside the header
  NavbarHeaderBrand := TIWBSButton.Create(Self);
  NavbarHeaderBrand.Parent := NavbarHeader;
  NavbarHeaderBrand.Anchor := True;
  NavbarHeaderBrand.CSS := 'navbar-brand';
  NavbarHeaderBrand.Caption := 'your brand';

  // add a collapse button inside the header
  NavbarHeaderCollapse := TIWBSButton.Create(Self);
  NavbarHeaderCollapse.Parent := NavbarHeader;
  NavbarHeaderCollapse.DataTarget := NavbarCollapse;

  // add an UnorderedList to NavBarCollapse
  UnorderedList := TIWBSUnorderedList.Create(Self);
  UnorderedList.Parent := NavbarCollapse;

  // add some buttons to the UnorderedList
  Option1 := TIWBSButton.Create(Self);
  Option1.Parent := UnorderedList;
  Option1.Anchor := true;
  Option1.Caption := 'Option 1';

  Option2 := TIWBSButton.Create(Self);
  Option2.Parent := UnorderedList;
  Option2.Anchor := true;
  Option2.Caption := 'Option 2';

end