Bootstrap Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
    <div class="row custom-row">
      <ul class="upperul">
          <li>Apple</li>         
          <li>Orange</li>
          <li>Banana</li>
          <li>Mango</li>
        </ul>  
       <div class="fruit-content">
        <div class="app des">
           The apple is the pomaceous fruit of the apple tree, species Malus domestica in the rose family (Rosaceae). It is one of the most widely cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans. Apples grow on small, deciduous trees. The tree originated in Western Asia, where its wild ancestor, Malus sieversii, is still found today. Apples have been grown for thousands of years in Asia and Europe, and were brought to North America by European colonists. Apples have been present in the mythology and religions of many cultures, including Norse, Greek and Christian traditions. In 2010, the fruit's genome was decoded, leading to new understandings of disease control and selective breeding in apple production.

There are more than 7,500 known cultivars of apples, resulting in a range of desired characteristics. Different cultivars are bred for various tastes and uses, including in cooking, fresh eating and cider production. Domestic apples are generally propagated by grafting, although wild apples grow readily from seed. Trees are prone to a number of fungal, bacterial and pest problems, which can be controlled by a number of organic and non-organic means.

About 69 million tonnes of apples were grown worldwide in 2010, and China produced almost half of this total. The United States is the second-leading producer, with more than 6% of world production. Turkey is third, followed by Italy, India and Poland. Apples are often eaten raw, but can also be found in many foods (especially desserts) and drinks. Many beneficial health effects...

CSS

.container {
    margin-top: 10px;
}
.ora, .ban, .man{display:none;}
.fruit-content{width:100%;}
li{display:inline-block;width:24%;text-align:center;border-bottom:1px solid #fff;background: #C0C;}
ul.upperul{margin:0 0 0 0px;width:103%;}
.custom-row{border:1px solid green;}
.selected{background: #c0c0c0;}
@media  (max-width:480px) {
    li{display: block;width: 100%;text-align: left;}
    .custom-row{border:1px solid #000000;}
    ul.upperul{margin-left: 0px;width:100%;}

}

JavaScript

$(function() {
    $("li").live("click" , function() {
     $(this).css("background","#c0c0c0").siblings().css("background","#d23");
     $(".des").hide().eq($(this).index()).show();
    })
    .eq(0).addClass('selected');
});