Tuesday, September 8, 2015

Bootstrap Tutorial Lesson 13 - Responsive MegaNavbars

In this Step by step Bootstrap Tutorial Lesson 13 - Responsive MegaNavbars 
 post,  we design in 15 minutes a responsive Bootstrap MegaNavbar with several kinds of components like Tables, Lists, buttons, Carousel, Search form, and more, shown in different formats, in a from-scratch Application for Mobile & desktop computers . All the code is open source at GitHub:
 https://github.com/CarmelSoftware/Bootstrap_MegaNavbars
This is how the MegaNavbars are displayed:

 Bootstrap Tutorial Lesson 13 - Responsive MegaNavbars

 Tutorial Lesson 13 - Responsive MegaNavbars

And this is the App in Nexus Galaxy devices :    

 Bootstrap  Lesson 13 - Responsive MegaNavbars



Bootstrap Tutorial Lesson 13 - Responsive MegaNavbars 

If you are in a hurry and need the MegaNavbar  right now, download it from the following GitHub repository, then customize it to your needs:
https://github.com/CarmelSoftware/Bootstrap_MegaNavbars


You can start building from a free Bootstrap template from  www.initializr.com/  (as explained in this short tutorial: Bootstrap Templates). Elsewhere add to your HTML5 page the following 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>



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


1) Designing a first MegaNavbar collapsible Menu:

Following, we give you all the code to create the MegaNavbar: all this code you just copy-paste inside your page, chaining the code IN GREEN , chunk after chunk, then customizing it to your needs.
Let's start.
We begin by creating the containing Navbar . We do so by using the Bootstrap classes "navbar navbar-default navbar-fixed-top" and "navbar-header" , in order to set the classic Mobile menu button:

 <header class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target=".my-navbar-collapse"
                    aria-expanded="false" aria-controls="navbar">
                    <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="#">Bootstrap Advanced Navbars</a>
            </div>

The button will open the collapsible "navbar-collapse collapse" . Inside it, the navbar-bar will include the following button to open a dropdown-menu:

<ul class="nav navbar-nav">
                    <li class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Rich Controls  <span class="caret"></span></a>
                        <ul class="dropdown-menu custom-dropdown-menu1 row">


a ) Carousel:

Inside the menu, we first create a Carousel as follows:

<li class="col-xs-12 col-sm-5 col-lg-3">
                                <div id="carousel-example-generic" class="carousel slide carousel-custom" data-ride="carousel">
                                    <div class="carousel-inner">
                                        <div class="item active">
                                            <img src="http://www.stockvault.net/data/2011/02/23/118137/small.jpg" alt="..." />
                                            <div class="carousel-caption">
                                                <h3>jQuery Mobile</h3>
                                                <p>jQueryMobilePlugins</p>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img src="http://www.stockvault.net/data/2011/02/24/118148/small.jpg" alt="..." />
                                            <div class="carousel-caption">
                                                <h3>Bootstrap</h3>
                                                <p>Bootstrap Plugins</p>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img src="http://www.stockvault.net/data/2011/05/31/124348/small.jpg" alt="..." />
                                            <div class="carousel-caption">
                                                <h3>HTML5</h3>
                                                <p>HTML5 Mobile Apps</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h5>Bootstrap Front End</h5>
                                <p class="nav-text">
                                    Bootstrap makes front-end web development faster and easier. 
                                    It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
                                </p>
                                
                            </li>



b ) Buttons:

Now we add link buttons:

<li class="col-xs-12  col-sm-7 col-lg-4">
                                <a href="http://carmelsoft.blogspot.com" class="btn btn-block btn-custom">CarmelSoft Mobile Plugins</a>

                                <a class="btn btn-block btn-custom" href="https://github.com/CarmelSoftware">CarmelSoftware GitHub</a>

                                <a class="btn btn-block btn-custom" href="http://themvcclub.blogspot.com">The MVC Club</a>

                                <a class="btn btn-block btn-custom" href="http://www.getbootstrap.com">Get Bootstrap </a>

                                <a class="btn btn-block btn-custom" href="http://www.jquery.com">Get jQuery</a>

                            </li>

c ) List :

We also add to the MegaNavbar a list group:


<li class="col-xs-12  col-sm-12 col-lg-5">

                                <div class="list-group">
                                    <a href="https://github.com/CarmelSoftware" class="list-group-item active">CarmelSoftware GitHub
                                    </a><a href="http://carmelsoft.blogspot.com" class="list-group-item">CarmelSoft Mobile Plugins</a>
                                    <a href="http://themvcclub.blogspot.com" class="list-group-item">The MVC Club</a>

                                    <a href="http://www.getbootstrap.com" class="list-group-item">Get Bootstrap</a>
                                    <a href="http://www.jquery.com" class="list-group-item">Get jQuery</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>

That's all. The first Menu is done. Just add the CSS3 style (at the end of this post) to display it correctly:
 Bootstrap Tutorial  - Responsive MegaNavbars


 Bootstrap Tutorial Lesson 13 -  MegaNavbars


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

2) Designing a second MegaNavbar dropdown Menu:

Next, we create another Navbar menu, containing a Table and a Form. Add the following menu:

 <ul class="nav navbar-nav">
                    <li class="dropdown custom-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Table & Search  <span class="caret"></span></a>
                        <ul class="dropdown-menu custom-dropdown-menu2 row">

Inside it, add the Search Form:

<li class="col-xs-12 col-sm-12 col-lg-4">
                                <form class="navbar-form" role="form">
                                    <h4>Search in this Website</h4>
                                    <div class="form-group">
                                        <input type="text" placeholder="Search" class="form-control" />
                                    </div>
                                    <button type="submit" class="btn btn-default">Search</button>
                                </form>
                                <img src="http://www.stockvault.net/data/2011/02/23/118137/small.jpg" alt="..." />
                                <p class="nav-text">
                                    Bootstrap makes front-end web development faster and easier. 
                                    It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
                                </p>                                
                            </li>        

