KBFalkenberg (Talk | contribs) |
|||
(32 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
− | {{Team:DTU-Denmark/ | + | {{Team:DTU-Denmark/header.html}} <!-- Header template --> |
− | |||
− | |||
− | |||
+ | <html lang="en"> | ||
<head> | <head> | ||
− | < | + | <title>Bootstrap Example</title> |
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <!--Bootstrap, source: https://getbootstrap.com/--> | ||
+ | |||
+ | <script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/bootstrap-js?action=raw&ctype=text/javascript"></script> | ||
+ | <script> | ||
+ | // Dynamic affix to bottom of masthead | ||
+ | $('#MYsidebar').affix({ | ||
+ | offset: { | ||
+ | top: function() { return $('.before-content').height(); } | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | |||
+ | #MYsidebar .affix-top { | ||
+ | position: static; | ||
+ | } | ||
+ | |||
+ | #MYsidebar .affix { | ||
+ | position: fixed; | ||
+ | top: 125px; | ||
+ | } | ||
+ | |||
+ | div.col-sm-9 div { | ||
+ | height: 250px; | ||
+ | font-size: 28px; | ||
+ | } | ||
+ | |||
+ | #overview {color: #fff; background-color: #1E88E5;} | ||
+ | #medal-requirements {color: #fff; background-color: #673ab7;} | ||
+ | #bronze {color: #fff; background-color: #ff9800;} | ||
+ | #silver {color: #fff; background-color: #00bcd4;} | ||
+ | #gold {color: #fff; background-color: #009688;} | ||
+ | |||
+ | /*@media screen and (max-width: 810px) { | ||
+ | #overview, #medal-requirements, #bronze, #silver, #gold { | ||
+ | margin-left: 150px; | ||
+ | } | ||
+ | }*/ | ||
+ | </style> | ||
</head> | </head> | ||
+ | <!-- BODY --> | ||
+ | <div data-spy="scroll" data-target="#myScrollspy" data-offset="10"> | ||
+ | <div class="masthead"> | ||
+ | <div class="container-fluid" style="background-color:#2196F3;color:#fff;"> | ||
+ | <div class="row"> | ||
+ | <h1>Masthead</h1> | ||
+ | <h1>Scrollspy & Affix Example</h1> | ||
+ | <h3>Fixed vertical sidenav on scroll</h3> | ||
+ | <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p> | ||
+ | <p>The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.</p> | ||
+ | <!-- Insert content for masthead--> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> <!-- /masthead--> | ||
− | < | + | <br> |
+ | <div id="before-content"></div> | ||
<div class="container"> | <div class="container"> | ||
− | + | <div class="row"> <!--Must sorround both content and sidebar--> | |
− | <div class=" | + | <div class="col-md-9"> <!-- left--> |
− | + | <div id="overview"> | |
− | < | + | <h1>Overview</h1> |
− | <div | + | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. |
− | + | </p><p> | |
− | <p> | + | Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea. |
− | + | </p><p> | |
− | </p> | + | Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p> |
+ | </div> <!-- /overview--> | ||
+ | |||
+ | <div id="medal-requirements"> | ||
+ | <h1>Medal requirements</h1> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. | ||
+ | </p><p> | ||
+ | Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea. | ||
+ | </p><p> | ||
+ | Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p> | ||
</div> | </div> | ||
− | + | ||
− | < | + | <div id="bronze"> |
− | + | <h1>Bronze</h1> | |
− | + | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. | |
− | + | </p><p> | |
− | + | Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea. | |
− | + | </p><p> | |
− | <p> | + | Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p> |
− | + | ||
− | </p> | + | |
</div> | </div> | ||
− | </div> | + | <div id="silver"> |
+ | <h1>Silver</h1> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. | ||
+ | </p><p> | ||
+ | Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea. | ||
+ | </p><p> | ||
+ | Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p> | ||
+ | </div> | ||
+ | <div id="gold"> | ||
+ | <h1>Gold</h1> | ||
+ | <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. | ||
+ | </p><p> | ||
+ | Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea. | ||
+ | </p><p> | ||
+ | Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.</p> | ||
+ | </div> | ||
+ | </div> <!-- /LEFT --> | ||
+ | |||
+ | <!-- RIGHT--> | ||
+ | <div class="col-md-3 hidden-sm hidden-xs" id="myScrollspy"> | ||
+ | <ul class="nav nav-pills nav-stacked" id="MYsidebar" data-spy="affix"> <!-- data-offset-top="230" data-offset-bottom="100">--> | ||
+ | <!--data-offset-top control at which scroll point the affix will come into effect, data-offset-bottom control when affix will no longer be in effect--> | ||
+ | <li><a href="#overview">OVERVIEW</a></li> | ||
+ | <li><a href="#medal-requirements">MEDAL REQUIREMENTS</a></li> | ||
+ | <li><a href="#bronze">BRONZE</a></li> | ||
+ | <li><a href="#silver">SILVER</a></li> | ||
+ | <li><a href="#gold">GOLD</a></li> | ||
+ | </ul> | ||
+ | </div> <!-- /RIGHT --> | ||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
+ | </div> <!-- /CONTENT--> | ||
+ | </div> <!-- /BODY--> | ||
− | |||
</html> | </html> |
Latest revision as of 17:12, 13 August 2016
Masthead
Scrollspy & Affix Example
Fixed vertical sidenav on scroll
Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".
The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.
Overview
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.
Medal requirements
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.
Bronze
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.
Silver
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.
Gold
Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
Mazim oblique aliquam cum id, nam possim scaevola adolescens ea. Ex vel causae tibique epicuri, ne dolore suavitate usu, labitur fierent insolens in mei. Cu dolore accusata pertinacia vel, clita temporibus ex qui. Aliquip splendide ne eos, corrumpit reprimique eum ea.
Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his. Habeo electram has ei, usu no magna eripuit reprehendunt. Probo ferri at vis, no meis novum mei, sea probo qualisque in.