Installation

This can be installed via nuget, just search for "Ams.Mvc.Bootstrap". Obviously, you'll also need to install bootstrap, either through nuget or manually. I didn't make it a dependency because I like my scripts folder to live under content, so I don't use any of the js libs via nuget, and I'm sure others are in the same boat.

Getting Started

Just installing the package won't do much for you. We've got to edit the web.config in the "Views" folder. Under the <system.web.webPages.razor> element change the following:
  • Set pageBaseType="Ams.Mvc.Bootstrap.BootstrapWebViewPage"
  • Add <add namespace="Ams.Mvc.Bootstrap" /> to namespaces

The pages element should look like this:
<pages pageBaseType="Ams.Mvc.Bootstrap.BootstrapWebViewPage">
    <namespaces>
      <add namespace="System.Web.Mvc" />
      <add namespace="System.Web.Mvc.Ajax" />
      <add namespace="System.Web.Mvc.Html" />
      <add namespace="System.Web.Routing" />
      <add namespace="Ams.Mvc.Bootstrap" />
    </namespaces>
</pages>


After that just rebuild your project.

Hopefully I can figure out to get nuget to do the above automatically when the package is installed.

Using @Bootstrap

Now that we're installed, your razor view you can now use @Bootstrap in place of @Html when you want an element formatted for bootstrap styling. This has many of them methods the methods that @Html has but not all. The major of this functionality is aimed at forms.

Example:
@Bootstrap.ActionButton("Go Home", "Index")
@Bootstrap.Button("Do Something", Btn.Primary)


Will produce:
<a class="btn-default btn" href="/Home/Index">Go Home</a>
<button class="btn-primary btn" type="button">Do Something</button>



!Examples

Below is a running list of what functionality is available.

Buttons

I'll start with buttons since that was what I coded first on my way to forms. For reference see Bootstraps documentation on their buttons

@Bootstrap.Button("Button Text") 
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

@Bootstrap.Button("Primary", Btn.Primary)
or @Bootstrap.PrimaryButton("Primary")
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

@Bootstrap.Button("Success", Btn.Success)
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

@Bootstrap.Button("Info", Btn.Info)
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

@Bootstrap.Button("Warning", Btn.Warning)
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

@Bootstrap.Button("Danger", Btn.Danger)
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
@Bootstrap.Button("Link", Btn.Link)
<button type="button" class="btn btn-link">Link</button>


Alerts

All the alerts default to including the dismiss button. The Alert enum has options the match up with the class names. See Bootstrap Alerts for reference

@Bootstrap.Alert(Alert.Success, "Changes have been saved")
or @Bootstrap.AlertSuccess("Changes have been saved")
<div class="alert alert-success">Changes have been saved</div>

@Bootstrap.Alert(Alert.Info, "Some general information")
<div class="alert alert-info">Some general information</div>

@Bootstrap.Alert(Alert.Warning, "Not looking good")
or @Bootstrap.AlertWarning("Not looking good")
<div class="alert alert-warning">Not looking good</div>

@Bootstrap.Alert(Alert.Danger, "Huston, we have a problem")
or @Bootstrap.AlertDanger("Huston, we have a problem")
<div class="alert alert-danger">Huston, we have a problem</div>

Forms

More coming soon, here's a quick example:

Given this model:
public class User 
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
    public bool RememberMe { get; set; }
}


And this Razor View:
@model User

@using(Bootstrap.Form()) 
{
    @Bootstrap.EditorForModel()
    @Bootstrap.SubmitButton("Submit")
}


You would end up with this html:
<form role="form">
  <div class="form-group">
    <label for="FirstName" class="control-label">First Name</label>
    <input type="text" class="form-control" id="FirstName" name="FirstName" placeholder="First Name">
  </div>
  <div class="form-group">
    <label for="LastName" class="control-label">Last Name</label>
    <input type="text" class="form-control" id="LastName" name="LastName" placeholder="Last Name">
  </div>  
  <div class="form-group">
    <label for="Email" class="control-label">Email</label>
    <input type="email" class="form-control" id="Email" name="Email" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="Password" class="control-label">Password</label>
    <input type="password" class="form-control" id="Password" name="Password" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember Me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>


Just change Bootstrap.Form to Bootstrap.HorizontalForm and you'll get:
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="FirstName" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="FirstName" name="FirstName" placeholder="FirstName">
    </div>
  </div>
  <div class="form-group">
    <label for="LastName" class="col-sm-2 control-label">Lsat Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="LastName" name="LastName" placeholder="Last Name">
    </div>
  </div>
  <div class="form-group">
    <label for="Email" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="Email" name="Email" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="Password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="Password" name="Password" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox" id="RememberMe" name="RememberMe"> Remember Me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Last edited Feb 6, 2014 at 7:20 PM by amsprich, version 2