====== Bootstrap ======

The** Bootstrap Template** enables you to create a simple website, which you could use, for example, to organise and present learning materials for a course or course module.  If you are able to author a range of page types using **Xerte Online Toolkit **(XOT), then using the Bootstrap Template should be fairly easy, as many of the basic principles are the same. Many of the resources created by the Xerte community have been produced using the Bootstrap Template.

:!: **New in 3.13**  You can create a Simple mode for Bootstrap using a sub-template, in the same way as you can for XOT.  This has to be set up through the management.php page. \\ [[central_templates_management.php| More information on sub-templates]].
===== Example demo =====

This **Introduction to Bootstrap** site was created using the Bootstrap Template. It has a simple design (and there is a lot more you can do round design, for example of the header), but it also provides a comprehensive guide to the functionality of the Bootstrap Template.  In this wiki, this site displays much as it would on a smartphone. If you open it in a new tab (see below) it will display differently.

''{{url>https://xot.xerte.org.uk/play.php?template_id=137#page1}}''

or view at [[https://xot.xerte.org.uk/play.php?template_id=137#page1|Introduction to Bootstrap]] (opens in new tab)

===== Bootstrap Structure =====

A Bootstrap project comprises **Pages **and **Sections **within those pages.  A project can consist of only one Page, if that is all that is needed. \\

{{ :xerte-bootrap-tab.jpg}}A **Page Title** will appear as either;

  * a tab below the header (on large screens)

  * {{ :xerte-bootrap-hamburger.jpg}}or in a hamburger menu that opens up when you click on it (on smaller screens).

\\ :!: **New in 3.13**. Bootstrap projects containing a single page will now not show any page links on the page menu bar. The background of the page menu bar will still be shown as this may be an integral part of the theme in use.

{{ :xerte-bootstrap-sections.jpg}}A **Section Title** will appear as an item in a menu that displays either;

  * on the left side of the screen (on larger screens)

  * or at the top of the screen (on smaller screens).

 \\  :!: **New in 3.13**. Where a page contains a single section, the section menu will still be shown to maintain consistency between pages, but this can be hidden if required using the **Section Menu Options** optional property.

\\ {{ :bootstrap_new_section.jpg?400}}When you start creating your Bootstrap project, you will see that the first page is in place. You need to give a **Page Title,** and (optionally) a **Page Subtitle**. These are displayed in the header for the page.

\\ \\ \\

===== Project: Optional Properties =====

++++ Project: Optional Properties |

^ Property ^ Tooltip ^
| Accessibility Logo and Link | Hide the accessibility logo and link, edit the logo description, or change the link to the Xerte Accessibility Statement to an alternative statement.  You can have the statement open in a new tab/window, the current tab, or in a lightbox. |
| Alternating Sections | When enabled this adds extra padding round corners and a subtle change of background colours to alternating sections on each page.  If you are  using a custom theme, the default background colours may not be suitable; these can be changed by using .oddSection and .evenSection styles.  |
| Author Support | Enabled, this property adds support comments (in red text) to help authors design pages.  These support comments only show in the Preview and not in the published project, and include unique IDs and Labels. Helpful for complex page setup such as with the Inventory page (where answers are matched to categories) or the Decision tree page. |
| Back to Top Button | Hide Back to top buttons, or change their appearance {**'Top' text**/Circle with arrow} |
| Disable Theme url | If you set access to Public in the Project Properties a Learning Object's theme can be overridden __in the browser__ by adding a url parameter (i.e. a string of characters) to the url.  For example, this url parameter, //&theme=flatblue// , changes the theme to the Flat Blue theme. The theme can only be changed to one of those available in the host installation. The theme url parameter to use, when changing a theme by this method, is shown in each theme's description in the Project Settings, and is often shorter and not the same as the display name of the theme. However, as an author you can tick this optional property, if you wish, to disable this feature. This stops learners and other users changing the theme you have chosen. |
| Footer | Hides the footer, allows you to customise the footer, and change the footer background colour. |
| [[bootstrapprojop_glossary|Glossary]] | Adds a table to the root page of the project, where terms and definitions can be added. Wherever these terms are used in the project they will be highlighted by a dashed underline. Hovering the mouse over the term will reveal a tooltip with the definition.  An icon will also be added to the footer of the project.   The icon can be customised, and the text of the tooltip can be edited.  Individual page types have the optional property to 'Disable Glossary' where this support would interfere with student activity. |
| Header... | Provides the ability to upload an image to display (for example as a logo) in the project header.  The image dimensions should be small.  The image can be hidden/unhidden and positioned left or right in the header. |
| JavaScript Libraries | Enter JavaScript library URLs in the table, with each URL in a new row, or upload a CSV file. |
| Lightbox... | By default, clicked images will open in a lightbox (i.e. a pop up that overlays the main page). Use these properties to turn the lightbox functionality on/off for the whole project. A lightbox property is also available on each page.  You can also add a caption above or below the image. |
| Metadata... | Course: Label indicating the course this learning object is part of, used to create meta data in SCORM objects. This is also stored in xAPI events.\\ Module: Label indicating the module/subject of this learning object, used to create meta data in SCORM objects. This is also stored in xAPI events. |
| Navigation bar... | The Navigation bar may display as a bar across the screen, or a hamburger dropdown on smaller screen sizes. You can position the Navigation bar above or below the header, and change the colours of the background, the text and the text on hover. |
| Notes | Your notes for the project. These are not shown in the live project. |
| Print Button | Adds a print button to the Navigation bar.  Pages can still be printed via the browser controls if this button is not added. |
| Script | Provides the ability to add custom JavaScript to the project. |
| Search... | This allows learners to search the Bootstrap, using filters.  Here you need add the Categories for the filters, and the Options in those Categories. You can also add some text, for example an explanation of the Search function, or instructions for using it.  You then need to allocate pages or sections in those pages to the Categories and Options, using the Filter Categories optional property at page and section level.   The [[https://xot.xerte.org.uk/USER-FILES/81-xerteproject-site/media/Bootstrap%20Search%20Documentation.pdf|Bootstrap Search Guide]] provides more information.  |
| Styles | Provides the ability to add custom CSS to change the appearance of HTML elements in the project.  At root level the CSS will affect all pages, or it can be added to individual pages to just affect that one. |
| Stylesheet | Provides the ability to upload and apply a separate CSS stylesheet file to change the appearance of HTML elements of the whole project. |
| Surface Global Variables | Enabled, this provides the ability to call the following data %%within text fields using the following markup:%%{globalVars.dateCreated} or {globalVars.lastUpdated} or {globalVars.numViews} |
| Twitter Card... | Enables a Twitter Card to be created for when a public link to this LO is shared via Twitter. |
| [[bootstrapprojop_variables|Variables]] | Provides the ability to add custom variables which can be called in subsequent pages in the project.  A linked guide is provided with instructions and examples. |

++++


===== Page: Optional Properties =====

++++Page: Optional Properties|

| **Property** | **Sub-property** | **Description** | **Type** | **Additional information** |
| Access | Access Code(s) | A code that allows the learner to access this section  | Text  | Separate codes with a comma if you want multiple codes  |
| ::: | Case Sensitive | Tick this box if you want the code(s) to be case sensitive | Tick box |   |
| ::: | Instructions | An instruction displayed above the Access Code text-entry box | Text+ (Toolbar) | Default - "Enter an access code below to view this section:" |
| ::: | Error Message | Error message displayed if the learner inputs the wrong Access Code | Text+ (Toolbar) | Default - "Invalid Access Code" |
| ::: | Button Label | Text on the button for submitting Access Code | Text | Default - "Submit" |
| Filter Categories || Has to be used in conjunction with **Search **from the project-level Optional Properties.  The Search categories must be set up first, as the filter categories for this section are ticked from this list.  | Tick boxes  |   |
| Header... | Image | Upload any image that you want to include in the header, through Media Browser  | Link to Media Browser  | You do not have to include an image in the header.  |
| ::: | Image Position | The position of the image within the header {**Left**/Centre/Right}  | Drop-down  |   |
| ::: | Image Repeat | If your image is not the same proportions as the header, you can have it repeat to fill the space {**Horizontal and Vertical Repeat **/ Horizontal Repeat /  Vertical Repeat / No Repeat }  | Drop-down  |   |
| ::: | Title Position | The position of the Page Title and Page Subtitle in the header {**Right**/Centre/Left}  | Drop-down  |   |
| ::: | Background colour | Colour of the header background  | Colour Picker  |   |
| ::: | Text Colour | Colour of the Page Title and Page Subtitle text  | Colour picker  |   |
| ::: | Banner | You can either fix the height of the header, or have it fill the whole screen when the learner lands on it  {**Fixed Height**/Full Screen} | Drop-down  | If you choose **Full Screen**, 3 more sub-properties appear: **Title top margin (%) **sets the position of the Page Title and Page Subtitle relative to the top of the banner; **Collapse Banner** collapses the banner when the learner starts scrolling down the page (recommended); **Enable scroll down info **prompts the learner to scroll down to see the menu and page content  |
| ::: | Fixed height | If you have chosen Fixed Height as the **Banner **property (see row above) ticking the box allows you set a specific height, and leaving it unticked sets a fixed height large enough to display the Page Title and the Page Subtitle  | Tick box  | If you tick this box, an sub-property **Banner Height **appears, in which you can set the banner height  |
| Hide/Show Page...  | Hide Page  | Use this tick box to hide the Page  | Tick box  | If you want the Section to be hidden at all times, use this tick box and don't add dates/times in the fields below  |
| ::: | From  | Enter a date here, if you want the Page to be hidden __from__ a specific date  | Date picker  | Use in conjunction with **Hide Page **tick box  |
| ::: | From (hh:mm) | Enter the time relating to the date above  | Number  | Use in conjunction with **Hide Page **tick box  |
| ::: | Until | Enter a date here, if you want the Page to be hidden __until__ a specific date | Date picker | Use in conjunction with **Hide Page **tick box |
| ::: | Until (hh:mm) | Enter the time relating to the date above | Number | Use in conjunction with **Hide Page **tick box |
| Lightbox... | Lightbox Images | This opens any images as lightboxes  | Tick box | This property is only relevant if you have added images to this Section  |
| ::: | Caption | {**None**/Below Image/Above image} Position of the **Image Description** for the image  | Drop-down | This property is only relevant if you have added an image as a subsection (i.e. __not embedded__ in a Text subsection)  |
| Notes || A space to add notes that are not displayed in the live project | Text+ (Toolbar) |   |
| Page ID || Creates a link directly to this page, by adding #yourID at the end of the project URL.  This link can be added to other pages though any Toolbar. | Text | Please note that IDs are case sensitive, should not include spaces or the words 'page' or 'section' and each ID must be unique within the whole project.  |
| Page Link || By default the Page Title appears in the Navigation Bar/hamburger menu. If you want different text to appear, add it here.  | Text  |   |
| Section Menu Options | Hide menu | Allows you to hide the menu of Sections for this page  | Tick box |   |
| ::: | Expand main contents | Expands the content to fill the whole width of the screen (i.e. filling space usually occupied by the Section menu) | Tick box  | This sub-property only appears when you tick the **Hide Menu** box. |
| Stand-Alone Page... | Remove from Page Menu  | Removes the Page from the Page Menu, so that it can only be accessed via Xerte page links  | Tick box  |   |
| ::: | Open in New Window | Links to this page will open in a new window | Tick box |   |
| ::: | Hide Header | Hides header | Tick box |   |
| ::: | Navigation Bar | { Default / **Back Button Only** / Hidden } | Drop-down | **Default **is the normal navigation bar/hamburger bar, displaying all the other pages in the project (unless they have been hidden. **Back Button Only **replace this with a Back button taking the previous page in the project. |
| Variables... | Submit Message  |   |   |   |
|   | Update Variables |   |   |   |

and you will have to add a **New Section** to that page. \\ \\ You need to give the Section a Title, which will appear as a heading for the section, and as a menu item for the page.\\ \\

++++

===== Section: Optional Properties =====

++++Section: Optional Properties|

| **Property** | **Sub-property** | **Description** | **Type** | **Additional information** |
| Access | Access Code(s) | A code that allows the learner to access this section  | Text  | Separate codes with a comma if you want multiple codes  |
| ::: | Case Sensitive | Tick this box if you want the code(s) to be case sensitive | Tick box |   |
| ::: | Instructions | An instruction displayed above the Access Code text-entry box | Text+ (Toolbar) | Default - "Enter an access code below to view this section:" |
| ::: | Error Message | Error message displayed if the learner inputs the wrong Access Code | Text+ (Toolbar) | Default - "Invalid Access Code" |
| ::: | Button Label | Text on the button for submitting Access Code | Text | Default - "Submit" |
| Filter Categories || Has to be used in conjunction with **Search **from the project-level Optional Properties.  The Search categories must be set up first, as the filter categories for this section are ticked from this list.  | Tick boxes  |   |
| Hide/Show Section...  | Hide Section  | Use this tick box to hide the Section  | Tick box  | If you want the Section to be hidden at all times, use this tick box and don't add dates/times in the fields below  |
| ::: | From  | Enter a date here, if you want the Section to be hidden __from__ a specific date  | Date picker  | Use in conjunction with **Hide Section **tick box  |
| ::: | From (hh:mm) | Enter the time relating to the date above  | Number  | Use in conjunction with **Hide Section **tick box  |
| ::: | Until | Enter a date here, if you want the Section to be hidden __until__ a specific date | Date picker | Use in conjunction with **Hide Section **tick box |
| ::: | Until (hh:mm) | Enter the time relating to the date above | Number | Use in conjunction with **Hide Section **tick box |
| Lightbox... | Lightbox Images | This opens any images as lightboxes  | Tick box | This property is only relevant if you have added images to this Section  |
| ::: | Caption | {**None**/Below Image/Above image} Position of the **Image Description** for the image  | Drop-down | This property is only relevant if you have added an image as a subsection (i.e. __not embedded__ in a Text subsection)  |
| Section ID || Create a link directly to this section by adding a unique Section ID and then appending #yourSectionID to the end of the project URL. | Text | Please note that IDs are case sensitive, should not include spaces or the words 'page' or 'section' and each ID must be unique within the whole project. |
| Subsection Links || Adds a list of subsections below the **Section Title**.  Subsections which are hidden will not be displayed.  | Drop-down |   |

++++

===== Adding content =====

Next you need to add content to the page; there are 8 different types of content you can add.  Click on the headings below to open up information about each one.

:!: **New in 3.13.** The automated footer is a sticky footer and will be shown at the bottom of the browser window on pages containing little content. If you don't require a footer, it can be hidden using the Project > Optional Properties > Footer setting.

++++New Text...|

This adds text to the section.

==== New Text: Core properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Title | Adds a title in bold, just __above any text you add__ (see row below) in this section | Text |   |
| Text | Text you can add for display below the Title | Text+ (Toolbar) | Use this to give the context or instructions for the task.  Other content (e.g. images, audio, video) can be embedded here. |
| Show Title | Tick to display the Title, untick to hide | Tick box |   |

==== New Text: Optional Properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Disable glossary | Tick to disable the glossary, untick to activate it  | Tick box  |   |

There are **no Language Options** for Bootstrap > New Text.

++++

++++New Image...|

This adds an image to the section.

==== New Image: Core properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Title | Adds a title in bold, just __above any text you add__ (see row below) in this section | Text |   |
| Image | Adds an image below the Title | Link to Media Browser |   |
| Image Description | Enter a Description for Accessibility | Text |   |
| Show Title | Tick to display the Title, untick to hide | Tick box |   |

There are **no Optional Properties or Language Options** for Bootstrap > New Image.

++++

++++New Audio...|

This adds an audio file to the section.

==== New Audio: Core properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Title | Adds a title in bold, just __above the audio player__ (see row below) in this section | Text |   |
| Sound | Upload the audio file here, through Media Browser | Link to Media Browser |   |
| Show Title | Tick to display the Title, untick to hide | Tick box |   |

There are **no Optional Properties or Language Options** for Bootstrap > New Audio.

++++

++++New Video...|

==== New Video: Core properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Title | Adds a title in bold, just __above the video player__ (see row below) in this section | Text |   |
| Video | Upload the video file here, through Media Browser, or add the URL or embed code for external sites. | Link to Media Browser | :!: From 3.13, YouTube, Vimeo, PeerTube (open source), Mediasite, Yuja and uploaded MP4 are supported.  |
| Show Title | Tick to display the Title, untick to hide | Tick box |   |

There is only one Optional Property, **iframe Aspect Ratio**, which sets the aspect ratio for videos from external sites (e.g. YouTube).

There are **no Language Options** for Bootstrap > New Video.

++++

++++New Navigator...|

This inserts a section which presents content organised through a choice of navigators: **Accordion**, **Carousel**, **Pills **or **Tabs**.  Accordion presents headings which reveal content when you click on them. Carousel presents content in a kind of slideshow, with < and > icons for navigation. **Pills **and **Tabs **present content in a similar way, but with differently shaped tabs. [[https://xot.xerte.org.uk/play.php?template_id=137#page3section1|This page from the Bootstrap demo]] provides examples.

==== New Navigator: Core properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Title | Adds a title in bold, just __above the navigator options__ (see row below) in this section | Text |   |
| Type | Select the type of navigator you want to include { Accordion / Carousel / Pills / **Tabs**} | Drop-down |   |
| Show Title | Tick to display the Title, untick to hide | Tick box |   |

After you have created the overall settings for this section and decided which type of navigator to use, you need to a **New Pane** for each batch of content within the navigated section, and then within each Pane, you choose the type of content from the 8 categories (Text, Image, Audio, Video, Link, PDF File, XOT Project). It is theoretically possible to add several different types of content within a Pane, but in practice it is better to put different types of content in different Panes. :!: ** New in 3.13** A new Pane ID optional property has been added; this allows you link directly to a pane.

==== New Text: Optional Properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Auto-Play (Carousel Only): Auto-Play | Tick to have the Carousel auto-play when the learner lands on the section  | Tick box  |   |
| Auto-Play (Carousel Only): Delay | The delay in seconds before | Number |   |
| Collapse Accordion | Tick for all accordion panes to start collapsed when the learner lands on the section | Tick box |   |

There are **no Language Options** for Bootstrap > New Text.

++++

++++ New Link...|

This adds a link to an external webpage to the section, which opens in a new window.

==== New Link: Core properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Title | Adds a title in bold, just __above any text you add__ (see row below) in this section | Text |   |
| URL | The URL for the destination webpage | Text |   |

:?:  //There are 9 Optional Properties for New Link, but it is not clear what these do.//

There are **no Language Options** for Bootstrap > New Text.

++++

++++New PDF File...|

This adds a PDF file to the section. This is embedded, but also has a link below it, opening the PDF in a new tab.

==== New PDF File: Core properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Title | Adds a title in bold, just __above the PDF file__ (see row below) in this section | Text |   |
| PDF file | Upload the PDF file here, through Media Browser | Link to Media Browser |   |
| Show Title | Tick to display the Title, untick to hide | Tick box |   |

There is **only one Language Option** for Bootstrap > New PDF File - this allows you to change the text on the link to open the PDF in a new tab.

There are **no Language Options** for Bootstrap > New PDF File.

++++

++++ New XOT Project...|

You can embed a whole XOT project, or a specific page from a project, and hide the project header or footer.  :!: **New in 3.13**  You can now add a page from an XOT using its page ID.

==== New XOT Project: Core properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Title | Adds a title in bold, just __above the embedded XOT Project__ | Text |   |
| Xerte Project Link | The URL of the XOT Project | Text |   |
| Hide Header | Hides the header of the XOT project | Tick box |   |
| Hide Footer | Hides the footer of the XOT project | Tick box |   |
| Show Title | Tick to display the Title, untick to hide | Tick box |   |

==== New XOT Project: Optional Properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Embed | Tick to embed the XOT project in the section  | Tick box  | You can tick both **Embed **and **Show Link **(see below) at the same time, but it is not recommended  |
| Height | Height of the embedded XOT project in pixels | Number | Default - "100%" |
| Page | If you want a specific page in the XOT project to display, enter the page number here | Number | If you don't want learners to navigate to other pages, tick **Hide Footer** in the Core Prpoerties |
| Show link | Tick to show a link to the XOT project, which opens in a new tab | Tick box | You can tick both **Show Link **and **Embed **(see above) at the same time, but it is not recommended |
| Width | Width of the embedded XOT project relative to the width of the content area on the page | Percentage | Default - "100%" |

There are **no Language Options** for Bootstrap > New XOT Project.

++++

===== Advanced Options =====

For any section in the Bootstrap you can also show the **Advanced Options** from the bottom of the editor window:

{{::show_advanced_options.png?nolink}}

This reveals options to add custom Javascript or HTML code, or add a canvas.