How-Tos - Revision history

Thai: /* Example: Using grids */

2021-12-30T11:54:10Z

Example: Using grids

← Older revision		Revision as of 11:54, 30 December 2021
Line 96:		Line 96:

	<pre>		<pre>
	<div class="~~flex~~-~~row~~ row">		<div class="container-fluid mb-4">
	<div class="col~~-xs~~-12 col-md-6 col-lg-4">		<div class="row">
	<div class="~~panel panel-default~~">		<div class="col-12 col-lg-6 col-xl-4 mb-2 mb-lg-4 mb-xl-0">
	<div class="~~panel~~-~~heading~~"~~>Title 1</div~~>		<div class="card">
	<~~div~~ class="~~panel~~-~~body~~">[[File:Screenshot tweeki.png\|class=img-~~responsive~~\| link=]]		<div class="card-body">
			<h5 class="card-title">Title 1</h5>
			[[File:Screenshot tweeki.png\|class=img-fluid\| link=]]
	</div>		</div>
	<div class="~~panel~~-footer">Footer text 1</div>		<div class="card-footer">Footer text 1</div>
	</div><!-- End of ~~pan~~ -->		</div><!-- End of card -->
	</div><!-- end of col 1-->		</div><!-- end of col 1-->

	<div class="col~~-xs~~-12 col-md-6 col-lg-4">		<div class="col-12 col-lg-6 col-xl-4 mb-2 mb-lg-4 mb-xl-0">
	<div class="~~panel panel-default~~">		<div class="card">
	<div class="~~panel~~-~~heading~~"~~>Title 2</div~~>		<div class="card-body">
	<~~div~~ class="~~panel~~-~~body~~">[[File:Screenshot tweeki.png\|class=img-~~responsive~~\| link=]]		<h5 class="card-title">Title 2</h5>
			[[File:Screenshot tweeki.png\|class=img-fluid\| link=]]
	</div>		</div>
	<div class="~~panel~~-footer">Footer text 2</div>		<div class="card-footer">Footer text 2</div>
	</div><!-- End of ~~pan~~ -->		</div><!-- End of card -->
	</div><!-- End of col 2-->		</div><!-- End of col 2-->

	<div class="col~~-xs~~-12 col-md-6 col-lg-4">		<div class="col-12 col-lg-6 col-xl-4">
	<div class="~~panel panel-default~~">		<div class="card">
	<div class="~~panel~~-~~heading~~"~~>Title 3</div~~>		<div class="card-body">
	<~~div~~ class="~~panel~~-~~body~~">[[File:Screenshot tweeki.png\|class=img-~~responsive~~\| link=]]		<h5 class="card-title">Title 3</h5>
			[[File:Screenshot tweeki.png\|class=img-fluid\| link=]]
	</div>		</div>
	<div class="~~panel~~-footer">Footer text 3</div>		<div class="card-footer">Footer text 3</div>
	</div><!-- End of ~~pan~~ -->		</div><!-- End of card -->
	</div><!-- End of col 3-->		</div><!-- End of col 3-->

	</div><!-- End of row 1-->		</div><!-- End of row 1-->
			</div>
	</pre>		</pre>

	And the result looks like this:		And the result looks like this:

	<div class="~~flex~~-~~row~~ row">		<div class="container-fluid mb-4">
	<div class="col~~-xs~~-12 col-md-6 col-lg-4">		<div class="row">
	<div class="~~panel panel-default~~">		<div class="col-12 col-lg-6 col-xl-4 mb-2 mb-lg-4 mb-xl-0">
	<div class="~~panel~~-~~heading~~"~~>Title 1</div~~>		<div class="card">
	<~~div~~ class="~~panel~~-~~body~~">[[File:Screenshot tweeki.png\|class=img-~~responsive~~\| link=]]		<div class="card-body">
			<h5 class="card-title">Title 1</h5>
			[[File:Screenshot tweeki.png\|class=img-fluid\| link=]]
	</div>		</div>
	<div class="~~panel~~-footer">Footer text 1</div>		<div class="card-footer">Footer text 1</div>
	</div><!-- End of ~~pan~~ -->		</div><!-- End of card -->
	</div><!-- end of col 1-->		</div><!-- end of col 1-->

	<div class="col~~-xs~~-12 col-md-6 col-lg-4">		<div class="col-12 col-lg-6 col-xl-4 mb-2 mb-lg-4 mb-xl-0">
	<div class="~~panel panel-default~~">		<div class="card">
	<div class="~~panel~~-~~heading~~"~~>Title 2</div~~>		<div class="card-body">
	<~~div~~ class="~~panel~~-~~body~~">[[File:Screenshot tweeki.png\|class=img-~~responsive~~\| link=]]		<h5 class="card-title">Title 2</h5>
			[[File:Screenshot tweeki.png\|class=img-fluid\| link=]]
	</div>		</div>
	<div class="~~panel~~-footer">Footer text 2</div>		<div class="card-footer">Footer text 2</div>
	</div><!-- End of ~~pan~~ -->		</div><!-- End of card -->
	</div><!-- End of col 2-->		</div><!-- End of col 2-->

	<div class="col~~-xs~~-12 col-md-6 col-lg-4">		<div class="col-12 col-lg-6 col-xl-4">
	<div class="~~panel panel-default~~">		<div class="card">
	<div class="~~panel~~-~~heading~~"~~>Title 3</div~~>		<div class="card-body">
	<~~div~~ class="~~panel~~-~~body~~">[[File:Screenshot tweeki.png\|class=img-~~responsive~~\| link=]]		<h5 class="card-title">Title 3</h5>
			[[File:Screenshot tweeki.png\|class=img-fluid\| link=]]
	</div>		</div>
	<div class="~~panel~~-footer">Footer text 3</div>		<div class="card-footer">Footer text 3</div>
	</div><!-- End of ~~pan~~ -->		</div><!-- End of card -->
	</div><!-- End of col 3-->		</div><!-- End of col 3-->

	</div><!-- End of row 1-->		</div><!-- End of row 1-->
			</div>

	Please refer to the [http://getbootstrap.com/docs/3.3/css/#grid Bootstrap documentation] for all details on grids.		Please refer to the [http://getbootstrap.com/docs/3.3/css/#grid Bootstrap documentation] for all details on grids.

Thai: /* Example: Styling Images */

2021-12-30T11:43:48Z

Example: Styling Images

← Older revision		Revision as of 11:43, 30 December 2021
Line 88:		Line 88:
	[[File:Screenshot tweeki.png\|class=img-fluid]]		[[File:Screenshot tweeki.png\|class=img-fluid]]

			See [https://getbootstrap.com/docs/4.6/content/images/ Bootstrap documentation] for details on styling images.
	~~Now this was a ''very'' simple example, which might also be achieved without Bootstrap. But now try adding <code>img-circle</code> and see how that changes the appearance:~~

	~~[[File:Screenshot tweeki.png\|300px\| class=img-circle]]~~

	See [~~http~~://getbootstrap.com/docs/3.3/~~css~~/#images Bootstrap documentation] for details on styling images.

	=== Example: Using grids ===		=== Example: Using grids ===

Thai: /* Example: Styling Images */

2021-12-30T11:42:47Z

Example: Styling Images

← Older revision		Revision as of 11:42, 30 December 2021
Line 86:		Line 86:
	Result (make your browser window wider and/or narrower to see the image of the screenshot resize automatically ):		Result (make your browser window wider and/or narrower to see the image of the screenshot resize automatically ):

	[[File:Screenshot tweeki.png\|class=img-~~responsive~~]]		[[File:Screenshot tweeki.png\|class=img-fluid]]

Thai: /* Example: Styling Images */

2021-12-30T11:42:33Z

Example: Styling Images

← Older revision		Revision as of 11:42, 30 December 2021
Line 79:		Line 79:
	=== Example: Styling Images ===		=== Example: Styling Images ===

	This is a simple example of what Bootstrap can do to help you style your images. To make images responsive and scales to the parent element, within Tweeki just apply the <code>class=img-~~responsive~~</code> to the image within the wiki text.		This is a simple example of what Bootstrap can do to help you style your images. To make images responsive and scales to the parent element, within Tweeki just apply the <code>class=img-fluid</code> to the image within the wiki text.
	<pre>		<pre>
	[[File:Screenshot tweeki.png\|class=img-~~responsive~~]]		[[File:Screenshot tweeki.png\|class=img-fluid]]
	</pre>		</pre>

Thai: /* Styling */

2021-12-30T11:42:22Z

Styling

← Older revision		Revision as of 11:42, 30 December 2021
Line 75:		Line 75:
	Tweeki makes most of Bootstrap's common styles, components and javascript components available.		Tweeki makes most of Bootstrap's common styles, components and javascript components available.

	So don't forget to check the ~~documentation for [http://getbootstrap.com/docs/3.4/\|Bootstrap 3.4] or~~ [http://getbootstrap.com/docs/4.6/\|Bootstrap 4.6] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.		So don't forget to check the [http://getbootstrap.com/docs/4.6/\|documentation for Bootstrap 4.6] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.

	=== Example: Styling Images ===		=== Example: Styling Images ===

Thai: /* Styling */

2021-12-30T11:41:20Z

Styling

← Older revision		Revision as of 11:41, 30 December 2021
Line 73:		Line 73:
	== Styling ==		== Styling ==

	Tweeki makes ~~all~~ of Bootstrap's common styles, components and javascript components available.		Tweeki makes most of Bootstrap's common styles, components and javascript components available.

	So don't forget to check the documentation for [http://getbootstrap.com/docs/3.4/\|Bootstrap 3.4] or [http://getbootstrap.com/docs/4.6/\|Bootstrap 4.6] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.		So don't forget to check the documentation for [http://getbootstrap.com/docs/3.4/\|Bootstrap 3.4] or [http://getbootstrap.com/docs/4.6/\|Bootstrap 4.6] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.

Thai: /* Styling */

2021-12-30T11:41:05Z

Styling

← Older revision		Revision as of 11:41, 30 December 2021
Line 73:		Line 73:
	== Styling ==		== Styling ==

	Tweeki ~~comes standard with Twitter~~ Bootstrap ~~3.3.7 installed; Common CSS~~, ~~Components~~ and ~~Javascript~~ components ~~are all installed~~.		Tweeki makes all of Bootstrap's common styles, components and javascript components available.

	So don't forget to check [http://getbootstrap.com/docs/3.3/\|~~the~~ Bootstrap 3.~~3 documentation~~] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.		So don't forget to check the documentation for [http://getbootstrap.com/docs/3.4/\|Bootstrap 3.4] or [http://getbootstrap.com/docs/4.6/\|Bootstrap 4.6] for all available styling options! Note that not all components are compatible with wiki text! Several Bootstrap components have been adapted for use with Tweeki; please refer to the '''Components menu''' above to read those docs.

	=== Example: Styling Images ===		=== Example: Styling Images ===

Thai: /* Complete example configurations */

2021-12-30T11:37:21Z

Complete example configurations

← Older revision		Revision as of 11:37, 30 December 2021
Line 1:		Line 1:
	__TOC__		__TOC__

	== Complete example ~~configurations~~ ==		== Complete example configuration ==

	Have a look at the [[Setup for tweeki.kollabor.at]].		Have a look at the [[Setup for tweeki.kollabor.at]].

Thai: /* Complete example configurations */

2021-12-30T11:37:13Z

Complete example configurations

← Older revision		Revision as of 11:37, 30 December 2021
Line 3:		Line 3:
	== Complete example configurations ==		== Complete example configurations ==

	Have a look at the [[Setup for tweeki.kollabor.at~~]] or the much more elaborate [[Setup for skriptenforum.net~~]].		Have a look at the [[Setup for tweeki.kollabor.at]].

	== Navigation ==		== Navigation ==

Thai: /* Complete example configurations */

2020-07-13T02:25:22Z

Complete example configurations

← Older revision		Revision as of 02:25, 13 July 2020
Line 3:		Line 3:
	== Complete example configurations ==		== Complete example configurations ==

	Have a look at the [[Setup for tweeki.~~thai-land~~.at]] or the much more elaborate [[Setup for skriptenforum.net]].		Have a look at the [[Setup for tweeki.kollabor.at]] or the much more elaborate [[Setup for skriptenforum.net]].

	== Navigation ==		== Navigation ==