Differences

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

--- bootstrap [2025/01/20 14:42] – old revision restored (2025/01/19 15:32) jsmith
+++ bootstrap [2025/02/19 14:55] (current) – [Bootstrap] 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.
+:!: **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 =====
@@ Line 46: / Line 47: @@
 | 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. |
-| Full Screen Button... | This property is only visible if you have selected **Fixed Size** from the **Display Mode** drop-down in the core properties for the project (the toolbar button that toggles between full screen and fixed size is now hidden by default and will only be shown if the **Display Mode** is set to **Fixed Size**).  You can customise the icon and the text displayed on mouseover for both **Fixed Size** and **Full Screen**.:?: //Delete, only applies to XOT?// |
+| [[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. |
-| [[xot_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. |
-| Header Icon/Logo... | 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. |
-| [[xot_help_file|Help File...]] | Provides the ability to upload a file (e.g. PDF) or add a URL, to contain instructions or support material.  An icon link will be added to the project's footer to make access to the file/link available on all pages.   The icon can be customised, and  the text of the tooltip displayed on mouseover of the icon can be edited. |
+| 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. |
-| Hide Footer | Enabled, this will hide the footer of your project. |
-| Hide Header | Enabled, this will hide the header of your project. |
-| Home Page ... | Makes the LO Title in the header a clickable link to the Home Page.  By default, the home page is the first page in the project; if you want a different home page, select a page from the drop-down which appears when you add this optional property. |
-| Keyboard Language | Provides the ability to give the user keyboard language support when they are required to enter text on an interactive page.  E.g., if a language other than English is selected, a pop-up dialog of special characters (appropriate to the chosen language) will appear when the user enters a text box. |
-| [[lightbox|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. |
-| Max Width | %%Provides the option to set the maximum width (e.g. 1400px) at which the page contents will be displayed on larger displays. In 3.12 this now applies to __all pages__.%% |
 | 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 Buttons... | This allows you to customise the tooltips and the icons for the navigation buttons (Previous Page, Next Page) and for the Table of Contents.  Icons can be chosen from those available as Font Awesome characters. |
+| 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. |
-| Page Introduction Button... | On each page of your project, you have the option to add an Introduction, which displays as a lightbox, when you click on an icon in either the footer or the sidebar.  The icon can be customised, and the text of the tooltip displayed on mouseover of the icon can be edited. |
+| 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. |
-| Progress bar | Adds a graphical progress bar (with optional page counter) to the footer of the project.  This shows the percentage of the project completed as the user clicks through the project. |
-| [[project_introduction|Project Introduction...]] | Adds a lightbox which can be displayed automatically when the Learning Object is launched by the learner, or opened by clicking on an icon in the footer or sidebar.   The icon can be customised, and the text of the tooltip displayed on mouseover of the icon can be edited.  This lightbox can be used to provide an introduction to the Learning Object. |
 | Script | Provides the ability to add custom JavaScript to the project. |
-| Show/Hide Footer Tools... | This provides options for showing or hiding the footer icons for tools such as the Accessibility Options, Full Screen, Glossary etc.  The icon can be customised, and the text of the tooltip displayed on mouseover of the icon can be edited. |
+| 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.  |
-| [[xot_side_bar|Side Bar...]] | Adds a collapsible side bar to the Learning Object containing buttons which would normally be found in the footer. |
 | 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} |
-| Table of Contents... | This set of properties varies depending on the Navigation setting selected.  1) For **all Navigation options except Historic**, it allows you to hide/unhide the page numbering and the "Tick When Viewed" function.  You can also choose whether to have the Table of Contents display in a Dialog or Lightbox format.  2) For the **Menu **and **Menu with Page Controls** Navigation options, you can also select an image to display, either in a panel to the right of the menu options, or as a background to the menu options. |
-| Tracking... | Passing Score: Passing score as a decimal fraction or percentage when tracking\\ Page timeout for completion: The number of seconds a page as to be viewed to count as completed\\ Force tracking mode behaviour: Force tracking mode behaviour, even in non-tracking LO's. This changes the behaviour of some page types, i.e. in Quiz the restart button will be disabled and in drag/drop exercises, the labels will stick, even if the answer is wrong\\ Tracking Category: Label indicating the category of this learning object, stored in xAPI events, to be used for categorising in xAPI reports. The icon for the Save Session button can be customised, and the text of the tooltip displayed on mouseover of the icon can be edited. |
 | Twitter Card... | Enables a Twitter Card to be created for when a public link to this LO is shared via Twitter. |
-| [[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. |
+| [[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 =====
@@ Line 144: / Line 135: @@
 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 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...|