Showing posts with label Bootstrap 3. Show all posts
Showing posts with label Bootstrap 3. Show all posts

Monday, January 20, 2014

, ,

Responsive Navigation Bar In Twitter Bootstrap 3




Introduction


Now-a-days Its very important to make your website compatible with the mobile devices. In order to make it possible you need to figure out somethings by learning how to make responsive websites.



Bootstrap 3 gives you a powerful platform to make your website responsive and here I am showing a live demo of making a responsive navigation bar in Twitter Bootstrap 3.



First download the below style-sheet and the js file.


 You can download the source code here too.




 


Behind The Scene




OK, before we start this thing you must be a bit familiar with the Bootstrap things like classes, components etc. if you are not aware of this thing just have a look into this link;



Download Bootstrap and Learn



Let's take a html page first and add the below references.


 <head>   
     <link href="css/bootstrap.min.css" rel="stylesheet">
     <script src="js/bootstrap.min.js"></script>
     <meta name="viewport" content="width=device-width, intial-scale=1.0">
 </head>

* This meta is required to enable the responsive design( this example will work if you remove this meta too)



Now we will see how to design the carousel slider.






Creating The Navigation Bar






Use the below code to make a responsive navigation bar.

    <div class="container">
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
               <button class="btn btn-scuuess navbar-toggle"
                        data-toggle="collapse"
                        data-target=".navbar-collapse">
                    <span class="glyphicon glyphicon-chevron-down"></span>
               </button>
            </div>
            <div id="logo">
                <a href="#"><h4>Tapan Kumar</h4> </a>
            </div>
        
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav active"><a href="#"> Home</a></li>
                <li class="nav"> <a href="#"> About</a></li>
                <li class="nav"><a href="#"> Blog</a></li>
                <li class="nav"><a href="#"> Article</a></li>
                <li class="nav"><a href="#"> Example</a></li>
                <li class="nav"><a href="#"> Contact</a></li>
            </ul>
        </div>
    </div>
  </div>

In the above code we have given the div containing the navigation list a class named "navbar-collapse collapse", which tells the browser to hide the links (ul/li) in smaller screen resolutions.





And the button we have taken above the list inside the navbar-header div has two attributes named data-toggle which tells the browser that this is a toggle element and also has another attribute named data-target which tells the browser to show what and to hide what when user clicks on it.





The data-target is set to the class of the div, containing the navigation list.




Live demo










That's all, we have just designed a responsive navigation bar using Bootstrap 3.



Happy Coding...


 Publisher: Tapan kumar - 6:23 AM

Wednesday, January 8, 2014

, ,

Carousel Image Slider In Twitter Bootstrap 3




Introduction




Bootstrap 3 is a very powerful CSS framework that has the power to make the life of a web designer very very easy.



Image slider is a very important thing when web design comes to our mind. You definitely need this in your website to add some life to the inactive text contents in order to catch the attention of the user. Before the revolution brought by Bootstrap, we used to use different jQuery plugins to create image sliders. But after Bootstrap creating an image sliders made so easy for you like a piece of cake.



Bootstrap offers a lot many CSS classes, jQuery plugins. Here we will see how to create a carousel image slider using this Bootstrap 3.



First of all download the Bootstrap 3 files from here Download, and extract the zip file. All you need is the below tow files.





 



Behind The Scene






Once you downloaded  and extracted it from the above link, add a HTML page to the root folder. And give reference to the above said two files located in the JS and CSS folders respectively.


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

Now we will see how to design the carousel slider.






Creating The Carousel Slider






Use the below code to create an impressive image slider.


 <div class="carousel slide" id="theCarousel" data-interval="3000">
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />                     
        </div>
        <div class="item ">
            <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />                    
        </div>
        <div class="item ">
            <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />                      
        </div>
    </div> 
 </div>

*data-interval : This is the time interval in which you want to slide the images(here it is 3 sec).



The class "carousel slide"  tells bootstrap that this control contains a carousel image slider inside it. Then the div with class "carousel-inner" holds all the images you need to slide in the slider.



Inside the div with class "carousel-inner" put your image tags in separate divs with class "item", give the class "active" to the item you want to show first.



That's it you are just a step away to create the beautiful image slider. Just call the "carousel" plugin from jQuery in document.ready.


 <script type="text/javascript">
  (function () {
      $("#theCarousel").carousel();
   })();
 </script>

* "#theCarousel" is the id of the carousel div.



Here take a look how the simple carousel image slider looks like in jsfiddle.












Giving Indicators To The Carousel




You can add custom slider indicators also in the carousel. Just add a ordered list with class "carousel-indicators" 


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

* "data-target" attribute holds the id of the carousel and "data-slide-to" attribute holds the slide number starting from 0

* add class "active" with respect to the active element of your slide.



Here take a look how the simple carousel image slider with indicators looks like in jsfiddle.












Giving Custom Navigation To The Carousel 




Now lets give a "Prev" and "Next" navigation to our carousel slider. You can do this by just adding two anchor tags, below the last item div.



You can give a span inside the anchor tag to show icons, the code is below.


 <a href="#theCarousel" class="carousel-control left" data-slide="prev">
     <span class="icon-prev"></span>
 </a>
 <a href="#theCarousel" class="carousel-control right" data-slide="next">
     <span class="icon-next"></span>
 </a>





* The anchor tag contains the ID of the carousel in the href attribute.

* The left and right navigation control have a class of "carousel-control left" and "carousel-control right" respectively.

* The "data-slide" attribute has a value of "prev" and "next" accordingly.



 Here take a look how the simple carousel image slider with navigation looks like in jsfiddle.












Giving Captions To The Carousel Slider




Here in this section we will give a custom captions to the individual slides. This is very simple to do. Just add  a div with class "carousel-caption" just below each image tag. And you are free to place whatever you want inside that div.



See the below code for this. 


 <div class="carousel-caption">
     <h4 class="text-left">Resting In Style</h4>
     <p class="text-left">Hi Everybody what's going on.....</p>
 </div>

 Here take a look how the simple carousel image slider with captions looks like in jsfiddle.







Now you have seen how to make a beautiful carousel with indicators, navigations and captions in Bootstrap 3.



Happy Coding...


 Publisher: Tapan kumar - 10:52 PM
Subscribe to: Posts (Atom)
 

 

Copyright © iCodeFor.NET 2014. All rights reserved.