We enhanced this column with an image and some text.
Now for the Table:

 <li class="col-xs-12  col-sm-12 col-lg-8">                                                                
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Website</th>
                                            <th>Url</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th scope="row">1</th>
                                            <td>CarmelSoftware GitHub</td>
                                            <td><a href="https://github.com/CarmelSoftware" >CarmelSoftware GitHub
                                            </a>
                                            </td>
                                            <td>Open source MVC HTML5 CSS3 OData REST code</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">2</th>
                                            <td>CarmelSoft Mobile Plugins</td>
                                            <td><a href="http://carmelsoft.blogspot.com" >CarmelSoft Mobile Plugins</a></td>
                                            <td>Bootstrap & jQuery Mobile Plugins</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">3</th>
                                            <td>The MVC Club</td>
                                            <td><a href="http://themvcclub.blogspot.com" >The MVC Club</a></td>
                                            <td>MVC HTML5 CSS3 OData REST</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">4</th>
                                            <td>GetBootstrap.com</td>
                                            <td><a href="http://www.getbootstrap.com" >www.getbootstrap.com</a></td>
                                            <td>Get Bootstrap</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">5</th>
                                            <td>jQuery.com</td>
                                            <td><a href="http://www.jquery.com" >www.jquery.com</a></td>
                                            <td>Get jQuery</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </li>
                        </ul>
                    </li>

                </ul>
            </nav>

        </div>
    </header>

 Bootstrap Tutorial Lesson 13 - Responsive

That's all. The entire MegaNavbar will be shown like this:


1- In Mobile devices : 

 Lesson 13 - Responsive MegaNavbars

 Bootstrap - Responsive MegaNavbars

 Bootstrap Tutorial Lesson 13 -

  Tutorial Lesson 13 - Responsive MegaNavbars

 Lesson 13 - Responsive MegaNavbars

  Responsive MegaNavbars



2- On Medium and Big desktops:



 MegaNavbars

 Bootstrap Tutorial Lesson 13

 Bootstrap Tutorial Lesson

 Bootstrap Tutorial



This is the style for the App:

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

.jumbotron h1 {
    font: 900 25px Verdana;
    color: #a8a3a3;
}

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

.well {
    font: 900 12px Comic Sans MS;
    color: #a8a3a3;
}

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

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}

.navbar-nav > li > .dropdown-menu {
    margin-top: 15px;margin-left:10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.custom-dropdown {
    position: static !important;
    width: 100%;
}



.nav-text {
    text-align: justify;
    font: 800 11px verdana;
}

.btn-custom {
    font: 900 12px verdana;
    text-shadow: -1px -1px 0px #fff;
    background-color: #f0f0f0;
    margin: 11px 21px 21px 0px;
    padding: 20px;
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    box-shadow: 10px 10px #a0a0a0;
}

.custom-dropdown-menu1:before {
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 38%;
    z-index: 10;
}

.custom-dropdown-menu1:after {
    border-bottom: 17px solid #FFF;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -15px;
    left: 38%;
    z-index: 8;
}
.custom-dropdown-menu2 {
    margin: 20px;
    padding: 15px 15px;
    width: 70%;
    box-shadow: 2px;
}
.custom-dropdown-menu2:before {
    border-bottom: 15px solid #fff;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 58%;
    z-index: 10;
}

.custom-dropdown-menu2:after {
    border-bottom: 17px solid #fff;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 58%;
    z-index: 8;
}




      by Carmel Schvartzman


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

Wednesday, September 2, 2015

Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items

In this Step by step Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items 
   we experiment with several kinds of responsive Lists, Linked, Contextual, Custom , with Badges, and more, shown in different formats, in an from-scratch Application for Mobile & desktop computers . This App will display the Bootstrap Lists fitting all screen sizes .
You can download the complete app from the following GitHub repository:
https://github.com/CarmelSoftware/Bootstrap_Lists

This is how the Lists are displayed:






And this is the way how they appear in an Nexus Galaxy devices, for example:    





Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items


You can build this app by using a Bootstrap template (free download) from  www.initializr.com/  (as explained in this short post : Bootstrap Templates), or elsewhere writing the following jQuery and Bootstrap references in the HTML5 file  :


<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 also  the following references before closing the </body>   :

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




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


1) Displaying Bootstrap Custom Content Lists:


The Bootstrap supports elegant Lists display . Following are several templates for exemplifying the use of Lists in Bootstrap. They include all kind of Lists, Contextual, Linked, Disabled, Badges, and more, shown in different formats. List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
We begin by creating Lists containing Custom Content . We do so by using the Bootstrap classes "list-group-item-heading" and "list-group-item-text" inside several "list-group-item" in a "list-group" , so you can display Custom Content Lists. You can add all type of HTML5 within, even for linked list groups:



The Custom Content List will be displayed this way:




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

2) Responsive Bootstrap Linked items with Contextual classes:

Next, we create another List containing links, but also with Contextual information.  The items are Links enhanced with contextual significance, from "Active" to "Disabled", and with Badges counters:


That will be shown this:







3) Minimalistic List Example:


Finally, this is a very simple responsive List, build over an unordered HTML list :


And will appear this way:



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, .panel p {
    font: 700 12px Verdana !important;
    color: #a8a3a3;
}

h4 + p {
    font: 700 10px 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;
}

a.active p {
    color: #fff;
}





That's all. Our Lists will be displayed this way:

1- In Mobile devices : 








The displays for Nexus devices screens is as follows:






2- On Medium and Big desktops:









      by Carmel Schvartzman


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