Bootstrap

INTRODUCING BOOTSTRAP

Bootstrap is an open-source framework used to develop websites based on HTML, CSS and JavaScript, Bootstrap started as a project by Mark Otto and Jacob Thornton. The intention was to encourage consistency across web pages, but grew to include tooling for mobile-first design and common features web developers want, such as validation and dialog boxes.

Less is a style sheet language that helps overcome some of the complexities and shortcomings with CSS, and is converted into CSS that browsers can use. Bootstrap uses it because the Less is converted to CSS, developers using Bootstrap do not need to be familiar with Less. However, knowing Less can make customizing sites easier.

Bootstrap offers web developers many advantages. It makes it easier to layout pages without the use of tables. It simplifies CSS, as the bulk of the functionality you look for as a developer is already built for you, and frequently only requires the addition of classes to HTML elements, and a bit of structure.

There are several tools that make development with Bootstrap even easier. Visual Studio has IntelliSense for Bootstrap, which offers autocompletion of the different classes. You can also download a set of snippets for Visual Studio, which allows you to create complex Bootstrap structures with just a couple of clicks of the mouse.

CREATING A BOOTSTRAP ENABLED PAGE

I assume that you are familiar with HTML(Hyper Text Markup Language) already and also CSS. As you can edit or create HTML with any text editor Bootstrap is also like that. But first you need to add necessary file references in HTML like CSS.

Regardless of the editor you choose, and you can use any editor you like, the steps to add Bootstrap to a page are similar.

  1. Otain the necessary files
    To add Bootstrap to a page, you’ll need to obtain the CSS, glyphicons, and JavaScript files from www.getbootstrap.com. These files are available in a single zip file, which can be extracted to the folder you’ll store your HTML pages in. By default, the folders inside of the zip file are titled css, fonts and js. While you can keep these folder names, I like to rename css to Styles, and js to Scripts.
    In addition, the Bootstrap JavaScript library requires jQuery. You can obtain jQuery from www.jquery.com. The only file you’ll need is the minified, production file. You can add this to the Styles folder.
  2. Create an HTML page and add the necessary references
    After creating an HTML page, you need to reference the following files:

    1. Inside the head section, create a reference to bootstrap.min.css. Sample HTML for creating the reference is provided below. Remember, if your CSS file is in a different folder, you will need to update the folder name Styles to the name you chose. (In addition, you could use a content delivery network (CDN)).
      <link rel='stylesheet' href='./Styles/bootstrap.min.css' />
    2. Inside the body section, typically at the bottom, you need to reference two JavaScript files, jQuery and Bootstrap. The files must be referenced in that order. As before, you will need to update the folder name Scripts to the name you chose. The name of the jQuery file may also be different as the version of jQuery changes over time. Finally, you could also use a CDN to serve the necessary files.
      /Scripts/jquery-2.1.4.min.js and /Scripts/bootstrap.min.js

When referencing script or CSS files, best practice is to use the minified versions of the files, typically identified with the letters min in the name. Minified files don’t contain line breaks, spaces, or other components that make the scripts human readable, things which browsers don’t need. By using the minified versions, you minimize the amount of data sent to the client, which will improve the rendering speed of the page.

On the next post we will continue with bootstrap classes and work with a page design practically.

Advertisements

Hello World!!!

I am wondering why each and every programming code tutorials starts with writing “Hello World”. It could be anything. Hello world is just a simple string and it used to show some thing as output.

Below i am listing the way of different programming languages to print/show the “Hello world” string…

python:

print(“Hello world!”)

C#:

console.writeline(“Hello world!”);

C/C++:

printf(“Hello world!”)

html:

<html><body>Hello World!</body></html>

php:

<?php
echo “My first PHP script!”;
?>

p