Understanding bootstrap

Head

For mobile friendly with zoom

<head>
..
<meta name="viewport" content="width=device-width, initial-scale=1">
..
</head>

Disable zoom. Looks more like native app

<head>
..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

 

 

Container

Responsive fixed width container

<div class="container"> 
...
</div>

Full width container, spanning the entire width of your viewport

<div class="container-fluid"> 
...
</div>

 

Scroll spy

<body data-spy="scroll" data-target="#my-navbar">

 

Smooth Scroll (put script after jquery)

Example:

<li><a class=”smoothScroll” href=”#feedback”>Feedback</a></li>
<li><a class=”smoothScroll” href=”#kimaction“>Call to Action</a></li>

<div id=”kimaction“>Call to Action landed</div>

<script>
$(function() {
// Only allow class smoothScroll to prevent problems with carousel, scrollspy, etc
$('.smoothScroll').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 750); // Speed of the scroll in milliseconds
return false;
}
}
});
});
</script>

Center content blocks

Bootstrap method

<div class="center-block" style="border: 1px solid silver;">
<p style="text-align: center;">Center block</p>
</div>

Manually

<div style="border: 1px solid silver; display: block; margin-left: auto; margin-right: auto;">
<p style="text-align: center;">Center block</p>
</div>

 

Panel

<div class="panel panel-primary">
   <div class="panel-heading">
            <h3 class="panel-title">title goes here</h3>
   </div>
   <div class="panel-body">
            <p>body goes here</P>
            <p>body goes here</P>
            <p>body goes here</P>
   </div>
</div>

 

Label

Override the label font

label { 
font-weight: normal !important;
}

 

 

Buttons

<a href="#" class="btn btn-lg btn-danger">Delete <span class="glyphicon glyphicon-trash"></span></a>

More buttons at http://bootsnipp.com/buttons#

 

 

Drop shadow

<div style="background: rgba(255, 255, 255, 0.8); box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 10px; ">

 

Clearfix (clear: both;)

<div class="clearfix">...</div>

 

Nav bar always on top

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<a href="#" class="btn btn-info navbar-btn navbar-right">Download</a>
<ul class="nav navbar-nav">
<li><a href="#">Feedback</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
</div>
</nav>

 

Scroll effect for all anchor links

<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
</script>

Bootstrap for Sass

Edit composer.json to use Sass on Laravel

"require-dev": { 
"panique/laravel-sass": "dev-master"
}

Note the require-dev, not a normal require

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top