Get Bootstrap Crazy with Book Modules

Site: Learnbps
Course: US Moot Presentation
Book: Get Bootstrap Crazy with Book Modules
Printed by: Guest user
Date: Wednesday, May 29, 2024, 4:26 PM

Description

Moodle Header



Get Bootstrap Crazy with Book Modules



David Sherwin, Bismarck Public School District


Introduction

Moodle Header


Get Bootstrap Crazy with Book Modules



David Sherwin, Bismarck Public School District


Book Module

MoodleMootBanner

Book iconBook Module

MoodleMootBanner
MoodleMootBanner
MoodleMootBanner

MoodleMootImage

Bootstrap

MoodleMootBanner

BootStrap IconBootstrap

Uses the responsive flexbox grid to build layouts of all shapes and sizes to a twelve column system. 

Uses a series of containers, rows, and columns to layout and align content.

Example
MoodleMootFooter

Heading Example Display Heading Handle
<h1> </h1>

Heading 1

<h1 class="display-1"> </h1>

Display 1

<h2> </h2>

Heading 2

<h1 class="display-2"> </h1>

Display 2

<h3> </h3>

Heading 3

<h1 class="display-3"> </h1>

Display 3

<h4> </h4>

Heading 4

<h1 class="display-4"> </h1>

Display 4


<h2>Customized
  <small class="text-muted"> Heading</small></h2>

Customized Heading

Blockquotes

The difference between school and life: Schools teaches you lessons and then gives you a test. Life gives you a test and you learn the lessons.

Tom Bodett in The End of the Road

MoodleMootFooter

Alerts
Use color to add a visual indication
Alerts can also contain additional HTML elements like headings, paragraphs and dividers
It’s possible to dismiss any alert inline
Color choices of primary - secondary - info - success - warning - danger

Badge
While the styling of badges provides a visual cue they may be confusing for users.

Buttons
Bootstrap includes several predefined button styles:

Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel

Collapse

Toggle the visibility of content across your project
Accordion
Bootstrap Collapse Accordion example image

Targets
Bootstrap Collapse Target example image

Dropdowns
are toggleable, interactive buttons for displaying lists of links and more.

Jumbotron
A lightweight, flexible component to showcase messages on your site:

learnbps logoLearnbps

Welcome to Bismarck Public School's Blended Spaces.


bps logo uses this site for...

Assignments  Chat  Feedback
Forums  choice  glossary
external tool  lesson  wiki
book  url  database
page  file  quiz

Modal
Are a popup that's customizable and responsive to display videos and images in a website
Modal Example image


MoodleMootFooter

MoodleMootImage

Filters & Plugins ...

MoodleMootBanner

moodle Icon  Filters & Plugins

Atto HTML editor!

An HTML editor is a program for editing HTML, the markup of a web page. 


Although the HTML markup in a web page can be controlled with any text editor, customizing HTML editors can offer convenience and added functionality.

Atto Editor

Other Atto Plugins

MoodleMootBanner

iframe

MoodleMootBanner

Graphical Interpretation of a Linear Equation

Graphically, where the equation
y = mx + b

Graphical Interpretation of a Linear Equation

Graphically, where the equation
y = mx + b
Glossary auto-linking filter

Glossary IconGlossary auto-linking is a site Filter that will create links to a glossary activity entry where the word or phrase of the glossary entry is used within the same course in which the glossary is located.

Graphical Interpretation of a Linear Equation

Graphically, where the equation
y = mx + b

Filters: Embed Questions Quiz IconThis filter allows questions from the question bank to be embedded anywhere that users can input HTML. This can be used in various ways. It can be a way to make learning materials more interactive.

Question type: Formulas question

formula question typeThis is a question type plugin for Moodle with random values and multiple answer fields. The answer fields can be placed anywhere in the question so that we can create questions involving various answer structures such as coordinate, polynomial and matrix. These functionalities can simplify the creation of questions in many fields related to mathematics.


Guest users do not have permission to interact with embedded questions.

MoodleMootBanner

MoodleMootImage

Wrap-Up

moodle M


image logo

Bootstrap

Book Module

Book Module



 Question & Answer

moodle M



 http://bit.ly/BootstrapCrazyBook


MoodleFooterImage

How to ...

asdf

BS Layout - FlexGrid

BS Content

Heading Example Display Heading Handle
<h1> </h1>

Heading 1

<h1 class="display-1"> </h1>

Display 1

<h2> </h2>

Heading 2

<h1 class="display-2"> </h1>

Display 2

<h3> </h3>

Heading 3

<h1 class="display-3"> </h1>

Display 3

<h4> </h4>

Heading 4

<h1 class="display-4"> </h1>

Display 4


<h2>Customized
  <small class="text-muted"> Heading</small></h2>

Customized Heading

Blockquotes

The difference between school and life: Schools teaches you lessons and then gives you a test. Life gives you a test and you learn the lessons.

Tom Bodett in The End of the Road

BS Components

Alerts
Use color to add a visual indication
Alerts can also contain additional HTML elements like headings, paragraphs and dividers
It’s possible to dismiss any alert inline
Color choices of primary - secondary - info - success - warning - danger

Badge
While the styling of badges provides a visual cue they may be confusing for users.

Buttons
Bootstrap includes several predefined button styles:

Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel

Collapse

Toggle the visibility of content across your project
Accordion
Bootstrap Collapse Accordion example image

Targets
Bootstrap Collapse Target example image

Dropdowns
are toggleable, interactive buttons for displaying lists of links and more.

Jumbotron
A lightweight, flexible component to showcase messages on your site:

learnbps logoLearnbps

Welcome to Bismarck Public School's Blended Spaces.


bps logo uses this site for...

Assignments  Chat  Feedback
Forums  choice  glossary
external tool  lesson  wiki
book  url  database
page  file  quiz

Modal
Are a popup that's customizable and responsive to display videos and images in a website
Modal Example image

-> Carousel

--> Trigger

How to create a trigger
Share With a detail and summary


Plugins / Filters

  • Embed Question
  • <iframe>
  • Glossary Auto-Filter
  • Atto Editor
  • Snippet

Embed Question

Graphical Interpretation of a Linear Equation

Graphically, where the equation
y = mx + b

Graphical Interpretation of a Linear Equation

Graphically, where the equation
y = mx + b
Glossary auto-linking filter

Glossary IconGlossary auto-linking is a site Filter that will create links to a glossary activity entry where the word or phrase of the glossary entry is used within the same course in which the glossary is located.

Graphical Interpretation of a Linear Equation

Graphically, where the equation
y = mx + b

Filters: Embed Questions Quiz IconThis filter allows questions from the question bank to be embedded anywhere that users can input HTML. This can be used in various ways. It can be a way to make learning materials more interactive.

Question type: Formulas question

formula question typeThis is a question type plugin for Moodle with random values and multiple answer fields. The answer fields can be placed anywhere in the question so that we can create questions involving various answer structures such as coordinate, polynomial and matrix. These functionalities can simplify the creation of questions in many fields related to mathematics.


Guest users do not have permission to interact with embedded questions.

iframe

iframe

Atto Editor

Atto HTML editor!

An HTML editor is a program for editing HTML, the markup of a web page. 


Although the HTML markup in a web page can be controlled with any text editor, customizing HTML editors can offer convenience and added functionality.

Atto Editor

Other Atto Plugins