A Example for Bootstrap Multiple Responsive Column

<html>
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>My first Bootstrap website!</h1>      
    <p>This page will grow as we add more and more components from Bootstrap...</p>      
  </div>

  <div class="row">
    <div class="col-xs-6">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <div class="col-xs-6">
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
      accusantium doloremque laudantium, totam rem aperiam. 
      Eaque ipsa quae ab illo inventore veritatis et quasi 
      architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

</body>
</html>

A Example for Bootstrap Affix

<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

  .navbar-inverse {
    background-color: #9C5D5D;
    border-color: #9C5D5D;
  }

  .navbar {
    border-radius: 0px;
    margin-bottom: 0px;
  }

  #se3 {padding-top:50px;height:400px;color: #fff; background-color: #4F9D9D}
  #se1 {padding-top:50px;height:400px;color: #fff; background-color: #FF5151}
  #se2 {padding-top:50px;height:400px;color: #fff; background-color: #8E8E8E}
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<div class="container-fluid" style="background-color:#2894FF;color:#ffffff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#se1">Product</a></li>
          <li><a href="#se2">Price</a></li>
          <li><a href="#se3">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="se1" class="container-fluid">
  <h1>It is Bootstrap</h1>
  <h1>It is Bootstrap</h1>
  <h1>It is Bootstrap</h1>
  <h1>It is Bootstrap</h1>
  <h1>It is Bootstrap</h1>
</div>

<div id="se2" class="container-fluid">
  <h1>I am Bootstrap</h1>
  <h1>I am Bootstrap</h1>
  <h1>I am Bootstrap</h1>
  <h1>I am Bootstrap</h1>
</div>

<div id="se3" class="container-fluid">
  <h1>It is the Example of Affix</h1>
  <h1>It is the Example of Affix</h1>
  <h1>It is the Example of Affix</h1>
  <h1>It is the Example of Affix</h1>
</div>
</body>
</html>

A Example for Bootstrap Scrollspy

A Example for Bootstrap Scrollspy

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style>
  body {
      position: relative; 
  }
  #section1 {padding-top:50px;height:400px;color: #fff; background-color: #2894FF;}
  #section2 {padding-top:50px;height:400px;color: #fff; background-color: #548C00;}
  #section3 {padding-top:50px;height:400px;color: #fff; background-color: #4F9D9D}
  #section41 {padding-top:50px;height:400px;color: #fff; background-color: #FF5151}
  #section42 {padding-top:50px;height:400px;color: #fff; background-color: #8E8E8E}
  </style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Bootstrap</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Product</a></li>
          <li><a href="#section2">Price</a></li>
          <li><a href="#section3">Contact Us</a></li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#section41">Location</a></li>
              <li><a href="#section42">Email</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>    

<div id="section1" class="container-fluid">
  <h1>Product</h1>
  <p>our product list. All Kind of books, DVDs, Mugs</p>
  <p>our product list. All Kind of books, DVDs, Mugs</p>
</div>
<div id="section2" class="container-fluid">
  <h1>Price</h1>
  <p>contact wit our sales for qotation</p>
  <p>contact wit our sales for qotation</p>
</div>
<div id="section3" class="container-fluid">
  <h1>Contact Us</h1>
  <p>Please call +886 7 7777777, we will answer your question.</p>
  <p>Please call +886 7 7777777, we will answer your question.</p>
</div>
<div id="section41" class="container-fluid">
  <h1>Location</h1>
  <p>Taipei 101</p>
  <p>Taipei 101</p>
</div>
<div id="section42" class="container-fluid">
  <h1>Email</h1>
  <p>please mail ttt@ttt.ttt.ttt</p>
  <p>please mail ttt@ttt.ttt.ttt</p>
</div>

</body>
</html>