Figuring Out Bootstrap, Basic Tools and Tutorials

Bootstrap – is a perfectly packed “tool chest” that allows to create websites really fast! Bootstrap’s alternatives are like snotty babies, for one simple reason – Bootstrap is densely tied-up with LESS. Those who do not understand what it is, in short: it’s a very nice and decent CSS Framework. LESS extends CSS with dynamic behavior such as: variables, mixins, operations and functions. LESS runs on both client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.

You may not know that but Less is a style preprocessor. The style sheet file will have .less extension. If you are good at writing CSS code managing Less will be a snap for you. Here you can adjust variables with operators, groups and insert parts of CSS that come relevant to other rules. The most important thing is that Less includes lots of other small things that will simplify your life. To use Less you need to create the new file with preprocessor, what you will get is a CSS file with variables right where they belong.

***

To use Bootstrap framework there is no need to master HTML, CSS and JS. If you ever dealt with any framework you’ll be a success. Generally you’ll figure things out even without reading documentation, cause all features are extremely intuitive to use!

Need a Bootstrap-based website? Why spare time creating your own? Using the tools and tuts from this blog post you can simply extend or optimize a ready-made Bootstrap theme.

Tutorials

Below we’ve summed up some really useful tutorials for mastering Bootstrap, feel free to check them out.

Bootstrap Your Application Using Twitter Bootstrap

***


Styling your apps with Twitter Bootstrap

***

Bootstrap Tutorial for Blog Design

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
// Webpage layout design.
</body>
</html>

***

Create Custom Icons for Twitter Bootstrap Easily

1
2
3
4
5
6
7
8
cus-world{ background-position: 0 0; width: 16px; height: 16px; } 
cus-world_add{ background-position: 0 -21px; width: 16px; height: 16px; } 
cus-world_delete{ background-position: 0 -42px; width: 16px; height: 16px; } 
cus-world_edit{ background-position: 0 -63px; width: 16px; height: 16px; } 
cus-world_go{ background-position: 0 -84px; width: 16px; height: 16px; } 
cus-world_link{ background-position: 0 -105px; width: 16px; height: 16px; } 
cus-wrench{ background-position: 0 -126px; width: 16px; height: 16px; } 
cus-wrench_orange{ background-position: 0 -147px; width: 16px; height: 16px; }

***

Twitter Bootstrap as UI-kit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="description" content="">
    <meta name="author" content="">
 
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 
    <!-- Le styles -->
    <link href="../bootstrap.css" rel="stylesheet">
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }.

***

Building Twitter Bootstrap

***

Why we Love Twitter’s Bootstrap

***

How to Build a Responsive WordPress Theme with Bootstrap

/* Theme Name: WP Bootstrap Theme URI: http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial Description: A demo theme built to accompany the Treehouse blog post How to Build a WordPress Theme with Bootstrap. Author: Zac Gordon Author URI: http://teamtreehouse.com/ Version: 1.0 Tags: responsive, white, bootstrap License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) License URI: http://creativecommons.org/licenses/by-sa/3.0/ This simple theme was built using the example Bootstrap theme “Basic marketing site” found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html */

***

Please stop embedding Bootstrap classes in your HTML!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!- our new, semanticized HTML -->
<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>
 
<!-- its accompanying Less stylesheet -->
.article {
  .makeRow();        // Mixin provided by Bootstrap
  .main-section {
    .makeColumn(10); // Mixin provided by Bootstrap
  }
  .aside {
    .makeColumn(2); // Mixin provided by Bootstrap
  }
}

***

In-place editing with Bootstrap Form and Popover

jQuery & Bootstrap

1
2
3
<link href="path/to/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="path/to/jquery/jquery-1.8.2.min.js"></script>
<script src="path/to/bootstrap/js/bootstrap.min.js"></script>

Bootstrap-editable

1
2
<link href="path/to/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
<script src="path/to/bootstrap-editable/js/bootstrap-editable.min.js"></script>

***

Free Snippets for Twitter Bootstrap, Examples of Websites

***

Tools

When you start developing websites with Bootstrap you need a certain “toolbox” to make sure the end result will justify the efforts spent on this framework. So, let’s talk about these tools.

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

***

Bootbox.js

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

***

Bootstrap with Apps, Themes, and Enhancements

Any platform, any language, no-install.

***

Golden Bootstrap

Golden Bootstrap is a bunch of less written css rules giving you the divine power of using golden ratio sized columns with Bootstrap.

***

Video Tutorials

These videos will help you to master Bootstrap features and to get deeper understanding provided in the beginning of the article. Feel free to check them out!

General Tutes on Bootstrap

***

Twitter Bootstrap Quickstart

***

Photo Carousel with Bootstrap

***

Flexible HTML & CSS

***

Typeahead Plugin with a remote MySQL Data Source

***

Responsive Contact Page Tutorial

***

How to Create Responsive Fluid Grid

***

How to Create Responsive Blog

***

Got something to say? Don’t be squeamish to use the comments section.

Comments are closed.