Using O365 template with Bootstrap

This page describes how to apply and use LiU's O365-layout in an application running outside of our instance of Office365, but where we want the same look and feel.

There are three alternatives on how to use this template.

You want to use the latest Bootstrap 3, jQuery and this template. You don't want to upgrade yourself.
You want Bootstrap 3, jQuery and this template. You want the control of when Bootstrap/jQuery/O365-template are upgraded yorself.
You just want the header and footer on your pages. If you use bootstrap or not doesn't matter but it's css and javascript files must still be loaded (might have effect of your layout). Described on another page.

Requirements

Use Bootstrap 3 for styling/positioning (Note: You don't need to download it yourself, just use it, keep reading)

Alt 1 Applying stylesheets and scripts, for the "lazy"

If you dont care about bootstrap or jquery version, just want the latest stable anyway. Add this within the head-tag.

    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/latest.css" type="text/css"/> 
    <script type="text/javascript" src="//www.liu.se/mallar/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="//www.liu.se/mallar/o365bs/bootstrap.min.js"></script>
    <script type="text/javascript" src="//www.liu.se/mallar/o365bs/o365.js"></script>

Note: This loads relevant stylesheets and scripts for bootstrap to work. You don't need to load them yourself.

Note: The lastest.css-file must be loaded after other css-files you might load. Generally avoid having local css-files unless you have very special elements on your page. If you need style on something first check if it can be included in the central css-file.

Alt 2 Applying stylesheets and scripts, using specific version

Apply jquery's js-file, local or central
Apply the central bootstrap and bootstrap-theme css-files and the js-file.
Apply the central extra css-file
Avoid having local css-files unless you have very special elements on your page. If you need style on something first check if it can be included in the central css-file.

Example. (within the head-tag)

    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/bootstrap-3.1.1/css/bootstrap.min.css" type="text/css"/> 
    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/bootstrap-3.1.1/css/bootstrap-theme.min.css" type="text/css"/> 
    <link rel="stylesheet" href="//www.liu.se/mallar/o365bs/o365v2.css" type="text/css"/> 
    <script type="text/javascript" src="//www.liu.se/mallar/jquery/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//www.liu.se/mallar/o365bs/bootstrap-3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//www.liu.se/mallar/o365bs/o365.js"></script>

Note: css-files must be loaded in order.

How to use bootstrap

Using bootstrap is a lot about writing normal html-code and then applying a definded set of classes to them. See bootstrap documentation.

Forms

Make horizonal forms

Submit/Cancel/etc-buttons, both at top and bottom fo form. Use the htmlcode (with bootstrap-classes) below to get right-aligned images with correct layout.

<div class="form-group">
  <div class="col-sm-12 text-right">
    <input type="submit" value="Save" class="btn btn-primary">
    <input type="button" value="Cancel" class="btn btn-default">
  </div>
</div>

If you want to make more advanced things you should learn the bootstrap grid system.

The buttons should be right aligned with the fields.

See form example and view source to see the source for some examples.

Expandable/Collapsible sets of fields (LiU's extension)

If there are many fields if the form and you want to group them you use <fieldset>-tags.

If you add a <legend> within the <fieldset> is it displayed as a "header"

Add the class liuCollapse to the <fieldset> in order to enable the user to toggle visibility by clicking on the legend.

Also add the class liuCollapsed to the <fieldset> to make the fieldset intially collapsed.

Examples

Form example and view source to see the source.