Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Plugin_googleMaps has a deprecated constructor in /home/oyabun/ramonabutor.hu/plugins/system/ytshortcodes/includes/libs/googlemap/googleMaps.lib.php on line 385

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/oyabun/ramonabutor.hu/plugins/system/yt/includes/core/lessphp/lessc.inc.php on line 717

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/oyabun/ramonabutor.hu/plugins/system/yt/includes/core/lessphp/lessc.inc.php on line 1768

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/oyabun/ramonabutor.hu/plugins/system/yt/includes/core/lessphp/lessc.inc.php on line 2424

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/oyabun/ramonabutor.hu/plugins/system/yt/includes/core/lessphp/lessc.inc.php on line 2478
Kapcsolat (2) https://ramonabutor.oyabun.hu/de/kapcsolat-2/9-explore 2026-09-18T16:30:41+00:00 Ramona Bútor Kapcsolat 2023-05-31T15:13:21+00:00 2023-05-31T15:13:21+00:00 https://ramonabutor.oyabun.hu/de/kapcsolat-2 Super User <p>{loadmodule mod_sj_contact_ajax}</p> <p>{loadmodule mod_sj_contact_ajax}</p> Extensions 2023-05-31T15:13:21+00:00 2023-05-31T15:13:21+00:00 https://ramonabutor.oyabun.hu/de/9-explore/131-extenstions Super User <p><strong>SJ Megashop Template is using:</strong></p> <p>[list type="smallnumber5"] [list_item]</p> <p><strong> Component:</strong></p> <ul style="margin: 0 20px;"> <li><a href="http://www.webdesigner-profi.de/joomla-webdesign/joomla-shop.html?lang=en" target="_blank">JoomShopping </a></li> </ul> <p>[/list_item] [list_item]</p> <p><strong> Modules:</strong></p> <ul style="margin: 0 20px;"> <li><a href="https://ramonabutor.oyabun.hu/#" target="_blank">SJ Categories for JoomShopping </a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/483-sj-categories-slider-for-joomshopping-joomla-module" target="_blank">Sj Category Slider for JoomShopping </a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/free-extensions/item/586-sj-twitter-slider-joomla-module" target="_blank">SJ Twitter Slider</a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/54-sj-article-slider-joomla-module" target="_blank">Sj Article Slider </a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/429-sj-contact-ajax-responsive-joomla-module" target="_blank">Sj Contact Ajax </a></li> <li><a href="https://ramonabutor.oyabun.hu/#" target="_blank">Sj Image Slider</a></li> <li><a href="https://ramonabutor.oyabun.hu/#" target="_blank">Sj Slider Center for JoomShopping </a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/420-sj-slider-for-joomshopping-joomla-module" target="_blank">Sj Slider for JoomShopping </a></li> </ul> <p>[/list_item] [list_item]</p> <p><strong> Plugins</strong></p> <ul style="margin: 0 20px;"> <li><a href="http://www.smartaddons.com/joomla/templates/template-user-guides/724-yt-plugin-for-yt-framework-guide" target="_blank">YT Framework Plugin</a></li> <li><a href="https://ramonabutor.oyabun.hu/#" target="_blank">YT Shortcodes Plugin</a></li> </ul> <p>[/list_item] [/list]</p> <p><strong>SJ Megashop Template is using:</strong></p> <p>[list type="smallnumber5"] [list_item]</p> <p><strong> Component:</strong></p> <ul style="margin: 0 20px;"> <li><a href="http://www.webdesigner-profi.de/joomla-webdesign/joomla-shop.html?lang=en" target="_blank">JoomShopping </a></li> </ul> <p>[/list_item] [list_item]</p> <p><strong> Modules:</strong></p> <ul style="margin: 0 20px;"> <li><a href="https://ramonabutor.oyabun.hu/#" target="_blank">SJ Categories for JoomShopping </a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/483-sj-categories-slider-for-joomshopping-joomla-module" target="_blank">Sj Category Slider for JoomShopping </a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/free-extensions/item/586-sj-twitter-slider-joomla-module" target="_blank">SJ Twitter Slider</a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/54-sj-article-slider-joomla-module" target="_blank">Sj Article Slider </a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/429-sj-contact-ajax-responsive-joomla-module" target="_blank">Sj Contact Ajax </a></li> <li><a href="https://ramonabutor.oyabun.hu/#" target="_blank">Sj Image Slider</a></li> <li><a href="https://ramonabutor.oyabun.hu/#" target="_blank">Sj Slider Center for JoomShopping </a></li> <li><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/420-sj-slider-for-joomshopping-joomla-module" target="_blank">Sj Slider for JoomShopping </a></li> </ul> <p>[/list_item] [list_item]</p> <p><strong> Plugins</strong></p> <ul style="margin: 0 20px;"> <li><a href="http://www.smartaddons.com/joomla/templates/template-user-guides/724-yt-plugin-for-yt-framework-guide" target="_blank">YT Framework Plugin</a></li> <li><a href="https://ramonabutor.oyabun.hu/#" target="_blank">YT Shortcodes Plugin</a></li> </ul> <p>[/list_item] [/list]</p> Positions 2023-05-31T15:13:21+00:00 2023-05-31T15:13:21+00:00 https://ramonabutor.oyabun.hu/de/9-explore/130-positions Super User <p>This Joomla! template supports a wide variety of module positions which can be archived automatically by the system.The module positions are fully collapsible mean that if there are no modules published in particular position, this module position will disappear and the other modules with take this place. Also you can have 2-Columns layout (content, left or right)</p> <p><img src="https://ramonabutor.oyabun.hu/images/position.jpg" alt="" /></p> <p>This Joomla! template supports a wide variety of module positions which can be archived automatically by the system.The module positions are fully collapsible mean that if there are no modules published in particular position, this module position will disappear and the other modules with take this place. Also you can have 2-Columns layout (content, left or right)</p> <p><img src="https://ramonabutor.oyabun.hu/images/position.jpg" alt="" /></p> test shortcode 2023-05-31T15:13:21+00:00 2023-05-31T15:13:21+00:00 https://ramonabutor.oyabun.hu/de/9-explore/66-latest-users-module Joomla! <p>This module displays the latest registered users. <a href="http://help.joomla.org/proxy/index.php?option=com_help&amp;keyref=Help16:Extensions_Module_Manager_Latest_Users">Help</a></p> <div> </div> <div>[playerlist]<br />    [player_item src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3" single="Dead wrong intro" author="Wait What"]<br />    [player_item src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3" single="Juicy-r" author="Wait What"]<br />    [player_item src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3" single="islands is the limit" author="Wait What"]<br />[/playerlist]</div> <div> </div> <p>This module displays the latest registered users. <a href="http://help.joomla.org/proxy/index.php?option=com_help&amp;keyref=Help16:Extensions_Module_Manager_Latest_Users">Help</a></p> <div> </div> <div>[playerlist]<br />    [player_item src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3" single="Dead wrong intro" author="Wait What"]<br />    [player_item src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3" single="Juicy-r" author="Wait What"]<br />    [player_item src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3" single="islands is the limit" author="Wait What"]<br />[/playerlist]</div> <div> </div> Module Variations 2023-05-31T15:13:21+00:00 2023-05-31T15:13:21+00:00 https://ramonabutor.oyabun.hu/de/9-explore/129-module-variations Super User <p><strong> Enter any available suffixes at Extensions - Module Manager - Module - Module Class Suffix. </strong></p> <p>This template's module system comes with a wide range of module styles, color variations, badges and icons. Below you can see which module styles come with color variations and with which badges and icons you can combine them.Here is a list of the available options:</p> <table class="variations"> <tbody> <tr class="odd"> <td class="bold">Box</td> <td>box1, box2, box3</td> </tr> <tr> <td class="bold">Badge</td> <td>badge-hot, badge-new, badge-sale, badge-feature</td> </tr> <tr class="odd"> <td class="bold">Icons</td> <td>tablet, cogs, phone.vv.. You can find the full icons of usage at <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome 4.0.3 </a></td> </tr> <tr> <td class="bold">Other</td> <td>blank, menu</td> </tr> </tbody> </table> <p> </p> <p><strong> Enter any available suffixes at Extensions - Module Manager - Module - Module Class Suffix. </strong></p> <p>This template's module system comes with a wide range of module styles, color variations, badges and icons. Below you can see which module styles come with color variations and with which badges and icons you can combine them.Here is a list of the available options:</p> <table class="variations"> <tbody> <tr class="odd"> <td class="bold">Box</td> <td>box1, box2, box3</td> </tr> <tr> <td class="bold">Badge</td> <td>badge-hot, badge-new, badge-sale, badge-feature</td> </tr> <tr class="odd"> <td class="bold">Icons</td> <td>tablet, cogs, phone.vv.. You can find the full icons of usage at <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font Awesome 4.0.3 </a></td> </tr> <tr> <td class="bold">Other</td> <td>blank, menu</td> </tr> </tbody> </table> <p> </p> Shortcodes 2023-05-31T15:13:21+00:00 2023-05-31T15:13:21+00:00 https://ramonabutor.oyabun.hu/de/9-explore/179-short-codes Super User <div style="text-align: center;"><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/564-yt-shortcode-joomla-plugin" target="_blank"><img src="https://ramonabutor.oyabun.hu/images/demo/shortcode.jpg" alt="YT Shortcode" /> </a></div> <p>[space height="20"]</p> <div style="text-align: center;"> <p>[button type="flat inverse" target="_blank" link="http://demo.smartaddons.com/extensions/yt-shortcode/index.php"] View all example YT Shortcode [/button]</p> </div> <p>The shortcodes supports users to make content for web pages. In Joomla administrator, Yt Shortcodes button will be appeared below the text-area, you can choose shortcodes for the text-area to make content. We will show <strong>bonus pages</strong> for sample in some templates using shortcodes from now.</p> <p class="text-error"><strong>Note:</strong> Shortcodes only works in <strong>detail</strong> article (joomla! content, k2 content), custom html module.</p> <p><strong>YT Shortcode User-guide:</strong></p> <p>Let's go to <a style="color: #0291ff;" href="http://smartaddons.s3.amazonaws.com/images/userguide/Yt-Shortcodes/index.html" target="blank">here</a> for reading full help documentation of YT Shortcode Plugin</p> <div style="text-align: center;"><a href="http://www.smartaddons.com/joomla/extensions/commercial-extensions/item/564-yt-shortcode-joomla-plugin" target="_blank"><img src="https://ramonabutor.oyabun.hu/images/demo/shortcode.jpg" alt="YT Shortcode" /> </a></div> <p>[space height="20"]</p> <div style="text-align: center;"> <p>[button type="flat inverse" target="_blank" link="http://demo.smartaddons.com/extensions/yt-shortcode/index.php"] View all example YT Shortcode [/button]</p> </div> <p>The shortcodes supports users to make content for web pages. In Joomla administrator, Yt Shortcodes button will be appeared below the text-area, you can choose shortcodes for the text-area to make content. We will show <strong>bonus pages</strong> for sample in some templates using shortcodes from now.</p> <p class="text-error"><strong>Note:</strong> Shortcodes only works in <strong>detail</strong> article (joomla! content, k2 content), custom html module.</p> <p><strong>YT Shortcode User-guide:</strong></p> <p>Let's go to <a style="color: #0291ff;" href="http://smartaddons.s3.amazonaws.com/images/userguide/Yt-Shortcodes/index.html" target="blank">here</a> for reading full help documentation of YT Shortcode Plugin</p> Features 2023-05-31T15:13:21+00:00 2023-05-31T15:13:21+00:00 https://ramonabutor.oyabun.hu/de/9-explore/128-features Super User <p><strong>Yt Framework</strong> uses xml file to render your layout. The framework supports all general features of a joomla template. The below is the list of features:</p> <ul> <li>Multiple Layouts: Left-Main-Right, Left-Main, Main-Right, etc. With xml file, you can easy to create some layouts for a joomla template</li> <li>Mobile Ready</li> <li>Table-less Layout</li> <li>Search Engine Friendly</li> <li>Modules Types</li> <li>Cross-browser Support</li> <li>Typography</li> <li>Validation</li> <li>Template Parameters</li> <li>Google Font</li> <li>Font Size</li> <li>RTL language support</li> </ul> <p><strong>Yt Framework</strong> uses xml file to render your layout. The framework supports all general features of a joomla template. The below is the list of features:</p> <ul> <li>Multiple Layouts: Left-Main-Right, Left-Main, Main-Right, etc. With xml file, you can easy to create some layouts for a joomla template</li> <li>Mobile Ready</li> <li>Table-less Layout</li> <li>Search Engine Friendly</li> <li>Modules Types</li> <li>Cross-browser Support</li> <li>Typography</li> <li>Validation</li> <li>Template Parameters</li> <li>Google Font</li> <li>Font Size</li> <li>RTL language support</li> </ul> Typography 2023-05-31T15:13:21+00:00 2023-05-31T15:13:21+00:00 https://ramonabutor.oyabun.hu/de/9-explore/133-typography Super User <p> </p> <!-- Headings ================================================== --> <div class="yt-typography"> <div class="page-header"> <h1>Headings</h1> </div> <div class="accordion-body in"> <section id="Headings"> <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p> <div class="bs-docs-example"> <h1>h1. Heading 1</h1> <h2>h2. Heading 2</h2> <h3>h3. Heading 3</h3> <h4>h4. Heading 4</h4> <h5>h5. Heading 5</h5> <h6>h6. Heading 6</h6> </div> <h2 id="body-copy">Body copy</h2> <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p> <div class="bs-docs-example"> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> </div> <pre class="prettyprint"><span class="tag">&lt;p&gt;</span><span class="pln">...</span><span class="tag">&lt;/p&gt;</span></pre> <h3>Lead body copy</h3> <p>Make a paragraph stand out by adding <code>.lead</code>.</p> <div class="bs-docs-example"> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p> </div> <pre class="prettyprint"><span class="tag">&lt;p</span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lead"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/p&gt;</span></pre> <h3>Built with Less</h3> <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p> <hr class="bs-docs-separator" /> <h2 id="emphasis">Emphasis</h2> <p>Make use of HTML's default emphasis tags with lightweight styles.</p> <h3><code>&lt;small&gt;</code></h3> <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p> <div class="bs-docs-example"> <p><small>This line of text is meant to be treated as fine print.</small></p> </div> <pre class="prettyprint">&lt;p&gt; &lt;small&gt;This line of text is meant to be treated as fine print. &lt;/small&gt; &lt;/p&gt;</pre> <h3>Bold</h3> <p>For emphasizing a snippet of text with a heavier font-weight.</p> <div class="bs-docs-example"> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> </div> <pre class="prettyprint"><span class="tag">&lt;strong&gt;</span><span class="pln">rendered as bold text</span><span class="tag">&lt;/strong&gt;</span></pre> <h3>Italics</h3> <p>For emphasizing a snippet of text with italics.</p> <div class="bs-docs-example"> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> </div> <pre class="prettyprint"><span class="tag">&lt;em&gt;</span><span class="pln">rendered as italicized text</span><span class="tag">&lt;/em&gt;</span></pre> <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p> <h3>Emphasis classes</h3> <p>Convey meaning through color with a handful of emphasis utility classes.</p> <div class="bs-docs-example"> <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> </div> <pre class="prettyprint linenums">&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt; &lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt; &lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt; &lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt; &lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;</pre> </section> </div> <!-- Labels and badges ================================================== --> <div class="page-header"> <h1>Labels and badges</h1> </div> <h3>Labels</h3> <table class="table table-bordered table-striped"> <thead> <tr><th>Labels</th><th>Markup</th></tr> </thead> <tbody> <tr> <td><span class="label">Default</span></td> <td><code>&lt;span class="label"&gt;Default&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-success">Success</span></td> <td><code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-warning">Warning</span></td> <td><code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-important">Important</span></td> <td><code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-info">Info</span></td> <td><code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-inverse">Inverse</span></td> <td><code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code></td> </tr> </tbody> </table> <h3>Badges</h3> <table class="table table-bordered table-striped"> <thead> <tr><th>Name</th><th>Example</th><th>Markup</th></tr> </thead> <tbody> <tr> <td>Default</td> <td><span class="badge">1</span></td> <td><code>&lt;span class="badge"&gt;1&lt;/span&gt;</code></td> </tr> <tr> <td>Success</td> <td><span class="badge badge-success">2</span></td> <td><code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code></td> </tr> <tr> <td>Warning</td> <td><span class="badge badge-warning">4</span></td> <td><code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code></td> </tr> <tr> <td>Important</td> <td><span class="badge badge-important">6</span></td> <td><code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code></td> </tr> <tr> <td>Info</td> <td><span class="badge badge-info">8</span></td> <td><code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code></td> </tr> <tr> <td>Inverse</td> <td><span class="badge badge-inverse">10</span></td> <td><code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code></td> </tr> </tbody> </table> <!-- Code ================================================== --> <div class="page-header"> <h1>Code</h1> </div> <div class="accordion-body "> <div class=" first-child span6"> <h2>Inline</h2> <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p> <div class="bs-docs-example">For example, <code>&lt;section&gt;</code> should be wrapped as inline.</div> <div class="prettyprint linenums"><ol class="linenums"> <li class="L0"><span class="typ">For</span><span class="pln"> example</span><span class="pun">,</span><span class="pln"> </span><span class="str">&lt;code&gt;&lt;section&gt;</span><span class="pun">&lt;/</span><span class="pln">code</span><span class="pun">&gt;</span><span class="pln"> should be wrapped </span><span class="kwd">as</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">.</span></li> </ol></div> <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p> <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p> </div> <div class="span6"> <h2>Basic block</h2> <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p> <div class="bs-docs-example"> <pre> &lt;p&gt;Sample text here...&lt;/p&gt;</pre> </div> <pre class="prettyprint linenums" style="margin-bottom: 9px;">&lt;pre&gt; &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt; &lt;/pre&gt;</pre> </div> <div class="clear"> </div> <div class="span12"> <h2>Prettify</h2> <p>To add colored syntax highlight to the <code>&lt;pre&gt;</code> tag, then use the <code>.prettyprint</code> class or the <code>.prettyprint linenums</code> class.</p> <div class="bs-docs-example"> <pre class="prettyprint linenums">&lt;?php /** Begin Debug **/ if ($yt-&gt;countModules('debug')) : ?&gt; &lt;div id="yt-debug"&gt; &lt;div class="yt-container"&gt; &lt;php echo $yt-&gt;displayModules('debug','standard'); ?&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php /** End Debug **/ endif; ?&gt;</pre> </div> <pre class="prettyprint linenums" style="margin-bottom: 9px;">&amp;lt;?php /** Begin Debug **/ if ($yt-&gt;countModules('debug')) : ?&amp;gt; &amp;lt;div id="yt-debug"&amp;gt; &amp;lt;div class="yt-container"&amp;gt; &amp;lt;php echo $yt-&gt;displayModules('debug','standard'); ?&amp;gt; &amp;lt;div class="clear"&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;?php /** End Debug **/ endif; ?&amp;gt;</pre> </div> </div> </div> <section class="clearfix clear" style="padding: 2em 0;"><em>The documented typography above is a modified version of the reference guide available at: <a href="http://twitter.github.com/bootstrap/base-css.html">http://twitter.github.com/bootstrap/base-css.html</a></em></section> <p> </p> <!-- Headings ================================================== --> <div class="yt-typography"> <div class="page-header"> <h1>Headings</h1> </div> <div class="accordion-body in"> <section id="Headings"> <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p> <div class="bs-docs-example"> <h1>h1. Heading 1</h1> <h2>h2. Heading 2</h2> <h3>h3. Heading 3</h3> <h4>h4. Heading 4</h4> <h5>h5. Heading 5</h5> <h6>h6. Heading 6</h6> </div> <h2 id="body-copy">Body copy</h2> <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p> <div class="bs-docs-example"> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p> <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> </div> <pre class="prettyprint"><span class="tag">&lt;p&gt;</span><span class="pln">...</span><span class="tag">&lt;/p&gt;</span></pre> <h3>Lead body copy</h3> <p>Make a paragraph stand out by adding <code>.lead</code>.</p> <div class="bs-docs-example"> <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p> </div> <pre class="prettyprint"><span class="tag">&lt;p</span><span class="atn">class</span><span class="pun">=</span><span class="atv">"lead"</span><span class="tag">&gt;</span><span class="pln">...</span><span class="tag">&lt;/p&gt;</span></pre> <h3>Built with Less</h3> <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p> <hr class="bs-docs-separator" /> <h2 id="emphasis">Emphasis</h2> <p>Make use of HTML's default emphasis tags with lightweight styles.</p> <h3><code>&lt;small&gt;</code></h3> <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p> <div class="bs-docs-example"> <p><small>This line of text is meant to be treated as fine print.</small></p> </div> <pre class="prettyprint">&lt;p&gt; &lt;small&gt;This line of text is meant to be treated as fine print. &lt;/small&gt; &lt;/p&gt;</pre> <h3>Bold</h3> <p>For emphasizing a snippet of text with a heavier font-weight.</p> <div class="bs-docs-example"> <p>The following snippet of text is <strong>rendered as bold text</strong>.</p> </div> <pre class="prettyprint"><span class="tag">&lt;strong&gt;</span><span class="pln">rendered as bold text</span><span class="tag">&lt;/strong&gt;</span></pre> <h3>Italics</h3> <p>For emphasizing a snippet of text with italics.</p> <div class="bs-docs-example"> <p>The following snippet of text is <em>rendered as italicized text</em>.</p> </div> <pre class="prettyprint"><span class="tag">&lt;em&gt;</span><span class="pln">rendered as italicized text</span><span class="tag">&lt;/em&gt;</span></pre> <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p> <h3>Emphasis classes</h3> <p>Convey meaning through color with a handful of emphasis utility classes.</p> <div class="bs-docs-example"> <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> </div> <pre class="prettyprint linenums">&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt; &lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt; &lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt; &lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt; &lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;</pre> </section> </div> <!-- Labels and badges ================================================== --> <div class="page-header"> <h1>Labels and badges</h1> </div> <h3>Labels</h3> <table class="table table-bordered table-striped"> <thead> <tr><th>Labels</th><th>Markup</th></tr> </thead> <tbody> <tr> <td><span class="label">Default</span></td> <td><code>&lt;span class="label"&gt;Default&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-success">Success</span></td> <td><code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-warning">Warning</span></td> <td><code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-important">Important</span></td> <td><code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-info">Info</span></td> <td><code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code></td> </tr> <tr> <td><span class="label label-inverse">Inverse</span></td> <td><code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code></td> </tr> </tbody> </table> <h3>Badges</h3> <table class="table table-bordered table-striped"> <thead> <tr><th>Name</th><th>Example</th><th>Markup</th></tr> </thead> <tbody> <tr> <td>Default</td> <td><span class="badge">1</span></td> <td><code>&lt;span class="badge"&gt;1&lt;/span&gt;</code></td> </tr> <tr> <td>Success</td> <td><span class="badge badge-success">2</span></td> <td><code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code></td> </tr> <tr> <td>Warning</td> <td><span class="badge badge-warning">4</span></td> <td><code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code></td> </tr> <tr> <td>Important</td> <td><span class="badge badge-important">6</span></td> <td><code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code></td> </tr> <tr> <td>Info</td> <td><span class="badge badge-info">8</span></td> <td><code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code></td> </tr> <tr> <td>Inverse</td> <td><span class="badge badge-inverse">10</span></td> <td><code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code></td> </tr> </tbody> </table> <!-- Code ================================================== --> <div class="page-header"> <h1>Code</h1> </div> <div class="accordion-body "> <div class=" first-child span6"> <h2>Inline</h2> <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p> <div class="bs-docs-example">For example, <code>&lt;section&gt;</code> should be wrapped as inline.</div> <div class="prettyprint linenums"><ol class="linenums"> <li class="L0"><span class="typ">For</span><span class="pln"> example</span><span class="pun">,</span><span class="pln"> </span><span class="str">&lt;code&gt;&lt;section&gt;</span><span class="pun">&lt;/</span><span class="pln">code</span><span class="pun">&gt;</span><span class="pln"> should be wrapped </span><span class="kwd">as</span><span class="pln"> </span><span class="kwd">inline</span><span class="pun">.</span></li> </ol></div> <p><strong>Note:</strong> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p> <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p> </div> <div class="span6"> <h2>Basic block</h2> <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p> <div class="bs-docs-example"> <pre> &lt;p&gt;Sample text here...&lt;/p&gt;</pre> </div> <pre class="prettyprint linenums" style="margin-bottom: 9px;">&lt;pre&gt; &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt; &lt;/pre&gt;</pre> </div> <div class="clear"> </div> <div class="span12"> <h2>Prettify</h2> <p>To add colored syntax highlight to the <code>&lt;pre&gt;</code> tag, then use the <code>.prettyprint</code> class or the <code>.prettyprint linenums</code> class.</p> <div class="bs-docs-example"> <pre class="prettyprint linenums">&lt;?php /** Begin Debug **/ if ($yt-&gt;countModules('debug')) : ?&gt; &lt;div id="yt-debug"&gt; &lt;div class="yt-container"&gt; &lt;php echo $yt-&gt;displayModules('debug','standard'); ?&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php /** End Debug **/ endif; ?&gt;</pre> </div> <pre class="prettyprint linenums" style="margin-bottom: 9px;">&amp;lt;?php /** Begin Debug **/ if ($yt-&gt;countModules('debug')) : ?&amp;gt; &amp;lt;div id="yt-debug"&amp;gt; &amp;lt;div class="yt-container"&amp;gt; &amp;lt;php echo $yt-&gt;displayModules('debug','standard'); ?&amp;gt; &amp;lt;div class="clear"&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;?php /** End Debug **/ endif; ?&amp;gt;</pre> </div> </div> </div> <section class="clearfix clear" style="padding: 2em 0;"><em>The documented typography above is a modified version of the reference guide available at: <a href="http://twitter.github.com/bootstrap/base-css.html">http://twitter.github.com/bootstrap/base-css.html</a></em></section>