Difference between revisions of "Team:EPF Lausanne/Notebook/Protocols"

(Undo revision 57384 by Awowen (talk))
Line 25: Line 25:
 
   ul.nav-pills {
 
   ul.nav-pills {
 
       top: 20px;
 
       top: 20px;
       position: fixed;
+
       position: relative;
 
   }
 
   }
 
</style>
 
</style>
Line 52: Line 52:
  
 
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/mordernizr-2.6.2?action=raw&amp;ctype=text/js"></script>
 
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/mordernizr-2.6.2?action=raw&amp;ctype=text/js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
 
</head>
 
</head>
<body  class="loading">
+
<body  class="loading" data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 
     <!--[if lt IE 7]>
 
     <!--[if lt IE 7]>
 
     <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
 
     <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
Line 134: Line 133:
 
         </div>
 
         </div>
 
     </div>
 
     </div>
    <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 
  
 
     <div class="first-section">
 
     <div class="first-section">
 
         <div class="row">
 
         <div class="row">
             <nav class="col-sm-3" id="myScrollspy">
+
             <div class="col-md-3" id="leftCol">
              <ul class="nav nav-pills nav-stacked">
+
                <div class="whitebg box">
                <li class="active"><a href="#section1">Section 1</a></li>
+
                    <nav id="affix-nav" class="sidebar hidden-sm hidden-xs">
                <li><a href="#section2">Section 2</a></li>
+
                        <ul class="nav sidenav box" data-spy="affix" data-offset-top="200" data-offset-bottom="600">
                <li><a href="#section3">Section 3</a></li>
+
                            <li>
                <li class="dropdown">
+
                                <a href="#Prot1">Protocol 1</a>
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
+
                                <ul class="nav">
                  <ul class="dropdown-menu">
+
                                  <li class=""><a href="#">- Sub 1</a></li>
                    <li><a href="#section41">Section 4-1</a></li>
+
                                  <li class=""><a href="#">- Sub 2</a></li>
                    <li><a href="#section42">Section 4-2</a></li>                    
+
                                </ul>
                  </ul>
+
                            </li>
                </li>
+
                            <li><a href="#Prot2">Protocol 2</a></li>
              </ul>
+
                            <li><a href="#Prot3">Protocol 3</a></li>
             </nav>
+
                            <li><a href="#Prot4">Protocol 4</a></li>
             <div class="col-sm-9">
+
                            <li><a href="#Prot5">Protocol 5</a></li>
              <div id="section1" class="well">  
+
                            <li><a href="#Prot6">Protocol 6</a></li>
                <h1>Section 1</h1>
+
                            <li><a href="#Prot7">Protocol 7</a></li>
                <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
                            <li><a href="#Prot8">Protocol 8</a></li>
              </div>
+
                            <li><a href="#Prot9">Protocol 9</a></li>
              <div id="section2" class="well">  
+
                            <li><a href="#Prot10">Protocol 10</a></li>
                <h1>Section 2</h1>
+
                        </ul>
                <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
                    </nav>
              </div>      
+
                </div>
              <div id="section3" class="well">        
+
             </div>
                <h1>Section 3</h1>
+
             <div class="col-md-9">
                <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
                <div id="Prot1" class="well">
              </div>
+
                    <h3>Protocol #1</h3>
              <div id="section41" class="well">        
+
                    <p>Materials</p>
                <h1>Section 4-1</h1>
+
                    <ul>
                 <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
                        <li>First item</li>
              </div>    
+
                        <li>Second one</li>
              <div id="section42" class="well">        
+
                    </ul>
                 <h1>Section 4-2</h1>
+
                    <p>Procedure</p>
                 <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
                    <ol>
              </div>
+
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                </div>
 +
 
 +
                <div id="Prot2" class="well">
 +
                    <h3>Protocol #2</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                </div>
 +
 
 +
                <div id="Prot3" class="well">
 +
                    <h3>Protocol #3</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                </div>
 +
 
 +
                <div id="Prot4" class="well">
 +
                    <h3>Protocol #4</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                 </div>
 +
 
 +
                <div id="Prot5" class="well">
 +
                    <h3>Protocol #5</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                </div>
 +
 
 +
                <div id="Prot6" class="well">
 +
                    <h3>Protocol #6</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                </div>
 +
 
 +
                <div id="Prot7" class="well">
 +
                    <h3>Protocol #7</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                 </div>
 +
 
 +
                <div id="Prot8" class="well">
 +
                    <h3>Protocol #8</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                 </div>
 +
 
 +
                <div id="Prot9" class="well">
 +
                    <h3>Protocol #9</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                </div>
 +
 
 +
                <div id="Prot10" class="well">
 +
                    <h3>Protocol #10</h3>
 +
                    <p>Materials</p>
 +
                    <ul>
 +
                        <li>First item</li>
 +
                        <li>Second one</li>
 +
                    </ul>
 +
                    <p>Procedure</p>
 +
                    <ol>
 +
                        <li>Take the first item</li>
 +
                        <li>Put it in the second</li>
 +
                        <li>Voilà</li>
 +
                    </ol>
 +
                </div>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
    </div>
+
 
 +
 
  
 
     <div class="fourth-section">
 
     <div class="fourth-section">

Revision as of 12:01, 21 July 2015

Protocols

Protocol #1

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #2

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #3

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #4

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #5

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #6

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #7

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #8

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #9

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Protocol #10

Materials

  • First item
  • Second one

Procedure

  1. Take the first item
  2. Put it in the second
  3. Voilà

Still under construction