Bootstrap 简明教程

<h1>Hello, world!</h1>

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>

   <div class = "row">...</div>

</div>

<div class = "container">
   ....
</div>

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>

   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>

   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>

      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>

      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>

   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>

   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>

      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>

      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>

</table>

<table class = "table table-hover">
   <caption>Hover Table Layout</caption>

   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>

   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>

      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>

      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

<table class = "table table-condensed">
   <caption>Condensed Table Layout</caption>

   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>

   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>

      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>

      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody>
</table>

<form role = "form">

   <div class = "form-group">
      <label for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>

   <div class = "form-group">
      <label for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
      <p class = "help-block">Example block-level help text here.</p>
   </div>

   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>

   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

<form class = "form-inline" role = "form">

   <div class = "form-group">
      <label class = "sr-only" for = "name">Name</label>
      <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
   </div>

   <div class = "form-group">
      <label class = "sr-only" for = "inputfile">File input</label>
      <input type = "file" id = "inputfile">
   </div>

   <div class = "checkbox">
      <label><input type = "checkbox"> Check me out</label>
   </div>

   <button type = "submit" class = "btn btn-default">Submit</button>
</form>

<form class = "form-horizontal" role = "form">

   <div class = "form-group">
      <label for = "firstname" class = "col-sm-2 control-label">First Name</label>

      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
      </div>
   </div>

   <div class = "form-group">
      <label for = "lastname" class = "col-sm-2 control-label">Last Name</label>

      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
      </div>
   </div>

   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <div class = "checkbox">
            <label><input type = "checkbox"> Remember me</label>
         </div>
      </div>
   </div>

   <div class = "form-group">
      <div class = "col-sm-offset-2 col-sm-10">
         <button type = "submit" class = "btn btn-default">Sign in</button>
      </div>
   </div>

</form>

<form role = "form">

   <div class = "form-group">
      <label for = "name">Label</label>
      <input type = "text" class = "form-control" placeholder = "Text input">
   </div>

</form>

<form role = "form">

   <div class = "form-group">
      <label for = "name">Text Area</label>
      <textarea class = "form-control" rows = "3"></textarea>
   </div>

</form>

<label for = "name">Example of Default Checkbox and radio button </label>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 1
   </label>
</div>

<div class = "checkbox">
   <label>
      <input type = "checkbox" value = "">Option 2
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
   </label>
</div>

<div class = "radio">
   <label>
      <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
      Option 2 - selecting it will deselect option 1
   </label>
</div>

<label for = "name">Example of Inline Checkbox and radio button </label>

<div>
   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
   </label>

   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
   </label>

   <label class = "checkbox-inline">
      <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
   </label>

   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
   </label>

   <label class = "checkbox-inline">
      <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
   </label>
</div>

<form role = "form">

   <div class = "form-group">
      <label for = "name">Select list</label>

      <select class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

      <label for = "name">Mutiple Select list</label>

      <select multiple class = "form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>

   </div>

</form>

