"Tab View HTML/Bootstrap"
Bootstrap 3.3.0 Snippet by xrozix

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create Custom responsive Tabview in HTML </h2> <div class="tab_content"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="tabbable-panel"> <div class="tabbable-line"> <ul class="nav nav-tabs "> <li class="active"> <a href="#tab_default_1" data-toggle="tab"> Sprinkle Types </a> </li> <li> <a href="#tab_default_2" data-toggle="tab"> Sprinkle Size </a> </li> <li> <a href="#tab_default_3" data-toggle="tab"> Sprinkle Head Types </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab_default_1"> <ul class="sprinkle_types"> <li>Quick response</li> <li>CMSA (control mode specific application)</li> <li>Standard response</li> <li>Residential</li> <li>ESFR (early suppression fast response)</li> </ul> <h2 class="sprinkle_types_title">ESFR</h2> <p class="sprinkle_types_para">ESFR (early suppression fast response) refers to both a concept and a type of sprinkler. "The concept is that fa st response of sprinklers can produce an advantage in a fire if the response is accompanied by an effective dis charge density — that is, a sprinkler spray capable of fighting its way down through the fire plume in sufficient quantities to suppress the burning fuel package."[18] The sprinkler that was developed for this concept was cre ated for use in high rack storage. </p><br> <p class="sprinkle_types_para_two">ESFR sprinkler heads were developed in the 1980s to take advantage of the latest fast-response fire sprinkler t echnology to provide fire suppression of specific high-challenge fire hazards. Prior to the introduction of these sprinklers, protection systems were designed to control fires until the arrival of the fire department.</p> </div> <div class="tab-pane" id="tab_default_2"> <ul class="sprinkle_size"> <li> Maximum Ceiling Temprature <ul class="temp_ceiling"> <li>100 °F / 38 °C</li> <li>300 °F / 149 °C</li> <li>625 °F / 329 °C</li> </ul> </li> <li> Temprature Rating <ul class="temp_rating"> <li>135-170 °F / 57-77 °C</li> <li>325-375 °F / 163-191 °C </li> <li>650 °F / 343 °C</li> </ul> </li> <li> Temprature Classification <ul class="temp_classification"> <li>Ordinary</li> <li>Extra High</li> <li>Ultra high</li> </ul> </li> <li> Color Code (with Fusible Link) <ul class="temp_color"> <li>Uncolored or Black</li> <li>Red</li> <li>Orange</li> </ul> </li> <li> Operating Time in second <ul class="temp_time"> <li>3 to 32 second</li> </ul> </li> </ul> </div> <div class="tab-pane" id="tab_default_3"> <ul class="sprinkler_head_types"> <li> Rotary Heads <ul class="rotary"> <li>Large spray radius (15-50 ft.) - Good for large areas</li> <li>Low flow rate reduces puddling and runoff</li> <li>High spray force helps prevent clogging of spray heads</li> </ul> </li> <li> Spray Heads <ul class="spray"> <li>Good for use in small areas</li> <li>Higher rate of flow than rotary heads</li> <li>More susceptible to water runoff and puddling</li> <li>Spray heads are stationary with a wide range of coverage</li> <li>The water is emitted in fine droplets that, on hot days, may lower irrigation efficiency through evaporation</li> <li>Versatile and can water difficult and small areas that rotors cannot</li> </ul> </li> <li> Bubblers <ul class="bubblers"> <li>Application of water to individual plants or plant groups</li> <li>Flow rates are higher than drip systems</li> </ul> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
/* Tabs panel */ .tabbable-panel { border:1px solid #eee; padding: 10px; margin:40px auto; } /* Default mode */ .tabbable-line > .nav-tabs { border: none; margin: 0px; background: white; } .tabbable-line > .nav-tabs > li { margin-right: 2px; } .tabbable-line > .nav-tabs > li > a { border: 0; margin-right: 0; color: #737373; padding: 15px 25px; } .tabbable-line > .nav-tabs > li > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover { border-bottom: 2px solid #fbcdcf; } .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a { border: 0; background: none !important; color: #333333; } .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu { margin-top: 0px; } .tabbable-line > .nav-tabs > li.active { border-bottom: 2px solid red; position: relative; } .tabbable-line > .nav-tabs > li.active > a { border: 0; color: #333333; } .tabbable-line > .nav-tabs > li.active > a > i { color: #404040; } .tabbable-line > .tab-content { margin-top: -3px; background-color: #fff; border: 0; border-top: 1px solid #eee; padding: 15px 0; } .portlet .tabbable-line > .tab-content { padding-bottom: 0; } .tab_content { background: #eceff7; } .sprinkle_types,.sprinkle_size,.sprinkler_head_types { list-style: none; margin-top: 25px; } .sprinkle_types,.sprinkle_size,.sprinkler_head_types { font-size: 18px; } .sprinkle_size { margin-bottom: 10px; } .sprinkle_types li:before,.sprinkle_size li:before,.sprinkler_head_types li:before { content: "\f111"; font-family: 'FontAwesome'; color: #42B32F; font-size: 8px; font-weight: bold; margin-right: 10px; } .sprinkle_types_title,.sprinkle_types_para,.sprinkle_types_para_two { -webkit-padding-start: 40px; -moz-padding-start: 40px; } .sprinkle_types_title { font-size: 30px; color: #42B32F; font-weight: 400; } .sprinkle_types_para,.sprinkle_types_para_two { font-size: 16px; font-weight: 400; letter-spacing: 1px; padding-right: 40px; } .temp_ceiling,.temp_rating,.temp_classification,.temp_color,.temp_time,.spray,.rotary,.bubblers { list-style: none; font-size: 14px; margin-bottom: 25px; } .temp_ceiling li:before,.temp_classification li:before,.temp_color li:before,.temp_rating li:before,.temp_time li:before, .rotary li:before,.spray li:before,.bubblers li:before { content: "\f105"; font-family: 'FontAwesome'; color: black; font-size: 15px; font-weight: bold; margin-right: 15px; }

Related: See More


Questions / Comments: