IT-KURS

Thema: Notifications einsetzen

Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Alert Styles


<div class='alert alert-success'>
    Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. <a href='#' class='alert-link'>Alert Link</a>.
</div>
<div class='alert alert-info'>
    Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. <a href='#' class='alert-link'>Alert Link</a>.
</div>
<div class='alert alert-warning'>
    Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. <a href='#' class='alert-link'>Alert Link</a>.
</div>
<div class='alert alert-danger'>
    Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. <a href='#' class='alert-link'>Alert Link</a>.
</div>

1. Ausgabe für Alert Styles

Alert Styles

Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. Alert Link.

2. Code für Dismissible Alert


<div class='alert alert-success'>
	<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
    Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. <a href='#' class='alert-link'>Alert Link</a>.
</div>
<div class='alert alert-info'>
    <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
    Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. <a href='#' class='alert-link'>Alert Link</a>.
</div>
<div class='alert alert-warning'>
    <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
    Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. <a href='#' class='alert-link'>Alert Link</a>.
</div>
<div class='alert alert-danger'>
    <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×</button>
    Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. <a href='#' class='alert-link'>Alert Link</a>.
</div>

2. Ausgabe für Dismissible Alert

Dismissible Alert

Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan. Alert Link.

3. Code für Modals


<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'>
    Launch Demo Modal
</button>
<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
    <div class='modal-dialog' role='document'>
        <div class='modal-content'>
            <div class='modal-header'>
                <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
                <h4 class='modal-title' id='myModalLabel'>Modal title</h4>
            </div>
            <div class='modal-body'>
                  Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.
            </div>
            <div class='modal-footer'>
                <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
                <button type='button' class='btn btn-primary'>Save changes</button>
            </div>
        </div>
    </div>
</div>

3. Ausgabe für Modals

Modals

4. Code für Tooltips and Popovers


<div class='tooltip-demo'>
    <button type='button' class='btn btn-default' data-toggle='tooltip' data-placement='left' title='Tooltip on left'>Tooltip on left</button>
    <button type='button' class='btn btn-default' data-toggle='tooltip' data-placement='top' title='Tooltip on top'>Tooltip on top</button>
    <button type='button' class='btn btn-default' data-toggle='tooltip' data-placement='bottom' title='Tooltip on bottom'>Tooltip on bottom</button>
    <button type='button' class='btn btn-default' data-toggle='tooltip' data-placement='right' title='Tooltip on right'>Tooltip on right</button>
</div>
<br>
<h4>Clickable Popover Demo</h4>
<div class='tooltip-demo'>
    <button type='button' class='btn btn-default' data-container='body' data-toggle='popover' data-placement='left' data-content='Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.'>
        Popover on left
    </button>
    <button type='button' class='btn btn-default' data-container='body' data-toggle='popover' data-placement='top' data-content='Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.'>
        Popover on top
    </button>
    <button type='button' class='btn btn-default' data-container='body' data-toggle='popover' data-placement='bottom' data-content='Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.'>
        Popover on bottom
    </button>
    <button type='button' class='btn btn-default' data-container='body' data-toggle='popover' data-placement='right' data-content='Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.'>
        Popover on right
    </button>
</div>

4. Ausgabe für Tooltips and Popovers

Tooltips and Popovers

Clickable Popover Demo

Hinweis: Für die Darstellung von Popover müssen Sie in Ihrer Hauptdatei das folgende Script eintragen.

JavaScript for Popovers


<script>
   // tooltip demo
   $('.tooltip-demo').tooltip({
       selector: '[data-toggle=tooltip]',
       container: 'body'
   })

   // popover demo
   $('[data-toggle=popover]').popover()
</script>