Friday, December 4, 2015

Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy

In this Step by step Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy  
 post,  we design in 15 minutes a responsive Bootstrap Tab with  Scrollspy , in a from-scratch Application for Mobile devices & desktop computers . All the code is open source at GitHub:
https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy

This is how the Responsive Tabs with Scrollspy are displayed:




And this is the App in Nexus Galaxy devices :    



Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy  

If you are in a hurry and need the Tabs with Scrollspy right now, download it from the following GitHub repository. Afterwards,  adapt it to your needs:
https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy


You can begin building this app from a free Bootstrap template downloaded from  www.initializr.com/  (we explained this in a short tutorial: Bootstrap Templates). Elsewhere add to your HTML5 page the following CDN  jQuery and Bootstrap references   :


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


...and the following scripts before closing the </body> element  :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

The latest versions of the Bootstrap files are in this CDN server: http://www.bootstrapcdn.com/

If you need a Mobile device Emulator, read this short tutorial on installing the FREE Ripple Emulator.


1) Designing a Responsive Tab:

Following, we give you all the code to create the Tabs: all this code you just copy-paste inside your page.
Let's start.
We begin by creating the Navbar which allows the user to open the corresponding tabs content . We do so by using the Bootstrap classes "nav nav-tabs"   , in order to set the menu :

<ul id="myTabs" class="nav nav-tabs">
                    <li class="active"><a href="#home" id="home-tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
                    <li><a href="#profile" id="profile-tab" data-toggle="tab" aria-controls="profile">Life</a></li>
                    <li class="dropdown">
                        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">More <span class="caret"></span></a>
                        <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
                            <li><a href="#dropdown1" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">A friend</a></li>
                            <li><a href="#dropdown2" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Happiness</a></li>
                        </ul>
                    </li>
                </ul>
                <br />

The buttons will open the corresponding "tab-pane fade" , such as the following :

<div class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
                        <h3>Happiness</h3>
                        <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                        <br />
                        <p>Men of the most vulgar type, seem to identify the Happiness with pleasure. (Etics, I ch V)</p>
                        <p>It is the mark of an educated mind to be able to entertain a thought without accepting it.</p>
                    </div>








All the Bootstrap Tabs documentation can be found in the GetBootstrap Web Site.


2) Designing a Scrollspy inside a Tab:

Next, we create another Tab content, containing a Scrollspy:



<div class="tab-pane fade" id="profile" aria-labelledby="profile-tab">

                        <div class="bs-example" data-example-id="embedded-scrollspy">
                            <nav id="navbar-example2" class="navbar navbar-default navbar-static">
                                <div class="container-fluid">
                                    <div class="navbar-header">
                                        <button class="navbar-toggle collapsed" type="button" 
                                            data-toggle="collapse" 
                                            data-target=".bs-example-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="#">Points Of View</a>
                                    </div>
                                    <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
                                        <ul class="nav navbar-nav">
                                            <li><a href="#happy">A happy life</a></li>
                                            <li><a href="#Truth">Truth</a></li>
                                            <li class="dropdown">
                                                <a href="#" id="navbarDrop1" 
                                                    class="dropdown-toggle" data-toggle="dropdown" role="button" 
                                                    aria-haspopup="true" aria-expanded="false">More About Life <span class="caret"></span></a>
                                                <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
                                                    <li><a href="#love">Love</a></li>
                                                    <li><a href="#privilege">Privilege</a></li>
                                                    <li role="separator" class="divider"></li>
                                                    <li><a href="#perspective">Perspective</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>        

Every <a> button in the Nav will open the corresponding contents, and also, while you navigate from content to content, the corresponding menu will be outlined  .



Now for the Scrollspy:

 <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
                                <h4 id="happy">A happy life</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>Very little is needed to make a happy life</p>
                                ...
                                <h4 id="Truth">Truth</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>If someone is able to show me</p>
                                ...
                                <h4 id="love">Love</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>It is not death that a man should fear</p>
                                ...
                                <h4 id="privilege">Privilege</h4>
                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>You need to avoid certain things in your train of thought</p>
                                ...
                                <h4 id="perspective">Perspective</h4>

                                <img class="img-responsive img-rounded" src="..." alt="Alternate Text" />
                                <br />
                                <p>Everything we hear</p>
                                ...
                            </div>
                </ul>
            </nav>

        </div>
    </header>





That's all. The entire Tab with Scrollspy will be shown like this:


1- In Mobile devices : 












2- On Medium and Big desktops:






This is the style for the App:

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    
    color: #a8a3a3;
}

h2 {
    font: 900 18px Verdana;
    color: #a8a3a3;
}

.well p{
    font: 700 12px Verdana !important;    
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}
.scrollspy-example {
    position: relative;
height:400px;
overflow-y:scroll;
}



      by Carmel Schvartzman


כתב: כרמל שוורצמן