10
09/2014
bootstrap tips
hover open dropdown menu
@media only screen and (min-width : 768px) {
/* Make Navigation Toggle on Desktop Hover */
.dropdown:hover .dropdown-menu {
display: block;
}
}
full width
.container is NOT realy full width!And .rows has margin:0 -15px!
media query break points
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
Column Collapse Order
<!--
Desktop:
[1 2 3] [1 2 3 4 5 6 7 8 9]
Mobile:
[1 2 3]
[1 2 3 4 5 6 7 8 9]
-->
<div class="row">
<div class="col-md-9 col-md-push-3">1 2 3 4 5 6 7 8 9 </div>
<div class="col-md-3 col-md-pull-9">1 2 3 </div>
</div>
<!--
Desktop:
[ 2nd col ] [ 1st col ]
Mobile:
[ 2nd col ]
[ 1st col ]
-->
<div class="row">
<div class="col-md-6 col-md-push-6">1st col</div>
<div class="col-md-6 col-md-pull-6">2nd col</div>
</div>
.lead class
Bigger font size
Blockquote Reverse
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
“Flatten” a List
li display:inline-block and list-style:none
<ul class="list-inline"> <li>One</li> <li>Two</li> <li>Three</li> </ul>
text only for screen reader( src-only == html source only )
<label for="id-of-input" class="sr-only">My Input</label> <input type="text" name="myinput" placeholder="My Input" id="id-of-input">
img responsive
img-rounded, img-circle,img-thumbnail and img-responsive