To insert sample help text to be visualized during hover with the mouse: use the <abbr> tag.
Example:
This code:
Use only <abbr title="Secure Sockets Layer">SSL</abbr> connections!
Will produce this result:
Use only SSL connections!
To insert User input: use the <kbd> tag
This code:
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>will produce this result:
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
Colored box messages
This code:
<p class="bg-primary">...primary example</p>
<p class="bg-success">...success example</p>
<p class="bg-info">...info example</p>
<p class="bg-warning">...warning example</p>
<p class="bg-danger">...danger example</p>will produce this result:
...primary example
...success example
...info example
...warning example
...danger example
To insert code in a post: use the <pre></pre> HTML tag.
Example:
.Text in a pre element preservers both spaces and
line breaks, and is displayed ina fixed-wifth font
.
Alert boxes
This code:
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>will produce this result:
Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Popover
This code:
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>will produce this result:
This code:
<a href="#" data-toggle="popover" title="StarterMail service" data-content="Startermail is the powerful and reliable e-mail service included for free with any hosting plan. <a href='startermail-service.php' title='StarterMail'>Further details</a>">StarterMail service</a>will produce this result:
