Difference between revisions of "Template:RUM-UPRM/Example"

 
(28 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
−
  <title>Bootstrap Example</title>
 
 
   <meta charset="utf-8">
 
   <meta charset="utf-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
Line 14: Line 13:
 
   body {
 
   body {
 
     position: relative;
 
     position: relative;
 +
     
 +
 
   }
 
   }
 
   ul.nav-pills {
 
   ul.nav-pills {
 
     top: 70px;
 
     top: 70px;
 +
 +
position: sticky;
 +
top: 70px;
 +
    margin-left: 4em;
 +
    margin-top: 4em;
 +
    /*border-radius: 0px 15px 15px 0px;*/
 +
    max-width: 12vw;
 +
    overflow-wrap: break-word;
 +
    line-height: 1;
 +
    overflow: hidden;
 
}
 
}
  
Line 23: Line 34:
  
 
   }
 
   }
−
   div.col-8 div {
+
   div.col-9 div {
 
     height: 500px;
 
     height: 500px;
 +
width: 50px;
 +
    display: block;
 +
    text-decoration: none;
 +
    color: var(--dark);
 +
    font-size: 1em;
 +
    padding-left: 0.6em;
 +
    padding-top: 0.5em;
 +
    padding-bottom: 0.3em;
 +
    padding-right: 0.5em;
 +
    font-weight: 400;
 +
    position: relative;
 +
    z-index: 1;
 +
    overflow: hidden;
 +
    transition: all 0.5s
 
   }
 
   }
 
.sticky {
 
.sticky {
Line 31: Line 56:
 
     width: 100%;
 
     width: 100%;
 
}
 
}
−
#myScrollspy {
+
.myScrollspy {
 
position: sticky;  
 
position: sticky;  
−
top: 70px;
+
top: 70px;.scroll-spy
 +
    margin-left: 4em;
 +
    margin-top: 4em;
 +
    /*border-radius: 0px 15px 15px 0px;*/
 +
    max-width: 12vw;
 +
    overflow-wrap: break-word;
 +
    line-height: 1;
 +
    overflow: hidden;
  
 
}
 
}
  
−
  </style>
+
.spy-list>a.selected {
 +
    border-left: 3px solid var(--accent2);
 +
    transition: all 0.2s;
 +
    font-weight: 700;
 +
}
  
  
 +
  </style>
 
</head>
 
</head>
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
  
−
<div class="container-fluid" style="bg-info;height:250px; top: 200px">
+
<div class="container-fluid" style= "background-color:#3BB9FF; height:100px; top: 200px">
−
   <h1>Scrollspy & Affix Example</h1>
+
   <center><h1>TITLE</h1></center>
−
  <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>
+
 
</div>
 
</div>
  
Line 53: Line 87:
 
<div class="container-fluidtwo">
 
<div class="container-fluidtwo">
 
   <div class="row">
 
   <div class="row">
−
     <nav class="col-sm-3 col-4" id="myScrollspy">
+
     <nav class="col-sm-2 col-3" id="myScrollspy">
−
       <ul class="nav nav-pills flex-sm-column">
+
       <ul class="nav nav-pills">
 
         <li class="nav-item">
 
         <li class="nav-item">
−
           <a class="nav-link active" href="#section1">Section 1</a>
+
           <a class="nav-link active" href="#section1">Tema 1</a>
 
         </li>
 
         </li>
 
         <li class="nav-item">
 
         <li class="nav-item">
−
           <a class="nav-link" href="#section2">Section 2</a>
+
           <a class="nav-link" href="#section2">Tema 2</a>
 
         </li>
 
         </li>
 
         <li class="nav-item">
 
         <li class="nav-item">
−
           <a class="nav-link" href="#section3">Section 3</a>
+
           <a class="nav-link" href="#section3">Tema 3</a>
−
        </li>
+
−
        <li class="nav-item dropdown">
+
−
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
+
−
          <div class="dropdown-menu">
+
−
            <a class="dropdown-item" href="#section41">Link 1</a>
+
−
            <a class="dropdown-item" href="#section42">Link 2</a>
+
−
          </div>
+
 
         </li>
 
         </li>
 
       </ul>
 
       </ul>
 
     </nav>
 
     </nav>
−
     <div class="col-sm-9 col-8">
+
 
−
      <div id="section1" class="insert color">   
+
 
−
        <h1>Section 1</h1>
+
     <div class="col-sm-9 col-8; scroll"> <div align="justify">
−
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
       <div id="section1">  
−
      </div>
+
         <center><h1>Title</h1></center>
−
       <div id="section2" class="bg-warning">  
+
 
−
         <h1>Section 2</h1>
+
         <p style="margin-left:7%; margin-right:7%"> Text Here </p>
−
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
−
      </div>      
+
−
      <div id="section3" class="bg-secondary">       
+
−
        <h1>Section 3</h1>
+
−
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
−
      </div>
+
−
      <div id="section41" class="bg-danger">       
+
−
        <h1>Section 4-1</h1>
+
−
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
−
      </div>     
+
−
      <div id="section42" class="bg-info">        
+
−
        <h1>Section 4-2</h1>
+
−
        <p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
 
</div>
 
</div>
  
 +
      <div id="section2">
 +
  <center><h1>Tema 2</h1> </center>
 +
<p style=" margin-left:7%; margin-right:7%"> Text Here</p>
  
 +
</div>
 +
       
 +
      <div id="section3">       
 +
        <center> <h1>Tema 3</h1> </center>
 +
<p style=" margin-left:7%; margin-right:7%">Text Here </p>
 +
</div>
  
 +
</div>
 +
    </div>
 +
  </div>
 +
</div>
 +
</div>
  
 
  <script>
 
  <script>
Line 117: Line 142:
 
</body>
 
</body>
 
</html>
 
</html>
 +
 
{{RUM-UPRM/Footer}}
 
{{RUM-UPRM/Footer}}

Latest revision as of 14:05, 27 October 2020



RUM-UPRM Wiki Source Code

TITLE

Title

Text Here

Tema 2

Text Here

Tema 3

Text Here





Our Sponsors

Amgen Snapgene UPRM Goya Genscript PRABIA MolecularCloud MatLab IDT ReviveRestore Twist

Follows Us!