Omid's Blog

Bootstrap

I took the lynda course Up and Running with Bootstrap and it was nice. I liked Bootstrap.

Here’s the link to the course

 

And here are my notes:

The starting tag for responsive designs:
Jumbotron is a fantastic class!
 
   

        ””
       

We treat your pets like our own


       

At Wisdom Pet Medicine, we strive to blend the best in traditional   and alternative healing techniques to diagnose and treat companion   animals, including dogs, cats, birds, reptiles, rodents, and fish.


   
———————-
for legal shit footer
———————
———————
CSS > Responsive utilities
.hidden-xs
            ””
Hides image on mobile
————————————
Buttons
http://gik.fi/bsbutton
  this one treats button as a block. so it becomes as big as its parent element.
btn-xs
btn-lg
btn-success (green)
to change the style of buttons, use costum css
.btn-info {
    background-color: #cdae51;
    border-color: #3F2B22;
    color: #FFFFFF;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  color: #ffffff;
  background-color: #3F2B22;
  border-color: #333;
}
————————————–
make images responsive
class=”img-responsive”  > Highly recommended to each single photo.
img-circle
img-rounded
img-thumbnail (gives litl grey border to img)
——————————-
Icons
span class=”glyphicon glyphicon-pushpin”>
——————————-
thumbnails
               
      
                   
          
                    ””
                   

Ninja Peter enjoys the sunshine with Lightning the Super Dog.


               
————————————-
Tables
just give the table a class of table!
table ….
         table-stripped
                 -bordered
                 -hover
                 -condensed
