Image (Bootstrap) - Revision history

Ghenne: /* Properties and Methods */

2026-02-19T20:56:56Z

Properties and Methods

← Older revision		Revision as of 20:56, 19 February 2026
Line 20:		Line 20:
	\| shape \|\| Thumbnail, rounded or circle?		\| shape \|\| Thumbnail, rounded or circle?
	\|-		\|-
	\| src \|\| ~~Image path~~. ~~Set~~ to ~~empty for none~~. Can be .png, ~~gif, bmp or jpg~~.		\| src \|\| Location of image. Do not add files to /nsb. Cannot be a URL. Can be a base64 data URI (e.g., data:image/png;base64,...).
	\|}		\|}

Ghenne: /* Description */

2019-03-10T14:39:43Z

Description

← Older revision		Revision as of 14:39, 10 March 2019
Line 4:		Line 4:

	Images in Bootstrap can be made responsive-friendly using the ''responsive'' property. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.		Images in Bootstrap can be made responsive-friendly using the ''responsive'' property. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

			Images can also be used as buttons by supplying an onclick function.

	[[Introduction_to_Bootstrap#Popovers_and_Tooltips\|Popovers and Tooltips]] are supported.		[[Introduction_to_Bootstrap#Popovers_and_Tooltips\|Popovers and Tooltips]] are supported.

Ghenne at 14:39, 10 March 2019

2019-03-10T14:39:02Z

← Older revision		Revision as of 14:39, 10 March 2019
Line 25:		Line 25:
	Standard [[events\|events]] are supported. For this control, the onclick event will be most useful.		Standard [[events\|events]] are supported. For this control, the onclick event will be most useful.

	== Example (~~Basic~~) ==		== Example ==
	~~Images can also be used a buttons by adding a click script:~~
	<~~pre~~>		<tabber>
			JavaScript=
			<syntaxhighlight lang="JavaScript">
			// JavaScript
			Image1.onclick = function() {
			NSB.MsgBox("clicked");
			};
			</syntaxhighlight>
			\|-\|
			BASIC=
			<syntaxhighlight lang="vb.net">
			' Basic
	Function Image1_onclick()		Function Image1_onclick()
	MsgBox "clicked!"		MsgBox "clicked!"
	End Function		End Function
	</~~pre~~>		</syntaxhighlight>
			</tabber>
	~~== Example (JavaScript) ==~~
	~~<pre>~~
	~~Image1.onclick = function() {~~
	~~NSB.MsgBox("clicked");~~
	};</~~pre~~>

	== Output ==		== Output ==

Ghenne: /* Output */

2019-02-02T14:18:01Z

Output

← Older revision		Revision as of 14:18, 2 February 2019
Line 47:		Line 47:

	[[Category:Bootstrap]]		[[Category:Bootstrap]]

	~~[[Category:iWebKit]]~~

Ghenne: /* Example (Basic) */

2016-06-05T12:33:43Z

Example (Basic)

← Older revision		Revision as of 12:33, 5 June 2016
Line 29:		Line 29:
	<pre>		<pre>
	Function Image1_onclick()		Function Image1_onclick()
	MsgBox "~~Clcked~~!"		MsgBox "clicked!"
	End Function		End Function
	</pre>		</pre>

Ghenne: /* Example (JavaScript) */

2016-06-05T12:33:26Z

Example (JavaScript)

← Older revision		Revision as of 12:33, 5 June 2016
Line 35:		Line 35:
	== Example (JavaScript) ==		== Example (JavaScript) ==
	<pre>		<pre>
	~~Alert1~~.onclick = function() {		Image1.onclick = function() {
	NSB.MsgBox("~~You can display a message or take other action when~~ clicked");		NSB.MsgBox("clicked");
	};		};</pre>
	</pre>

	== Output ==		== Output ==

Ghenne: /* Example (Basic) */

2016-06-05T12:33:09Z

Example (Basic)

← Older revision		Revision as of 12:33, 5 June 2016
Line 26:		Line 26:

	== Example (Basic) ==		== Example (Basic) ==
			Images can also be used a buttons by adding a click script:
	<pre>		<pre>
	Function ~~Alert2_onclick~~()		Function Image1_onclick()
	MsgBox "~~You can display a message or take other action when clicked~~"		MsgBox "Clcked!"
	End Function		End Function
	</pre>		</pre>

Ghenne: /* Properties and Methods */

2016-06-05T12:31:37Z

Properties and Methods

← Older revision		Revision as of 12:31, 5 June 2016
Line 11:		Line 11:
	Standard [[properties and methods\|properties]] are supported, plus:		Standard [[properties and methods\|properties]] are supported, plus:
	{\| class="wikitable"		{\| class="wikitable"
			\|-
			\| center \|\| Should image be centered in container?
	\|-		\|-
	\| responsive \|\| Should image resize to container?		\| responsive \|\| Should image resize to container?

Ghenne: Created page with "file:Bsimage.png == Description == Images in Bootstrap can be made responsive-friendly using the ''responsive'' property. This applies max-width: 100%;, height: auto; an..."

2016-06-05T12:28:50Z

Created page with "file:Bsimage.png == Description == Images in Bootstrap can be made responsive-friendly using the ''responsive'' property. This applies max-width: 100%;, height: auto; an..."

New page

[[file:Bsimage.png]]

== Description ==

Images in Bootstrap can be made responsive-friendly using the ''responsive'' property. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

[[Introduction_to_Bootstrap#Popovers_and_Tooltips|Popovers and Tooltips]] are supported.

== Properties and Methods ==

Standard [[properties and methods|properties]] are supported, plus:
{| class="wikitable"
|-
| responsive || Should image resize to container?
|-
| shape || Thumbnail, rounded or circle?
|-
| src || Image path. Set to empty for none. Can be .png, gif, bmp or jpg.
|}

== Events ==

Standard [[events|events]] are supported. For this control, the onclick event will be most useful.

== Example (Basic) ==
<pre>
Function Alert2_onclick()
MsgBox "You can display a message or take other action when clicked"
End Function
</pre>

== Example (JavaScript) ==
<pre>
Alert1.onclick = function() {
NSB.MsgBox("You can display a message or take other action when clicked");
};
</pre>

== Output ==

[[Category:Language Reference]]

[[Category:Controls]]

[[Category:Bootstrap]]

[[Category:iWebKit]]