Seiten-Templates
Klassisch oder speziell: hier finden Sie Anregungen für die Aufteilung Ihrer Seite.

 

 

Beispiele für klassische Flächenaufteilungen

 

  Navigation und Kopfbereich - Inhaltsbereich - Fußbereich

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav role="navigation" class="LayoutZoneAny" id="mainnavpane" runat="server"></nav>
            <header class="LayoutZoneAny" id="headerpane" runat="server"></header>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
           <main role="main" class="LayoutZoneAny" style="display:block" id="contentpane" runat="server"></main>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <footer role="footer" class="LayoutZoneAny" id="footerpane" runat="server"></footer>
        </div>
    </div>
</div>

  Navigation und Kopfbereich - Seitenleiste - Inhaltsbereich - Zusatzinfobereich 

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav role="navigation" class="LayoutZoneAny" id="mainnavpane" runat="server"></nav>
            <header class="LayoutZoneAny" id="headerpane" runat="server"></header>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-3 column">
           <nav role="sidebar" class="LayoutZoneAny" id="sidebarpane" runat="server"></nav>
        </div>
        <div class="col-md-6 column">
           <main role="main" class="LayoutZoneAny" style="display:block" id="contentpane" runat="server"></main>
        </div>
        <div class="col-md-3 column">
           <aside role="aside" class="LayoutZoneAny" id="asidepane" runat="server"></aside>
        </div>        
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <footer role="footer" class="LayoutZoneAny" id="footerpane" runat="server"></footer>
        </div>
    </div>
</div>

  Navigation und Kopfbereich - zwei Inhaltsbereiche - Fußbereich

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav role="navigation" class="LayoutZoneAny" id="mainnavpane" runat="server"></nav>
            <header class="LayoutZoneAny" id="headerpane" runat="server"></header>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-6 column">
           <div role="content" class="LayoutZoneAny" id="contentpane" runat="server"></div>
        </div>
        <div class="col-md-6 column">
           <div role="content" class="LayoutZoneAny" id="contentpane2" runat="server"></div>
        </div>    
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <footer role="footer" class="LayoutZoneAny" id="footerpane" runat="server"></footer>
        </div>
    </div>
</div>

 

Beispiele für speziellere Flächenaufteilungen (Door- und Landingpages)

 

 Header - Content

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
           <header class="LayoutZoneAny" id="headerpane" runat="server"></header>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
          <main role="main" class="LayoutZoneAny" style="display:block" id="contentpane" runat="server"></main>
        </div>
    </div>
</div>

 Content (links) - Navigation (rechts oben) - Kontextinfo (rechts unten) 

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="row clearfix">
                <div class="col-md-6 column">
                    <main role="main" class="LayoutZoneAny" style="display:block" id="contentpane" runat="server"></main>
                </div>
                <div class="col-md-6 column">
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                           <nav role="navigation" class="LayoutZoneAny" id="mainnavpane" runat="server"></nav>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <aside role="aside" class="LayoutZoneAny" id="asidepane" runat="server"></aside>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 Header (top) - sechs Contentbereiche 

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
           <header class="LayoutZoneAny" id="headerpane" runat="server"></header>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane" runat="server"></div>
        </div>
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane2" runat="server"></div>
        </div>
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane3" runat="server"></div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane4" runat="server"></div>
        </div>
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane5" runat="server"></div>
        </div>
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane6" runat="server"></div>
        </div>
    </div>
</div>

 Header - drei Contentbereiche (Teaser)

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
           <header class="LayoutZoneAny" id="headerpane" runat="server"></header>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane" runat="server"></div>
        </div>
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane2" runat="server"></div>
        </div>
        <div class="col-md-4 column">
           <div class="LayoutZoneAny" id="contentpane3" runat="server"></div>
        </div>
    </div>
</div>

 Header - zwei Contentbereiche

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
           <header class="LayoutZoneAny" id="headerpane" runat="server"></header>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-6 column">
           <div class="LayoutZoneAny" id="contentpane" runat="server"></div>
        </div>
        <div class="col-md-6 column">
           <div class="LayoutZoneAny" id="contentpane2" runat="server"></div>
        </div>
    </div>
</div>

 Navigation - zwei Zusatzinfobereiche (links) - Contentbereich (rechts)

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <div class="row clearfix">
                <div class="col-md-12 column">
                   <nav role="navigation" class="LayoutZoneAny" id="mainnavpane" runat="server"></nav>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                   <aside role="aside" class="LayoutZoneAny" id="asidepane" runat="server"></aside>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                   <aside role="aside" class="LayoutZoneAny" id="asidepane2" runat="server"></aside>
                </div>
            </div>
        </div>
        <div class="col-md-6 column">
           <main role="main" class="LayoutZoneAny" style="display:block" id="contentpane" runat="server"></main>
        </div>
    </div>
</div>

 Contentbereich (rechts) - Navigation - zwei Zusatzinfobereiche (links)

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-6 column">
           <main role="main" class="LayoutZoneAny" style="display:block" id="contentpane" runat="server"></main>
        </div>
        <div class="col-md-6 column">
            <div class="row clearfix">
                <div class="col-md-12 column">
                   <nav role="navigation" class="LayoutZoneAny" id="mainnavpane" runat="server"></nav>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                   <aside role="aside" class="LayoutZoneAny" id="asidepane" runat="server"></aside>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12 column">
                   <aside role="aside" class="LayoutZoneAny" id="asidepane2" runat="server"></aside>
                </div>
            </div>
        </div>
    </div>
</div>