<form class = "form-horizontal" role = "form">
   <div class = "form-group">
      <label class = "col-sm-2 control-label">Focused</label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
      </div>
   </div>

   <div class = "form-group">
      <label for = "inputPassword" class = "col-sm-2 control-label">
         Disabled
      </label>
      <div class = "col-sm-10">
         <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
      </div>
   </div>

   <fieldset disabled>
      <div class = "form-group">
         <label for = "disabledTextInput" class = "col-sm-2 control-label">
            Disabled input (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
         </div>
      </div>

      <div class = "form-group">
         <label for = "disabledSelect" class = "col-sm-2 control-label">
            Disabled select menu (Fieldset disabled)
         </label>
         <div class = "col-sm-10">
            <select id = "disabledSelect" class = "form-control">
               <option>Disabled select</option>
            </select>
         </div>
      </div>
   </fieldset>

   <div class = "form-group has-success">
      <label class = "col-sm-2 control-label" for = "inputSuccess">
         Input with success
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputSuccess">
      </div>
   </div>

   <div class = "form-group has-warning">
      <label class = "col-sm-2 control-label" for = "inputWarning">
         Input with warning
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputWarning">
      </div>
   </div>

   <div class = "form-group has-error">
      <label class = "col-sm-2 control-label" for = "inputError">
         Input with error
      </label>
      <div class = "col-sm-10">
         <input type = "text" class = "form-control" id = "inputError">
      </div>
   </div>
</form>

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>

   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>

   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>

   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>

   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>

   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>

   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

<div class = "dropdown">

   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>

   <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>

      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>

      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>

      <li role = "presentation" class = "divider"></li>

      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>

</div>

<div class = "dropdown">

   <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
      Topics
      <span class = "caret"></span>
   </button>

   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>

      <li role = "presentation" >
         <a role = "menuitem" tabindex = "-1" href = "#">Java</a>
      </li>

      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
      </li>

      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">
            Data Communication/Networking
         </a>
      </li>

      <li role = "presentation" class = "divider"></li>
      <li role = "presentation" class = "dropdown-header">Dropdown header</li>

      <li role = "presentation">
         <a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
      </li>
   </ul>

</div>

<p>Pills Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<p>Vertical Pills Example</p>

<ul class = "nav nav-pills nav-stacked">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>
   <li><a href = "#">Java</a></li>
   <li><a href = "#">PHP</a></li>
</ul>

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>

   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java
         <span class = "caret"></span>
      </a>

      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>

   </li>

   <li><a href = "#">PHP</a></li>
</ul>

<p>Pills With Dropdown Example</p>

<ul class = "nav nav-pills">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>

   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java <span class = "caret"></span>
      </a>

      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>

         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>

   </li>

   <li><a href = "#">PHP</a></li>
</ul>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1</a></li>
   <li class = "disabled"><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   <li><a href = "#">2</a></li>
   <li><a href = "#">3</a></li>
   <li><a href = "#">4</a></li>
   <li><a href = "#">5</a></li>
   <li><a href = "#">&raquo;</a></li>
</ul>

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
   aria-labelledby = "myModalLabel" aria-hidden = "true">

   <div class = "modal-dialog">
      <div class = "modal-content">

         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>

            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>

         <div class = "modal-body">
            Add some text here
         </div>

         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>

            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>

      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
   aria-labelledby = "myModalLabel" aria-hidden = "true">

   <div class = "modal-dialog">
      <div class = "modal-content">

         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>

            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>

         <div class = "modal-body">
            Press ESC button to exit.
         </div>

         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>

            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>

      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
   aria-labelledby = "myModalLabel" aria-hidden = "true">

   <div class = "modal-dialog">
      <div class = "modal-content">

         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>

            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>

         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>

         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>

            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>

      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>

   <div>
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class="caret"></b>
            </a>

            <ul class = "dropdown-menu">
               <li><a href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>
      </ul>
   </div>

</nav>

<p>Tabs With Dropdown Example</p>

<ul class = "nav nav-tabs">
   <li class = "active"><a href = "#">Home</a></li>
   <li><a href = "#">SVN</a></li>
   <li><a href = "#">iOS</a></li>
   <li><a href = "#">VB.Net</a></li>

   <li class = "dropdown">
      <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
         Java
         <span class = "caret"></span>
      </a>

      <ul class = "dropdown-menu">
         <li><a href = "#">Swing</a></li>
         <li><a href = "#">jMeter</a></li>
         <li><a href = "#">EJB</a></li>

         <li class = "divider"></li>
         <li><a href = "#">Separated link</a></li>
      </ul>

   </li>

   <li><a href = "#">PHP</a></li>
</ul>

<nav class = "navbar navbar-default" role = "navigation">
   <div class = "navbar-header">
      <a class = "navbar-brand" href = "#">TutorialsPoint</a>
   </div>

   <div id = "myexample">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#">iOS</a></li>
         <li><a href = "#">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>

            <ul class = "dropdown-menu">
               <li><a id = "action-1" href = "#">jmeter</a></li>
               <li><a href = "#">EJB</a></li>
               <li><a href = "#">Jasper Report</a></li>

               <li class = "divider"></li>
               <li><a href = "#">Separated link</a></li>

               <li class = "divider"></li>
               <li><a href = "#">One more separated link</a></li>
            </ul>

         </li>

      </ul>
   </div>

</nav>

<script>
   $(function(){
      $(".dropdown-toggle").dropdown('toggle');
   });
</script>

<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">

   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse"
         data-target = ".bs-js-navbar-scrollspy">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>

      <a class = "navbar-brand" href = "#">Tutorial Name</a>
   </div>

   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
               Java
               <b class = "caret"></b>
            </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>

</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 is a mobile operating system developed and distributed by Apple
      Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple
      TV. iOS is derived from OS X, with which it shares the Darwin
      foundation. iOS is Apple's mobile version of the OS X operating system
      used on Apple computers.</p>

   <h4 id = "svn">SVN</h4>

   <p>Apache Subversion which is often abbreviated as SVN, is a software
      versioning and revision control system distributed under an open source
      license. Subversion was created by CollabNet Inc. in 2000, but now it
      is developed as a project of the Apache Software Foundation, and as
      such is part of a rich community of developers and users.</p>

   <h4 id = "jmeter">jMeter</h4>

   <p>jMeter is an Open Source testing software. It is 100% pure Java
      application for load and performance testing.</p>

   <h4 id = "ejb">EJB</h4>

   <p>Enterprise Java Beans (EJB) is a development architecture for building
      highly scalable and robust enterprise level applications to be deployed
      on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>

   <h4 id = "spring">Spring</h4>

   <p>Spring framework is an open source Java platform that provides
      comprehensive infrastructure support for developing robust Java
      applications very easily and very rapidly.</p>

   <p>Spring framework was initially written by Rod Johnson and was first
      released under the Apache 2.0 license in June 2003.</p>

</div>

<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">

   <div class = "navbar-header">
      <button class = "navbar-toggle" type = "button" data-toggle = "collapse"
         data-target = ".bs-js-navbar-scrollspy">
         <span class = "sr-only">Toggle navigation</span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
         <span class = "icon-bar"></span>
      </button>

      <a class = "navbar-brand" href = "#">Tutorial Name</a>
   </div>

   <div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class = "nav navbar-nav">
         <li class = "active"><a href = "#ios">iOS</a></li>
         <li><a href = "#svn">SVN</a></li>

         <li class = "dropdown">
            <a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle  = "dropdown">
               Java
               <b class = "caret"></b>
            </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>

</nav>

<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"
   style = "height:200px; overflow:auto; position: relative;">

   <div class = "section">
      <h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>

      <p>iOS is a mobile operating system developed and distributed by
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>

   <div class = "section">
      <h4 id = "svn">SVN<small></small></h4>
      <p>Apache Subversion which is often abbreviated as SVN, is a software
         versioning and revision control system distributed under an open source
         license. Subversion was created by CollabNet Inc. in 2000, but
         now it is developed as a project of the Apache Software Foundation,
         and as such is part of a rich community of developers and users.</p>
   </div>

   <div class = "section">
      <h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
         &times; Remove this section</a></small>
      </h4>

      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>

   <div class = "section">
      <h4 id = "ejb">EJB</h4>

      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications
         to be deployed on J2EE compliant Application Server such as
         JBOSS, Web Logic etc.</p>
   </div>

   <div class = "section">
      <h4 id = "spring">Spring</h4>

      <p>Spring framework is an open source Java platform that provides
         comprehensive infrastructure support for developing robust Java
         applications very easily and very rapidly.</p>

      <p>Spring framework was initially written by Rod Johnson and was first
         released under the Apache 2.0 license in June 2003.</p>
   </div>

</div>

<script type = "text/javascript">
   $(function(){
      removeSection = function(e) {
         $(e).parents(".section").remove();

         $('[data-spy = "scroll"]').each(function () {
            var $spy = $(this).scrollspy('refresh')
         });
      }
      $("#myScrollspy").scrollspy();
   });
</script>

<html>
   <head>
      <link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
      <script src = "bootstrap/scripts/jquery.min.js"></script>
      <script src = "bootstrap/js/bootstrap.min.js"></script>

      <script>
         $(document).ready(function(){
            removeSection = function(e) {
               $(e).parents(".subject").remove();

               $('[data-spy="scroll"]').each(function () {
                  var $spy = $(this).scrollspy('refresh')
               });
            }

            $("#Navexample").scrollspy();

            // The event is fired when an item gets actived with the scrollspy
            $("#Navexample").on('activate.bs.scrollspy', function () {
               var currentSection = $(".nav li.active > a").text();
               $("#spyevent").html("Current Item being viewed >> " + currentSection);
            })

         });
      </script>

      <style>
         .scroll-box {
            height: 250px;
            position: relative;
            overflow: auto;
            font-size:2em;
         }
      </style>
   </head>

   <body>
      <div class = "container">
         <nav id = "Navexample" class = "navbar navbar-default" role = "navigation">

            <!-- Nav Bar -->
            <div class = "navbar-header">
               <button type = "button" class = "navbar-toggle"
                  data-toggle = "collapse" data-target = "#navbarCollapse">

                  <span class = "sr-only">Toggle navigation</span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>

               <a class = "navbar-brand" href = "#">Tutorials Point</a>
            </div>

            <!-- Links and Sublinks -->
            <div class = "collapse navbar-collapse" id = "navbarCollapse">
               <ul class = "nav navbar-nav">
                  <li class = "active"><a href = "#subject-1">Subject 1</a></li>
                  <li><a href = "#subject-2">Subject 2</a></li>

                  <li class = "dropdown"><a href = "#" class = "dropdown-toggle"
                     data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>

                     <ul class = "dropdown-menu">
                        <li><a href = "#subject-3-1">Subject 3.1</a></li>
                        <li><a href = "#subject-3-2">Subject 3.2</a></li>
                        <li><a href = "#subject-3-3">Subject 3.3</a></li>
                     </ul>

                  </li>

                  <li><a href = "#subject-4">Subject 4</a></li>
               </ul>
            </div>

         </nav>

         <div class = "scroll-box" data-spy = "scroll" data-offset = "0">
            <div class = "subject">

               <h3 id = "subject-1">Subject 1
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>

               <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>

            <hr>

            <div class = "subject">
               <h3 id = "subject-2">Subject 2
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>

               <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>

            <hr>

            <div class = "subject">
               <h3 id = "subject-3">Subject 3
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h3>

               <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>

            <hr>

            <div class = "subject">
               <h4 id = "subject-3-1">Subject 3.1
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>

               <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 = "subject">
               <h4 id = "subject-3-2">Subject 3.2
                  <small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
               </h4>

               <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 = "subject">
               <h4 id = "subject-3-3">Subject 3.3
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h4>

               <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>

            <hr>

            <div class = "subject">
               <h3 id = "subject-4">Subject 4
                  <small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
               </h3>

               <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>
         <hr>

         <h4 id = "spyevent" class = "text-info"></h4>
      </div>
   </body>
</html>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>

   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>

   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>

      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
         <li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>

   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed
         by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
         and Apple TV. iOS is derived from OS X, with which it shares the
         Darwin foundation. iOS is Apple's mobile version of the OS X
         operating system used on Apple computers.</p>
   </div>

   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>

   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>

</div>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>

   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>

   <li class = "dropdown">

      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>

      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
               jmeter
            </a>
         </li>

         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">
               ejb
            </a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>

   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>

   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>

   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS,
         Web Logic etc.</p>
   </div>

</div>

<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>

<ul id = "myTab" class = "nav nav-tabs">
   <li class = "active">
      <a href = "#home" data-toggle = "tab">
         Tutorial Point Home
      </a>
   </li>

   <li><a href = "#ios" data-toggle = "tab">iOS</a></li>

   <li class = "dropdown">
      <a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
         Java
         <b class = "caret"></b>
      </a>

      <ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
         <li>
            <a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
         </li>

         <li>
            <a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
         </li>
      </ul>
   </li>
</ul>

<div id = "myTabContent" class = "tab-content">

   <div class = "tab-pane fade in active" id = "home">
      <p>Tutorials Point is a place for beginners in all technical areas.
         This website covers most of the latest technologies and explains each of
         the technology with simple examples.</p>
   </div>

   <div class = "tab-pane fade" id = "ios">
      <p>iOS is a mobile operating system developed and distributed by
         Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
         Apple TV. iOS is derived from OS X, with which it shares the Darwin
         foundation. iOS is Apple's mobile version of the OS X operating system
         used on Apple computers.</p>
   </div>

   <div class = "tab-pane fade" id = "jmeter">
      <p>jMeter is an Open Source testing software. It is 100% pure Java
         application for load and performance testing.</p>
   </div>

   <div class = "tab-pane fade" id = "ejb">
      <p>Enterprise Java Beans (EJB) is a development architecture for
         building highly scalable and robust enterprise level applications to be
         deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
   </div>
</div>

<script>
   $(function(){
      $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
         // Get the name of active tab
         var activeTab = $(e.target).text();

         // Get the name of previous tab
         var previousTab = $(e.relatedTarget).text();

         $(".active-tab span").html(activeTab);
         $(".previous-tab span").html(previousTab);
      });
   });
