আগামী ৩০ নভেম্বর-২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML, CSS PHP,MySQL,JavaScript, AJAX, JQUERY, Bootstrap and Live Project কোর্সের ৮৭ তম ব্যাচ এবং ২৪ নভেম্বর-২০১৭ তারিখ থেকে শুরু হচ্ছে চার মাস ব্যাপী Zend PHP-7 Certified PHP Engineering (Advance PHP) কোর্সের ৩৫ তম ব্যাচ। প্রত্যেকটি কোর্স এর ফী নির্ধারণ করা হয়েছে ৩০,০০০/= আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722 81 75 91

Introduction to Twitter Bootstrap: A Beginners Tutorial

Twitter Bootstrap is a set of free tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.
It is the most popular front end tool for web development.

Bootstrap Logo

History of Origin
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter Inc. as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.
The first deployment under real conditions happened during Twitter’s first Hack week. Mark Otto showed some colleagues how to accelerate their projects development with the help of the toolkit. As a result, dozens of teams have moved to the framework.
In August, 2011 Twitter released Bootstrap as open-source. As of June 2013, it is the most popular GitHub development project.

Features
Bootstrap has relatively incomplete support for HTML5 and CSS 3, but it is compatible with all major browsers. Basic information of compatibility of websites or applications is available for all devices and browsers. There is a concept of partial compatibility that makes the basic information of a website available for all devices and browsers. For example, the properties introduced in CSS3 for rounded corners, gradients and shadows are used by Bootstrap despite lack of support by older web browsers. These extend the functionality of the toolkit, but are not required for its use.
Since version 2.0 it also supports responsive design. This means the graphic design of web pages adjusts dynamically, taking into account the characteristics of the device used (PC, tablet, mobile phone).

At its heart, Twitter Bootstrap is basically simple good old CSS, but it uses the LESS preprocessor to add a lot more functionality that CSS could otherwise provide. The total package is a tiny 6KB is size, and only comprises of seven files. The features are included here is the low down:

  • Layout grid – A standard 940 pixel width grid layout is provided, allowing developers to quickly get an apps page structure sorted. There is an optional variable width layout, should developers wish to use that instead.
  • Support for responsive design – Websites adjust dynamically based on device being using to browse them. The included grid layout comes in four variations for various devices.
  • Interface components – A large number of interface components are also provided. These include standard buttons, labels, preformatted warning and system messages, navigation controls, wizard controls, pagination, and breadcrumbs.
  • Javascript plugins – Again the focus here is on user interface elements. Included is code to help build tooltips, dialog boxes, as well as more traditional form and input elements (including a nice autocomplete feature).
  • Extensibility – Twitter’s Bootstrap can easily be extended or replicated to your needs. Flat UI and Boot Metro are excellent examples of CSS built on top of Twitter’s Bootstrap that makes the user experience seem totally different. Pure is an example of an alternative which uses YUI to create a standardization of HTML syntax. But, that said, you don’t necessarily need their code to build a standard HTML syntax for your development team.

Beginners Tutorial

Now it’s time to give twitter bootstrap a try. This article is a beginners tutorial for strarting twitter bootstrap. Here the latest stable version of of twitter bootstrap 2.3.2 will be used.  For starting development with twitter bootstrap toolkit we have to setup it properly. To do so the required elements are

  1. Twitter Bootstrap
  2. Code Editor or IDE
  3. A browser
  4. HTML Templete
  5. jQuery [Optional]

Lets start the set-up process of twitter bootstrap

  • At 1st go to the Bootstrap homepage: http://twitter.github.com/bootstrap/

  • Click on the large Download Bootstrap button.

  • Locate the downloaded file and unzip or extract it. You should get a folder named simply bootstrap. Inside this folder you should find the folders and files as shown in below:

    Bootstrap Folder structure

  • Now we need a basic HTML templete. Copy and paste it In your code editor

<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Bootstrap</title>
 <meta name="description" content="Twitter Bootstrap">
 <meta name="author" content="Hungry Coder">
</head>
 <body>
 <h1>Twitter Bootstrap Example</h1>
</body>
 </html>
  • Save it as test.html then double click on test.html to view in a browser. The following result will be shown in the browser

    Twitter Bootstrap Result

  • So we have our basic html templete now its time to add twitter bootstrap style sheets to the templete

  • Now Save or move the test.html  file inside your main bootstrap folder, just alongside the folders named css, img, and js.

  • You should now see something similar to the following screenshot:

    Bootstrap Example

  • Next, we need to add this line
    <link href=”css/bootstrap.min.css” rel=”stylesheet”>   inside the <head></head> tag like below

    Bootstrap Style Now inside body tag we will add the following  code

    <div class="container"></div> <!-- /container -->
    

    and put the <H1></H1> tag inside this div tag like below:

    Twitter Bootstrap Example

now the final code looks like as follows

<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Bootstrap</title>
 <meta name="description" content="Twitter Bootstrap">
 <meta name="author" content="Hungry Coder">
<!-- Bootstrap styles -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 </head>
<body>
<div>
 <h1>Twitter Bootstrap Example</h1>
 </div> <!-- /container -->
</body>
 </html>
  • Its time to save the changes you made and then double click the test.html file located inside your bootstrap folder
  • Wow! it works! the output will be like below

     Bootstrap Final Result

  • Now you can see the differences of before and after adding twitter bootstrap on the HTML templete .

In the upcoming tutorials we will dig more deeper into twitter bootstrap. Till then happy Bootstrapping!

Open source technology enthusiast & passionate programmer. PHP based Web developer. Fan boy of twitter Bootstrap, jQuery, Backbone.js, Joomla, PyroCMS & Laravel PHP framework. Also interested in Python, Django, C++, C#, Drupal, OpenCart, WordPress, Linux & Android. Love to play with new technologies.

3 comments on “Introduction to Twitter Bootstrap: A Beginners Tutorial
  1. where are the rest of the bootstrap beginner tutorial that you mention?

    “…In the upcoming tutorials we will dig more deeper into twitter bootstrap. Till then happy Bootstrapping!…”
    thank you

Leave a Reply

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