Xerte Community Documentation

User Tools

Site Tools

Trace: • Interactivity > Documentation
bootstrap

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
bootstrap [2025/02/19 14:46] – [Adding content] jsmithbootstrap [2025/12/19 10:14] (current) – [Project: Optional Properties] jsmith
Line 3: Line 3:
 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. 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]].
 +
 +:!: **New in 3.14** It has long been possible to hide/unhide pages and sections in Bootstrap; now you can also hide/unhide **items** within sections (e.g. text, audio, video, navigator, link, embedded XOT).
 ===== Example demo ===== ===== Example demo =====
  
Line 51: Line 54:
 | 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. | | 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. | | 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. |+| 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. :!: **New in 3.14**   A new **Fix Navigation bar** option allows you to pin the navigation bar to the top of the page so that it remains visible when you scroll down. |
 | Notes | Your notes for the project. These are not shown in the live project. | | 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. | | 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. |
Line 138: Line 141:
 ++++New Text...| ++++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.  +++++This adds text to the section.
  
-++++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 Text: Core properties ====
  
-++++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.  +++++^ 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 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 Text: Optional Properties ====
  
-++++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.  +++++^ Property ^ Description ^ Type ^ Additional information ^ 
 +| Disable glossary | Tick to disable the glossary, untick to activate it  | Tick box  |   | 
 +| Hide/Show text              :!: **New in 3.14** | Hides/unhides this text | Tick box | There are also **From **and **Until **fields which can be used to set specific periods when the text is hidden/displayed. | 
 + 
 +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 |   | 
 + 
 +==== New Image: Optional Properties ==== 
 + 
 +^ Property ^ Description ^ Type ^ Additional information ^ 
 +| Caption | Adds a caption below the image  |   |   | 
 +| Hide/Show image              :!: **New in 3.14** | Hides/unhides this image | Tick box | There are also **From **and **Until **fields which can be used to set specific periods when the image is hidden/displayed. | 
 + 
 +There are **no 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 |   | 
 + 
 +==== New Audio: Optional Properties ==== 
 + 
 +^ Property ^ Description ^ Type ^ Additional information ^ 
 +| Transcript | Adds a transcript button to the audio player, which displays the text on click.  | Text  |   | 
 +| Hide/Show Audio :!: **New in 3.14** | Hides/unhides this audio | Tick box | There are also **From **and **Until **fields which can be used to set specific periods when the audio is hidden/displayed. | 
 + 
 +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 |   | 
 + 
 +==== New Video: Optional Properties ==== 
 + 
 +^ Property ^ Description ^ Type ^ Additional information ^ 
 +| **iframe Aspect Ratio** | Sets the aspect ratio for videos from external sites (e.g. YouTube)  | Drop down  |   | 
 +| Hide/Show video       :!: **New in 3.14** | Hides/unhides this video | Tick box | There are also **From **and **Until **fields which can be used to set specific periods when the video is hidden/displayed. | 
 + 
 +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 in 3.14** A **Hide/Show Navigator** optional property has been added.  There are also **From **and **Until **fields which can be used to set specific periods when the navigator is hidden/displayed. 
 + 
 +There are **no Language Options** for Bootstrap > New Navigator. 
 + 
 +++++ 
 + 
 +++++ 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 |   | 
 + 
 +:!:  **New in 3.14** A **Hide/Show Link** optional property has been added.  There are also **From **and **Until **fields which can be used to set specific periods when the link is hidden/displayed. 
 + 
 +There are **no Language Options** for Bootstrap > New Link. 
 + 
 +++++ 
 + 
 +++++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 |   | 
 + 
 +:!:  **New in 3.14** A **Hide/Show PDF** optional property has been added.  There are also **From **and **Until **fields which can be used to set specific periods when the PDF is hidden/displayed. 
 + 
 +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. 
 + 
 +++++ 
 + 
 +++++ 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 ^ 
 +| 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 | 
 +| Dimensions | Allows you to set the **Width **as a percentage** **relative to the width of the content area on the page, and **Height **in pixels. | Text | Default width - 100%, Default height - 600 | 
 +| Include link | Tick to show a link to the XOT project, which opens in a lightbox or new tab/window | Tick box | You can also add **Link text **which displays with the link.  You can also hide the embedded XOT, by unticking the **Embed **tick box. | 
 +| Hide/Show XOT    :!: **New in 3.14** | Hide/show this XOT | Tick box | There are also **From **and **Until **fields which can be used to set specific periods when the video is hidden/displayed. | 
 + 
 +There are **no Language Options** for Bootstrap > New XOT Project. 
 + 
 +++++
  
-++++ 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.  +++++===== Advanced Options =====
  
-++++ 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:+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}} {{::show_advanced_options.png?nolink}}
bootstrap.1739976408.txt.gz · Last modified: by jsmith