</script>

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
   title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
   data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"
   title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"
   title = "Tooltip on right">Tooltip on Right</a>

<br>

<h4>Tooltip examples for buttons</h4>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   Default Tooltip
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
   data-placement = "left" title = "Tooltip on left">

   Tooltip on left
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
   data-placement = "top" title = "Tooltip on top">

   Tooltip on top
</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
   data-placement = "bottom" title = "Tooltip on bottom">

   Tooltip on bottom
</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip"
   data-placement = "right" title = "Tooltip on right">

   Tooltip on right
</button>

<script>
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>

<div style = "padding: 100px 100px 10px;">
   This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
      title = "show">Tooltip on method show</a>.

   This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip"
      data-placement = "left" title = "hide">Tooltip on method hide</a>.

   This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip"
      data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

   This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip"
      data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.

   <br><br><br><br><br><br>

   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   </script>
</div>

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
   title = "Default Tooltip">Default Tooltip</a>.

<script>
   $(function () { $('.tooltip-show').tooltip('show');});

   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
</script>

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default" title = "Popover title"
      data-container = "body" data-toggle = "popover" data-placement = "left"
      data-content = "Some content in Popover on left">

      Popover on left
   </button>

   <button type = "button" class = "btn btn-primary" title = "Popover title"
      data-container = "body" data-toggle = "popover" data-placement = "top"
      data-content = "Some content in Popover on top">

      Popover on top
   </button>

   <button type = "button" class = "btn btn-success" title = "Popover title"
      data-container = "body" data-toggle = "popover" data-placement = "bottom"
      data-content = "Some content in Popover on bottom">

      Popover on bottom
   </button>

   <button type = "button" class = "btn btn-warning" title = "Popover title"
      data-container = "body" data-toggle = "popover" data-placement = "right"
      data-content = "Some content in Popover on right">

      Popover on right
   </button>

</div>

<script>
   $(function (){
      $("[data-toggle = 'popover']").popover();
   });
</script>

<div class = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-default popover-show"
      title = "Popover title" data-container = "body"
      data-toggle = "popover" data-placement = "left"
      data-content = "Some content in Popover with show method">

      Popover on left
   </button>

   <button type = "button" class = "btn btn-primary popover-hide"
      title = "Popover title" data-container = "body"
      data-toggle = "popover" data-placement = "top"
      data-content = "Some content in Popover-hide method">

      Popover on top
   </button>

   <button type = "button" class = "btn btn-success popover-destroy"
      title = "Popover title" data-container = "body"
      data-toggle = "popover" data-placement = "bottom"
      data-content = "Some content in Popover-destroy method">

      Popover on bottom
   </button>

   <button type = "button" class = "btn btn-warning popover-toggle"
      title = "Popover title" data-container = "body"
      data-toggle = "popover" data-placement = "top"
      data-content = "Some content in Popover-toggle method">

      Popover on right
   </button>

   <br><br><br><br><br><br>

   <p class = "popover-options">
      <a href = "#" type = "button" class = "btn btn-warning"
         title = "<h2>Title</h2>" data-container = "body"
         data-toggle = "popover" data-content = "
         <h4>Some content in Popover-options method</h4>">

         Popover
      </a>
   </p>

   <script>
      $(function () { $('.popover-show').popover('show');});
      $(function () { $('.popover-hide').popover('hide');});
      $(function () { $('.popover-destroy').popover('destroy');});
      $(function () { $('.popover-toggle').popover('toggle');});
      $(function () { $(".popover-options a").popover({html : true });});
   </script>

