Difference between revisions of "Team:NYMU-Taipei/Notebook"

Line 2: Line 2:
  
  
−
<html lang="en">
+
<html>
 +
<head>
 +
  <title>Bootstrap Example</title>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 +
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 +
  <style>
 +
  body {
 +
      position: relative;
 +
  }
 +
  #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
 +
  #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
 +
  #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
 +
  #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
 +
  #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
 +
  </style>
 +
</head>
 +
<body data-spy="scroll" data-target=".navbar" data-offset="50">
  
−
<head>
+
<nav class="navbar navbar-inverse navbar-fixed-top">
−
<meta charset="utf-8">
+
  <div class="container-fluid">
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
    <div class="navbar-header">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
−
+
          <span class="icon-bar"></span>
−
<!-- Bootstrap -->
+
          <span class="icon-bar"></span>
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
          <span class="icon-bar"></span>                      
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
+
      </button>
−
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
      <a class="navbar-brand" href="#">WebSiteName</a>
−
</head>
+
    </div>
−
+
    <div>
−
<body>
+
      <div class="collapse navbar-collapse" id="myNavbar">
−
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
+
        <ul class="nav navbar-nav">
−
<div class="container-fluid">  
+
          <li><a href="#section1">Section 1</a></li>
−
<div class="navbar-header">
+
          <li><a href="#section2">Section 2</a></li>
−
<button class="navbar-toggle" type="button" data-toggle="collapse"  
+
          <li><a href="#section3">Section 3</a></li>
−
data-target=".bs-js-navbar-scrollspy">
+
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
−
<span class="sr-only">切换导航</span>
+
            <ul class="dropdown-menu">
−
<span class="icon-bar"></span>
+
              <li><a href="#section41">Section 4-1</a></li>
−
<span class="icon-bar"></span>
+
              <li><a href="#section42">Section 4-2</a></li>
−
<span class="icon-bar"></span>
+
            </ul>
−
</button>
+
          </li>
−
<a class="navbar-brand" href="#">教程名称</a>
+
        </ul>
−
</div>
+
      </div>
−
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
+
    </div>
−
<ul class="nav navbar-nav">
+
  </div>
−
<li><a href="#ios">iOS</a></li>
+
</nav>  
−
<li><a href="#svn">SVN</a></li>
+
 
−
<li class="dropdown">
+
<div id="section1" class="container-fluid">
−
<a href="#" id="navbarDrop1" class="dropdown-toggle"  
+
  <h1>Section 1</h1>
−
  data-toggle="dropdown">Java
+
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
−
<b class="caret"></b>
+
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
−
</a>
+
−
<ul class="dropdown-menu" role="menu"
+
−
aria-labelledby="navbarDrop1">
+
−
<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
+
−
<li><a href="#ejb" tabindex="-1">ejb</a></li>
+
−
<li class="divider"></li>
+
−
<li><a href="#spring" tabindex="-1">spring</a></li>
+
−
</ul>
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
</div>  
+
−
</nav>
+
−
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
+
−
style="height:200px;overflow:auto; position: relative;">
+
−
<h4 id="ios">iOS</h4>
+
−
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
+
−
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
+
−
</p>
+
−
<h4 id="svn">SVN</h4>
+
−
<p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。
+
−
</p>
+
−
<h4 id="jmeter">jMeter</h4>
+
−
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
+
−
</p>
+
−
<h4 id="ejb">EJB</h4>
+
−
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
+
−
</p>
+
−
<h4 id="spring">Spring</h4>
+
−
<p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
+
−
</p>
+
−
<p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
+
−
</p>
+
 
</div>
 
</div>
−
</body>
+
<div id="section2" class="container-fluid">
−
+
  <h1>Section 2</h1>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
<div id="section3" class="container-fluid">
 +
  <h1>Section 3</h1>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
<div id="section41" class="container-fluid">
 +
  <h1>Section 4 Submenu 1</h1>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
<div id="section42" class="container-fluid">
 +
  <h1>Section 4 Submenu 2</h1>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 +
</div>
 +
 
 +
</body>
 
</html>
 
</html>

Revision as of 06:19, 29 July 2017

HOME
PROJECT
Overview
Pigments
Nitrogen starvation
Modeling
Hardware
Contribution
Improvement
Demonstration
LABWORK
Parts
Safety
Notebook
HUMAN PRACTICES
Silver HP
Gold & Integrated HP
Collaborations
ABOUT US
AWARDS
Applied Design
Modeling
Measurement
Plant
Basic Parts
Composite Parts
Part Collection
Public Engagement
JUDGING FORM


Bootstrap Example

Section 1

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 2

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 3

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 4 Submenu 1

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 4 Submenu 2

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!