Bootstrap

As a first step, let’s change our button to be a Bootstrap button. Change Index.iwml:

ACORN 1.0 IWML 1.0
Guess.Index[]
  SimpleStack[]
    Edit:Guess;
    Text:TryCount Guess #
    Gap;
    BS.Button:GuessButton Guess
  ]
]

Now run it again.

Now we have a Bootstrap button instead of a the built in IntraWeb button. All we had to do was add the namespace for Bootstrap (BS.) and now we have a different button. The BS.Button is upward compatible with the built in Button, as the BS.Button inherits from Button.

Let’s customize the button a little. To do this, we need to switch from the short form of IWML tags to the property syntax. Change Index.IWML:

ACORN 1.0 IWML 1.0
Guess.Index[]
  SimpleStack[]
    Edit:Guess;
    Text:TryCount Guess #
    Gap;
    BS.Button:GuessButton
      Text: Guess
      Face: Info
      ButtonSize: Large
    ]
  ]
]

We changed the Face and ButtonSize. Now it looks like this:

IntraWeb also supports Bootstrap layouts. Next, let’s add in some JQueryUI.