Kostenlose Beratung und Bestellung
0800 / 34 50 608
Mo-Do: 8:00-18:00 Uhr Fr: 8:00-16:00 Uhr
Schreib uns eine E-Mail: shop@grimm-gastrobedarf.de

Beispiele HTML/CSS

Eine auswahl der Basis Styles kommt von bootstrap und kann benutzt werden.
Details zu bootstrap findest du hier: Bootstrap 2.3.2

Tooltips

Einfache Tooltips

                    <a data-toggle="tooltip" data-content="iam a tooltip">hover me</a></br>
                    <a data-toggle="tooltip" data-content="iam a tooltip" data-placement="left">tooltip links</a></br>
                    <a data-toggle="tooltip" data-content="iam a tooltip" data-placement="right">tooltip richts</a></br>
                    <a data-toggle="tooltip" data-content="iam a tooltip" data-placement="bottom">tooltip unten</a></br>
                

Popovers

                    <a data-toggle="popover" data-title="popover oben" data-content="iam a popover">klick mich</a></br>
                    <a data-toggle="popover" data-title="popover links" data-content="iam a popover" data-placement="left">popover links</a></br>
                    <a data-toggle="popover" data-title="popover rechts" data-content="iam a popover" data-placement="right">popover rechts</a></br>
                    <a data-toggle="popover" data-title="popover unten" data-content="iam a popover" data-placement="bottom">popover unten</a></br>
                

List Decorations

  • element1
  • element2
  • element3
  • element4

  • element1
  • element2
  • element3
  • element4
                <ul class="decorate-list">
                    <li>element1</li>
                    <li>element2</li>
                    <li>element3</li>
                    <li>element4</li>
                </ul>
                <hr />
                <ul class="decorate-list" data-type="check">
                    <li>element1</li>
                    <li>element2</li>
                    <li>element3</li>
                    <li>element4</li>
                </ul>
                

Tap Menu

  • Tab1
  • Tab2
  • Tab3

TAB1

TAB2

TAB3

                <div class="tab-menu">
                    <div>
                        <ul class="tab-menu-items">
                            <li class="tab-item active" data-tab="tab1">Tab1</li>
                            <li class="tab-item" data-tab="tab2">Tab2</li>
                            <li class="tab-item" data-tab="tab3">Tab3</li>
                        </ul>
                    </div>
                    <div class="tab-menu-content">
                        <div class="tab-content active" data-tab="tab1">
                            <h1>TAB1</h1>
                        </div>
                        <div class="tab-content" data-tab="tab2">
                            <h1>TAB2</h1>
                        </div>
                        <div class="tab-content" data-tab="tab3">
                            <h1>TAB3</h1>
                        </div>
                    </div>
                </div>
                

Scrolling

                    <a data-toggle="scroll-to" href="#anchor-header">Top</a><br />
                    <a data-toggle="scroll-to" data-target="anchor-header">Top</a>
                

Base Icons

  • Account
  • Cart
  • Info
  • Contact
  • Home
  • Print
  • Arrow Light Down
  • Arrow Light Up
  • Arrow Right
  • Check
  • Item Arrow
  • Item Check
  • Minus
  • Plus
  • Remove
                    <ul>
                        <li>
                            <span class="sprite-base" data-icon="account"></span>Account
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="cart"></span>Cart
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="info"></span>Info
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="contact"></span>Contact
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="home"></span>Home
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="print"></span>Print
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="arrow-light-down"></span>Arrow Light Down
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="arrow-light-up"></span>Arrow Light Up
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="arrow-right"></span>Arrow Right
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="check"></span>Check
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="item-arrow"></span>Item Arrow
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="item-check"></span>Item Check
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="minus"></span>Minus
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="plus"></span>Plus
                        </li>
                        <li>
                            <span class="sprite-base" data-icon="remove"></span>Remove
                        </li>
                    </ul>