J4.x:Using Bootstrap Components in Joomla 4 - Revision history

Cmb: Several markup changes.

2023-09-24T20:45:28Z

Several markup changes.

← Older revision		Revision as of 20:45, 24 September 2023
Line 248:		Line 248:
	Alerts may be used in html code without JavaScript support. This is only needed for the dismiss capability. HTML code example:		Alerts may be used in html code without JavaScript support. This is only needed for the dismiss capability. HTML code example:

	<~~pre~~><div class="alert alert-warning alert-dismissible fade show" role="alert">		<syntaxhighlight lang="html">
			<div class="alert alert-warning alert-dismissible fade show" role="alert">
	<strong>Holy guacamole!</strong> You should check in on some of those fields below.		<strong>Holy guacamole!</strong> You should check in on some of those fields below.
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div></~~pre~~>		</div>
			</syntaxhighlight>

	Example result of including a module in an article:		Example result of including a module in an article:
Line 262:		Line 264:
	Buttons may be used in HTML code without JavaScript support. This is only needed for the sometimes subtle change of style applied to buttons with a change of state, styled active. Bootstrap example code:		Buttons may be used in HTML code without JavaScript support. This is only needed for the sometimes subtle change of style applied to buttons with a change of state, styled active. Bootstrap example code:

	<~~pre~~><p><button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>		<syntaxhighlight lang="html">
			<p><button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
	<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>		<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
	<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button></p></pre>		<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button></p></pre>
	<pre><p><a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>		<pre><p><a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
	<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>		<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
	<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a></p></~~pre~~>		<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a></p>
			</syntaxhighlight>

	With this style in the template user.css:		With this style in the template user.css:
Line 458:		Line 462:
	Tabs are often used as navigation elements combined with dropdowns. Bootstrap example code:		Tabs are often used as navigation elements combined with dropdowns. Bootstrap example code:

	<syntaxhighlight lang="~~php~~">		<syntaxhighlight lang="html">
	<ul class="nav nav-tabs">		<ul class="nav nav-tabs">
	<li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Active</a></li>		<li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Active</a></li>
Line 504:		Line 508:
	A tooltip is a small piece of text that appears on hover over a button or link element to explain what it is or does. The tooltip can be positioned above or below or to the left or right of the element. If not specified the default position is top. The tooltip will switch to another position if there is insufficient room in the specified position. Example Bootstrap code:		A tooltip is a small piece of text that appears on hover over a button or link element to explain what it is or does. The tooltip can be positioned above or below or to the left or right of the element. If not specified the default position is top. The tooltip will switch to another position if there is insufficient room in the specified position. Example Bootstrap code:

	<~~pre~~><p><button class="btn btn-secondary" title="Tooltip on left" type="button" data-bs-toggle="tooltip" data-bs-placement="left"> Tooltip on left </button>		<syntaxhighlight lang="html">
			<p><button class="btn btn-secondary" title="Tooltip on left" type="button" data-bs-toggle="tooltip" data-bs-placement="left"> Tooltip on left </button>
	<button class="btn btn-secondary" title="Tooltip" type="button" data-bs-toggle="tooltip"> Tooltip </button>		<button class="btn btn-secondary" title="Tooltip" type="button" data-bs-toggle="tooltip"> Tooltip </button>
	<button class="btn btn-secondary" title="Tooltip on top" type="button" data-bs-toggle="tooltip" data-bs-placement="top"> Tooltip on top </button>		<button class="btn btn-secondary" title="Tooltip on top" type="button" data-bs-toggle="tooltip" data-bs-placement="top"> Tooltip on top </button>
Line 511:		Line 516:
	<button class="btn btn-secondary" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" type="button" data-bs-toggle="tooltip" data-bs-html="true"> Tooltip with HTML </button></p>		<button class="btn btn-secondary" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" type="button" data-bs-toggle="tooltip" data-bs-html="true"> Tooltip with HTML </button></p>
	<p>Tooltip triggered by class: <button class="btn btn-warning" title="Tooltip Message">Alert!</button></p>		<p>Tooltip triggered by class: <button class="btn btn-warning" title="Tooltip Message">Alert!</button></p>
	</~~pre~~>		</syntaxhighlight>

	Result:		Result:
Line 519:		Line 524:
	== Approach 2: Using a Content Plugin ==		== Approach 2: Using a Content Plugin ==
	The steps involved:		The steps involved:

	* Download, install and enable this plugin: https://github.com/ceford/j4xdemos-plg-bscompos/raw/master/plg_j4xdemos_bscompos.zip		* Download, install and enable this plugin: https://github.com/ceford/j4xdemos-plg-bscompos/raw/master/plg_j4xdemos_bscompos.zip
	* In the article add the text that the plugin acts on~~, for~~ example ''{bscompos modal carousel}'' will trigger loading of the JavaScript necessary to support a modal dialog and a carousel. The plugin removes the trigger text and enclosing (now) empty <nowiki><p></p></nowiki> tags.		* In the article add the text that the plugin acts on. For example ''{bscompos modal carousel}'' will trigger loading of the JavaScript necessary to support a modal dialog and a carousel. The plugin removes the trigger text and enclosing (now) empty <nowiki><p></p></nowiki> tags.
	* Include the Bootstrap Component HTML code directly in the article or in a module ~~included~~ in the article. There is example HTML code below for a simple Modal and a Modal containing a Carousel. Note that this will not work if the HTML code is in a module in a template location.		* Include the Bootstrap Component HTML code directly in the article or in a module invoked in the article. There is example HTML code below for a simple Modal and a Modal containing a Carousel. Note that this will not work if the HTML code is in a module in a template location.
	* This will also work for a standard Custom module if the ''Prepare Content Option'' is set to ''Yes''.		* This will also work for a standard Custom module if the ''Prepare Content Option'' is set to ''Yes''.
	* Test it!		* Test it!
Line 528:		Line 532:
	== Approach 3: Using a Template Override ==		== Approach 3: Using a Template Override ==
	The steps involved:		The steps involved:
	* Create a mod_custom template override.		* Create a ''mod_custom'' template override.
	* Add a ~~mod_custom~~ module containing the component markup and trigger classes.		* Add a module of type custom containing the component markup and trigger classes.
	* ~~Include~~ the module in an article.		* Load the module into an article using [[How do you put a module inside an article?\|''loadposition'', ''loadmodule'' or ''loadmoduleid'']].

	=== The mod_custom Template Override ===		=== The ''mod_custom'' Template Override ===
	* In the Administrator ~~interface~~ go to {{rarr\|System, Site Templates, Cassiopeia Details and Files}}.		* In the Administrator go to {{rarr\|System, Site Templates, Cassiopeia Details and Files}}.
	* Select {{rarr\|Create Overrides, mod_custom, default.php}}.		* Select {{rarr\|Create Overrides, mod_custom, default.php}}.
	* On the line following ''defined('_JEXEC') or die;'' add this code:		* On the line following ''defined('_JEXEC') or die;'' add this code:
	<~~pre~~>$module_class = $params->get('moduleclass_sfx');		<syntaxhighlight lang="php">
			$module_class = $params->get('moduleclass_sfx');
	if (!empty($module_class))		if (!empty($module_class))
	{		{
Line 588:		Line 593:
	}		}
	}		}
	</~~pre~~>		</syntaxhighlight>
	This code searches for class names set in mod_custom and makes the HTMLHelper call to set up the JavaScript support. Note that the last item in each call is a selector that may or may not be used to trigger action. Many of the components are triggered by data attributes in the mark-up and they do not use the selectors here. For some, the selector is needed. For example, it makes sense to use the '''.btn''' class and the '''a''' tag to trigger Tooltips.		This code searches for class names set in mod_custom and makes the HTMLHelper call to set up the JavaScript support. Note that the next to last item in each call is a selector that may or may not be used to trigger action. Many of the components are triggered by data attributes in the mark-up and they do not use the selectors here. For some, the selector is needed. For example, it makes sense to use the ''.btn'' class and the ''a'' tag to trigger Tooltips.

	=== A ''mod_custom'' Module for a Modal Component ===		=== A ''mod_custom'' Module for a Modal Component ===

Cmb: Replaced deprecated 'source' tags with 'syntaxhighlight' tags. Other markup changes.

2023-09-22T22:24:49Z

Replaced deprecated 'source' tags with 'syntaxhighlight' tags. Other markup changes.

Show changes

Cmb: Removed warnings about an earlier version of Bootstrap. Corrected deafult to default.

2022-08-24T18:30:09Z

Removed warnings about an earlier version of Bootstrap. Corrected deafult to default.

Show changes

Cmb: Corrected some title capitalization. Changes for Words2Watch compliance.

2022-08-24T16:30:56Z

Corrected some title capitalization. Changes for Words2Watch compliance.

Show changes

Zeus07: /* Tab */

2022-06-18T18:31:10Z

Tab

← Older revision		Revision as of 18:31, 18 June 2022
Line 177:		Line 177:

	<pre>		<pre>
	\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.~~tabs~~', '.selector', []);		\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tab', '.selector', []);
	</pre>		</pre>

Ceford: Typo report to support

2022-02-02T19:32:31Z

Typo report to support

← Older revision		Revision as of 19:32, 2 February 2022
Line 3:		Line 3:
	=== Bootstrap Components ===		=== Bootstrap Components ===

	Some of the components described in the Bootstrap documentation use CSS only. For example, the Breadcrumbs component is rendered with CSS and requires no Javascript support. Others respond to user actions such as click or hover, and need Javascript ~~report~~. The latter are referred to here as Interactive Components. This article explains how to use them in Articles and a Custom Module.		Some of the components described in the Bootstrap documentation use CSS only. For example, the Breadcrumbs component is rendered with CSS and requires no Javascript support. Others respond to user actions such as click or hover, and need Javascript support. The latter are referred to here as Interactive Components. This article explains how to use them in Articles and a Custom Module.

	See: [https://getbootstrap.com/docs/5.0/getting-started/introduction/ Bootstrap Documentation]		See: [https://getbootstrap.com/docs/5.0/getting-started/introduction/ Bootstrap Documentation]

AMurray: /* Example 3: Corousel */ typo correction.

2021-05-03T22:10:13Z

Example 3: Corousel: typo correction.

← Older revision		Revision as of 22:10, 3 May 2021
Line 303:		Line 303:
	The buttons toggle between blue and green.		The buttons toggle between blue and green.

	=== Example 3: ~~Corousel~~ ===		=== Example 3: Carousel ===

	The Carousel offers a slide show cycling through a series of images or text panes. The following example used images from the Joomla 4 Sample. Bootstrap code:		The Carousel offers a slide show cycling through a series of images or text panes. The following example used images from the Joomla 4 Sample. Bootstrap code:

Ceford: Removed under construction label

2021-04-01T12:34:11Z

Removed under construction label

← Older revision		Revision as of 12:34, 1 April 2021
Line 1:		Line 1:
	~~{{underconstruction}}~~

	== Introduction ==		== Introduction ==

Ceford: /* Toast */

2021-03-28T14:56:41Z

Toast

← Older revision		Revision as of 14:56, 28 March 2021
Line 226:		Line 226:
	* '''autohide''', boolean, deafult:'''true''' Auto hide the toast		* '''autohide''', boolean, deafult:'''true''' Auto hide the toast
	* '''delay''', number , deafult:'''5000''' Delay hiding the toast (ms)		* '''delay''', number , deafult:'''5000''' Delay hiding the toast (ms)

			=== See Also ===

			* '''Accordian''' uses Collapse to display panels of data.
			* '''List Group''' can be combined with Tab to display tabbed content.

	== Using Bootstrap Components in Articles ==		== Using Bootstrap Components in Articles ==

Ceford: /* Selectors */

2021-03-28T10:04:37Z

Selectors

← Older revision		Revision as of 10:04, 28 March 2021
Line 259:		Line 259:
	* '''Modal''' triggered by data-bs-toggle="modal"		* '''Modal''' triggered by data-bs-toggle="modal"
	* '''Offcanvas''' triggered by data-bs-toggle="offcanvas"		* '''Offcanvas''' triggered by data-bs-toggle="offcanvas"
	* '''Popover''' triggered by class="btn ..." or <a ...> tag (could be changed to class="haspopover ...")		* '''Popover''' triggered by class="btn ..." or <a ...> tag (could be changed to class="haspopover ...") AND data-bs-toggle="popover"
	* '''Scrollspy''' triggered by data-bs-spy="scroll"		* '''Scrollspy''' triggered by data-bs-spy="scroll"
	* '''Tab''' triggered by data-bs-toggle="tab"		* '''Tab''' triggered by data-bs-toggle="tab"
	* '''Toast''' triggered by class="toast ..."		* '''Toast''' triggered by class="toast ..."
	* '''Tooltip''' triggered by class="btn ..." or <a ...> tag (could be changed to class="hastooltip ...")		* '''Tooltip''' triggered by class="btn ..." or <a ...> tag (could be changed to class="hastooltip ...") AND data-bs-toggle="tooltip"

	=== Example 1: Alert ===		=== Example 1: Alert ===