—————————————-
How to change icons color:
all of them:
.glyphicon {
color:#cdae51;
}
one of them:
.gliphicon-pushpin { …
———————————————
float right for images:
.pull-right.img-responsive {

 margin: 0 0 1em 1em;  
}
———————————————–
panels
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div><br clear="none" />----------------------------<br clear="none" /><br clear="none" /><div class="thumbnail"><br clear="none" />                            <div class="caption"><br clear="none" />                                <h4><span class="glyphicon glyphicon-pushpin"></span> Vaccinations</h4><br clear="none" />                                <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p><br clear="none" />                                <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />                            </div><br clear="none" />----------------------------<br clear="none" />clearfix<br clear="none" /><br clear="none" />         <div class="clearfix visible-xs visible-lg"></div><br clear="none" /><br clear="none" />-------------------------------<br clear="none" />Breadcrumb navigation<br clear="none" />            <ol class="breadcrumb"><br clear="none" />              <li><a href="#">Home</a></li><br clear="none" />              <li><a href="#">Services</a></li><br clear="none" />              <li class="active">Vaccinations</li><br clear="none" />            </ol><br clear="none" />icons:<br clear="none" />.breadcrumb > li + li:before {<br clear="none" /><br clear="none" />  content: none;<br clear="none" />}<br clear="none" /><span class="glyphicon glyphicon-circle-arrow-right"><br clear="none" /><br clear="none" />----------------------------------<br clear="none" />    <!-- row 1: navigation --><br clear="none" />    <nav class="row"><br clear="none" /><strong>        <ul class="nav"></strong><br clear="none" />            <li><a href="#">Home</a></li><br clear="none" />            <li><a href="#">About</a></li><br clear="none" />            <li><a href="#">Services</a></li><br clear="none" />            <li><a href="#">Photo Gallery</a></li><br clear="none" />            <li><a href="#">Contact</a></li>  <br clear="none" />        </ul>  <br clear="none" />    </nav><br clear="none" /><br clear="none" />----------------------------<br clear="none" />            <ul class="nav nav-pills nav-stacked"><br clear="none" />                <li class="active"><a href="#">Vaccinations</a></li><br clear="none" />                <li><a href="#">Checkups</a></li><br clear="none" />                <li><a href="#">Senior Pets</a></li><br clear="none" />                <li><a href="#">Diet Plans</a></li><br clear="none" />            </ul> <br clear="none" /><br clear="none" />nav nav-tabs <br clear="none" />nav nav-pills<br clear="none" /><br clear="none" />----------------------------<br clear="none" /><a href="http://getbootstrap.com/components/#navbar" target="_blank" shape="rect">http://getbootstrap.com/components/#navbar</a><br clear="none" /><br clear="none" /><!-- row 1: navigation --><br clear="none" />    <div class="row"><br clear="none" />        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"><br clear="none" />            <div class="navbar-header"><br clear="none" />                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"><br clear="none" />                  <span class="sr-only">Toggle navigation</span><br clear="none" />                  <span class="icon-bar"></span><br clear="none" />                  <span class="icon-bar"></span><br clear="none" />                  <span class="icon-bar"></span><br clear="none" />                </button><br clear="none" />            </div><br clear="none" />            <div class="collapse navbar-collapse" id="collapse"><br clear="none" />                <ul class="nav navbar-nav"><br clear="none" />                    <li><a href="#">Home</a></li><br clear="none" />                    <li><a href="#">About</a></li><br clear="none" />                    <li class="active"><a href="#">Services</a></li><br clear="none" />                    <li><a href="#">Photo Gallery</a></li><br clear="none" />                    <li><a href="#">Contact</a></li>  <br clear="none" />                </ul> <br clear="none" />            </div><br clear="none" />         </nav> <br clear="none" />    </div><br clear="none" /><br clear="none" />also add this costum css: <br clear="none" />body {<br clear="none" />padding-top: 70px;<br clear="none" />}<br clear="none" /><br clear="none" />----------------------------------<br clear="none" />Dropdowns<br clear="none" /> <ul class="nav navbar-nav"><br clear="none" />                    <li><a href="#">Home</a></li><br clear="none" />                    <li class="dropdown"><a href="#" data-toggle="dropdown">About <span class="caret"></span></a><br clear="none" />                        <ul class="dropdown-menu"><br clear="none" />                            <li><a href="#">Dr. Winthrop</a></li><br clear="none" />                            <li><a href="#">Dr. Chase</a></li><br clear="none" />                            <li><a href="#">Dr. Sanders</a></li><br clear="none" />                        </ul>                    <br clear="none" />                    </li><br clear="none" />                    <li class="active"><a href="#">Services</a></li><br clear="none" />                    <li><a href="#">Photo Gallery</a></li><br clear="none" />                    <li><a href="#">Contact</a></li>  <br clear="none" />                </ul> <br clear="none" /><br clear="none" />-----------------------------------------<br clear="none" />Presenting data in tabs:<br clear="none" /><br clear="none" /> <!-- list navigation for tabs --><br clear="none" />   <br clear="none" />                <ul class="nav nav nav-tabs"><br clear="none" />                <li><a href="#vacc" data-toggle="tab"><span class="glyphicon glyphicon-pushpin"></span> Vaccinations</a></li><br clear="none" />                <li><a href="#checkups" data-toggle="tab"><span class="glyphicon glyphicon-ok"></span> Checkups</a></li><br clear="none" />                <li><a href="#senior" data-toggle="tab"><span class="glyphicon glyphicon-heart"></span> Senior Pets</a></li><br clear="none" />                <li><a href="#diet" data-toggle="tab"><span class="glyphicon glyphicon-cutlery"></span> Diet Plans</a></li><br clear="none" />             </ul><br clear="none" /><br clear="none" /><!-- text for each callout --><br clear="none" />             <!-- Vaccinations --><br clear="none" />             <div class="tab-content"><br clear="none" />             <div class="tab-pane fade active in" id="vacc"><br clear="none" />             <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p><br clear="none" />             <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />            </div><br clear="none" />             <!-- Checkups --><br clear="none" />             <div class="tap-pane fade" id="checkups"><br clear="none" />             <p>Regular checkups are a key factor in pet wellness, and can often unearth problems that could lead to health issues down the road.  </p><br clear="none" />             <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />            </div><br clear="none" />             <!-- Senior Pets --><br clear="none" />             <div class="tab-pane fade" id="senior"> <br clear="none" />                         <p>Senior pets generally require more medical attention than their younger counterparts, just as senior humans do. So when is a pet considered “senior”? </p><br clear="none" />                         <br clear="none" />             <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />            </div><br clear="none" />             <!-- Diet Plans --><br clear="none" />             <div class="tab-pane fade" id="diet"><br clear="none" />             <p>Wisdom veterinarians have all had extensive training in pet nutrition and are your best resources when considering changing your pet’s diet. </p><br clear="none" />             <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />             </div><br clear="none" />            <div><br clear="none" />        </article><br clear="none" />        <aside class="col-lg-3 col-sm-4 col-lg-pull-9 col-sm-pull-8"><br clear="none" />            <h3>About Our Services</h3><br clear="none" />            <ul class="nav nav-pills nav-stacked"><br clear="none" />                <li class="active"><a href="#">Vaccinations</a></li><br clear="none" />                <li><a href="#">Checkups</a></li><br clear="none" />                <li><a href="#">Senior Pets</a></li><br clear="none" />                <li><a href="#">Diet Plans</a></li><br clear="none" />            </ul> <br clear="none" />         </aside><br clear="none" />    <br clear="none" /><br clear="none" />        </div><!-- end row 3 --><br clear="none" />  <br clear="none" />and the javascript for pre selecting the first tab:<br clear="none" /><br clear="none" />    <script><br clear="none" />    $(function () {<br clear="none" />        $('.nav-tabs a:first').tab('show');<br clear="none" /><br clear="none" />    });<br clear="none" />    </script><br clear="none" /><br clear="none" />-----------------------------------------<br clear="none" /><a href="http://getbootstrap.com/javascript/#collapse" target="_blank" shape="rect">http://getbootstrap.com/javascript/#collapse</a><br clear="none" /><br clear="none" /><div class="panel-group" id="accordion"><br clear="none" />  <div class="panel panel-default"><br clear="none" />    <div class="panel-heading"><br clear="none" />      <h4 class="panel-title"><br clear="none" />            <a href="#vacc" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"><span class="glyphicon glyphicon-pushpin"></span> Vaccinations</a><br clear="none" />      </h4><br clear="none" />    </div><br clear="none" />        <div id="vacc" class="panel-collapse collapse in"><br clear="none" />      <div class="panel-body"><br clear="none" />        <p>Dogs and cats are susceptible to a variety of illnesses that can be completely prevented by following the appropriate vaccination schedule.</p><br clear="none" />        <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />      </div><br clear="none" />    </div><br clear="none" />  </div>     <br clear="none" />       <br clear="none" />  <div class="panel panel-default"><br clear="none" />    <div class="panel-heading"><br clear="none" />      <h4 class="panel-title"><br clear="none" />        <a href="#checkups" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"><span class="glyphicon glyphicon-ok"></span> Checkups</a><br clear="none" />      </h4><br clear="none" />    </div><br clear="none" />    <div id="checkups" class="panel-collapse collapse"><br clear="none" />      <div class="panel-body"><br clear="none" />        <p>Regular checkups are a key factor in pet wellness, and can often unearth problems that could lead to health issues down the road.</p><br clear="none" />        <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />       </div><br clear="none" />    </div><br clear="none" />  </div>     <br clear="none" />       <br clear="none" />  <div class="panel panel-default"><br clear="none" />    <div class="panel-heading"><br clear="none" />      <h4 class="panel-title"><br clear="none" />        <a href="#senior" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"> <span class="glyphicon glyphicon-heart"></span> Senior Pets</a><br clear="none" />      </h4><br clear="none" />    </div><br clear="none" />    <div id="senior" class="panel-collapse collapse"><br clear="none" />      <div class="panel-body"><br clear="none" />        <p>Senior pets generally require more medical attention than their younger counterparts, just as senior humans do. So when is a pet considered “senior”? </p><br clear="none" />        <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />      </div><br clear="none" />    </div><br clear="none" />  </div>     <br clear="none" />       <br clear="none" />  <div class="panel panel-default"><br clear="none" />    <div class="panel-heading"><br clear="none" />      <h4 class="panel-title"><br clear="none" />        <a href="#diet" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"><span class="glyphicon glyphicon-cutlery"></span> Diet Plans</a><br clear="none" />      </h4><br clear="none" />    </div><br clear="none" />    <div id="diet" class="panel-collapse collapse"><br clear="none" />      <div class="panel-body"><br clear="none" />        <p>Wisdom veterinarians have all had extensive training in pet nutrition and are your best resources when considering changing your pet’s diet.</p><br clear="none" />        <p><a href="#" class="btn btn-info">Read more >></a></p><br clear="none" />      </div><br clear="none" />    </div><br clear="none" />  </div>    <br clear="none" /></div><!-- end accordion -->                 <br clear="none" /><br clear="none" />--------------------------------------<br clear="none" />http://getbootstrap.com/javascript/#tooltips<br clear="none" /><br clear="none" />
<pre xml:space="preserve"><code> 2 &lt;a href="#" data-toggle="tooltip" title="Some tooltip text!"&gt;Hover over me&lt;/a&gt;</code></pre>

<pre xml:space="preserve"><code>&lt;br clear="none" />+ javascript initialization&lt;br clear="none" />    &lt;script&gt;&lt;br clear="none" />        $('a.btn-info').tooltip()&lt;br clear="none" />    &lt;/script&gt;&lt;br clear="none" />&lt;br clear="none" />&lt;br clear="none" />&lt;br clear="none" /></code></pre>
Posted September 15, 2014

Omid Hezaveh lives and works in Helsinki find him on twitter