</div>

<div clas = "container" style = "padding: 100px 50px 10px;" >
   <button type = "button" class = "btn btn-primary popover-show"
      title = "Popover title" data-container = "body" data-toggle = "popover"
      data-content = "Some content in Popover with show method">

      Popover on left
   </button>

</div>

<script>
   $(function () { $('.popover-show').popover('show');});

   $(function () { $('.popover-show').on('shown.bs.popover', function () {
      alert("Alert message on show");
   })});
</script>

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>

   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });
</script>

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });
</script>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>

<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>

<div id = "myButtons1" class = "bs-example">
   <button type = "button" class = "btn btn-primary">Primary</button>
</div>

<h4>Example to demonstrate  .button('loading') method</h4>

<div id = "myButtons2" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate .button('reset') method</h4>

<div id = "myButtons3" class = "bs-example">
   <button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
      Primary
   </button>
</div>

<h4>Example to demonstrate  .button(string) method</h4>

<button type = "button" class = "btn btn-primary" id = "myButton4"
   data-complete-text = "Loading finished">
   Click Me
</button>

<script type = "text/javascript">
   $(function () {
      $("#myButtons1 .btn").click(function(){
         $(this).button('toggle');
      });
   });

   $(function() {
      $("#myButtons2 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
         });
      });
   });

   $(function() {
      $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });
      });
   });

   $(function() {
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });
      });
   });
</script>

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-default">

      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
               Click me to expand. Click me again to collapse. Section 1--hide method
            </a>
         </h4>
      </div>

      <div id = "collapseOne" class = "panel-collapse collapse in">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>

   <div class = "panel panel-success">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
               Click me to expand. Click me again to collapse. Section 2--show method
            </a>
         </h4>
      </div>

      <div id = "collapseTwo" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>

   <div class = "panel panel-info">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
               Click me to expand. Click me again to collapse. Section 3--toggle method
            </a>
         </h4>
      </div>

      <div id = "collapseThree" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>
   </div>

   <div class = "panel panel-warning">
      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
               Click me to expand. Click me again to collapse. Section 4--options method
            </a>
         </h4>
      </div>

      <div id = "collapseFour" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>
</div>

<script type = "text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});

   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>

<div class = "panel-group" id = "accordion">
   <div class = "panel panel-info">

      <div class = "panel-heading">
         <h4 class = "panel-title">
            <a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
               Click me to expand. Click me again to collapse. Section --shown event
            </a>
         </h4>
      </div>

      <div id = "collapseexample" class = "panel-collapse collapse">
         <div class = "panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
               sapiente ea proident. Ad vegan excepteur butcher vice lomo.
         </div>
      </div>

   </div>
</div>

<script type = "text/javascript">
   $(function () {
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('Hey, this alert shows up when you expand it');
      })
   });
</script>

<div id = "myCarousel" class = "carousel slide">

   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>

   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
         <div class = "carousel-caption">This Caption 1</div>
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
         <div class = "carousel-caption">This Caption 2</div>
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
         <div class = "carousel-caption">This Caption 3</div>
      </div>
   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>+
</div>

<div id = "myCarousel" class = "carousel slide">

   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>

   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>

   <!-- Controls buttons -->
   <div style = "text-align:center;">
      <input type = "button" class = "btn prev-slide" value = "Previous Slide">
      <input type = "button" class = "btn next-slide" value = "Next Slide">
      <input type = "button" class = "btn slide-one" value = "Slide 1">
      <input type = "button" class = "btn slide-two" value = "Slide 2">
      <input type = "button" class = "btn slide-three" value = "Slide 3">
   </div>

</div>

<script>
   $(function() {

      // Cycles to the previous item
      $(".prev-slide").click(function() {
         $("#myCarousel").carousel('prev');
      });

      // Cycles to the next item
      $(".next-slide").click(function() {
         $("#myCarousel").carousel('next');
      });

      // Cycles the carousel to a particular frame
      $(".slide-one").click(function() {
         $("#myCarousel").carousel(0);
      });

      $(".slide-two").click(function() {
         $("#myCarousel").carousel(1);
      });

      $(".slide-three").click(function() {
         $("#myCarousel").carousel(2);
      });
   });
</script>

<div id = "myCarousel" class = "carousel slide">

   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slide-to = "1"></li>
      <li data-target = "#myCarousel" data-slide-to = "2"></li>
   </ol>

   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slide1.png" alt = "First slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide2.png" alt = "Second slide">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slide3.png" alt = "Third slide">
      </div>
   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slide = "next">&rsaquo;</a>

</div>

<script>
   $(function() {
      $('#myCarousel').on('slide.bs.carousel', function () {
         alert("This event fires immediately when the slide instance method" +"is invoked.");
      });
   });
</script>

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>

   <div id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">

      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>

      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>

         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante. Vestibulum
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse
            varius nibh non aliquet sagittis. In tincidunt orci sit amet
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit,
            id interdum neque porttitor. Integer faucibus ligula.</p>

         <p>Vestibulum quis quam ut magna consequat faucibus.
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
            mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>

         <hr>

         <h2 id = "two">Tutorial Two</h2>

         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis
            dapibus orci. In dapibus velit blandit pharetra tincidunt.
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed
            fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>

         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
            convallis sed. Nam odio tortor, dictum quis malesuada at,
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at
            facilisis libero. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
            mollis ornare augue.</p>

         <hr>

         <h2 id = "three">Tutorial Three</h2>

         <p>Integer pulvinar leo id risus pellentesque vestibulum.
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
            Donec sed nibh vitae lorem porttitor blandit in nec ante.
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
            pharetra id arcu eget blandit. Proin imperdiet mattis augue in
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
            lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
            semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
            nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit
            amet mauris. </p>

         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante
            id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
            turpis at accumsan tincidunt. Phasellus risus risus,
            volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit
            dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis,
            tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis
            pellentesque ultricies ac ligula. Pellentesque convallis  elit nisi, id
            vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
            potenti. Integer pellentesque neque et elementum tempus.
            Curabitur bibendum in ligula ut rhoncus.</p>

         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>

   </div>
</div>

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = $('.bs-footer').outerHeight(true))
      }
   }
})

<div class = "container">
   <div class = "jumbotron">
      <h1>Bootstrap Affix Plugin example</h1>
   </div>

   <div>

      <div class = "col-md-3">
         <ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
            <li class = "active"><a href = "#one">Tutorial One</a></li>
            <li><a href = "#two">Tutorial Two</a></li>
            <li><a href = "#three">Tutorial Three</a></li>
         </ul>
      </div>

      <div class = "col-md-9">
         <h2 id = "one">Tutorial One</h2>

         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
            ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh
            non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio
            in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique
            eget risus. Integer aliquet quam ut elit suscipit, id interdum
            neque porttitor. Integer faucibus ligula.</p>

         <p>Vestibulum quis quam ut magna consequat faucibus.
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor.
            Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
            bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
            dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
            hendrerit tellus.</p>

         <hr>

         <h2 id = "two">Tutorial Two</h2>

         <p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris
            quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor.
            Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum
            ligula sed consequat.</p>

         <p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
            convallis sed. Nam odio tortor, dictum quis malesuada at,
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna.
            Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
            mollis ornare augue.</p>

         <hr>

         <h2 id = "three">Tutorial Three</h2>

         <p>Integer pulvinar leo id risus pellentesque vestibulum.
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
            Donec sed nibh vitae lorem porttitor blandit in nec ante.
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam.
            Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
            purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
            dolor nisl semper tortor, vel sagittis lacus est consequat eros.
            Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id,
            tincidunt sit amet mauris.</p>

         <p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
            lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
            at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
            tincidunt fringilla massa. Etiam hendrerit dolor eget ante
            rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
            semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
            ac ligula. Pellentesque convallis  elit nisi, id vulputate ipsum
            ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
            potenti. Integer pellentesque neque et elementum tempus.
            Curabitur bibendum in ligula ut rhoncus.</p>

         <p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
      </div>

   </div>
</div>

<script type = "text/javascript">
   $(function () {
      $('#myNav').affix({
         offset: {
            top: 60
         }
      });
   });
</script>