How to use Twitter Boostrap without the Overhead

I went over to the Twitter Bootstrap website today to download the latest Bootstrap version for a new project I am starting and was happy to notice that the Bootstrap files are now available as remotely included files! That means you do not have to download the files and put them on your server. They include the two main files, the CSS and the JavaScript files, for Twitter Bootstrap.

How to use remote file includes for Bootstrap

MaxCDN has provide CDN support for Bootstrap’s CSS and JavaScript files. Simply replace old links to CSS and JavaScript files with these Bootstrap CDN links:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

 

 

Twitter Bootstrap Tutorial

This is a beginner’s Bootstrap tutorial for those of you who are just starting out using Twitter Bootstrap.

What is Twitter Bootstrap?

Twitter Bootstrap, which I will refer to simply as Bootstrap from here on out, is a collection of JavaScript, CSS and images set up in an organized manner for web developers to enrich their programming interfaces with such as websites, online applications and user interfaces.

Things you  can do with Bootstrap include but are not limited to the following:

  • Forms
  • Navigation
  • Bread Crumbs
  • Tables
  • Responsive Designs
  • Icons
  • Tabs
  • Thumbnails
  • Progress Bars
  • Error Alerts
  • Modal Windows
  • Dropdowns
  • Pop Overs

Bootstrap Plugins

Bootstrap has a plethora of plugins that can be used to enhance your applications. Some of the plugins include:

  • Scrollspy – allows you to automatically update nav targets based on scroll position.
  • Carousel – creates content or image sliders.
  • Buttons – a plugin to help you easily create styled buttons.

 

Why Use Boostrap

Hopefully just from reading this far in this Bootstrap tutorial, you should already have reasons to use Bootstrap, but if you haven’t ready enough to convince you yet, read on and also look at these before and after screenshots of the exact same HTML code with and without Boostrap:

Before:

b4

After:

aft

The before image above is without the Bootstrap CSS file linked to the HTML document and the after image is with the Boostrap CSS fle linked. See the difference Bootstrap makes to the look of a form? Pretty nice and easy if you ask me since all you have to do to make it work is link to the style sheet and include the proper class names in the form elements as in the following example code which produce the above images:

<!DOCTYPE html>  
<html lang=”en”>  
<head>  
<meta charset=”utf-8″>  
<title>Twitter Bootstrap Version2.0 horizontal form layout example</title>  
<meta name=”description” content=”Twitter Bootstrap Version2.0 horizontal form layout example from w3resource.com.”>  
<link href=”bootstrap/css/bootstrap.css” rel=”stylesheet”> 
</head> 
<body> 
<form class=”form-horizontal”> 
        <fieldset> 
          <legend>Controls Bootstrap supports</legend> 
          <div class=”control-group”> 
            <label class=”control-label” for=”input01″>Text input</label> 
            <div class=”controls”> 
              <input type=”text” class=”input-xlarge” id=”input01″> 
              <p class=”help-block”>In addition to freeform text, any HTML5 text-based input appears like so.</p> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”optionsCheckbox”>Checkbox</label> 
            <div class=”controls”> 
              <label class=”checkbox”> 
                <input type=”checkbox” id=”optionsCheckbox” value=”option1″> 
                Option one is this and that—be sure to include why it’s great 
              </label> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”select01″>Select list</label> 
            <div class=”controls”> 
              <select id=”select01″> 
                <option>something</option> 
                <option>2</option> 
                <option>3</option> 
                <option>4</option> 
                <option>5</option> 
              </select> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”multiSelect”>Multicon-select</label> 
            <div class=”controls”> 
              <select multiple=”multiple” id=”multiSelect”> 
                <option>1</option> 
                <option>2</option> 
                <option>3</option> 
                <option>4</option> 
                <option>5</option> 
              </select> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”fileInput”>File input</label> 
            <div class=”controls”> 
              <input class=”input-file” id=”fileInput” type=”file”> 
            </div> 
          </div> 
          <div class=”control-group”> 
            <label class=”control-label” for=”textarea”>Textarea</label> 
            <div class=”controls”> 
              <textarea class=”input-xlarge” id=”textarea” rows=”3″></textarea> 
            </div> 
          </div> 
          <div class=”form-actions”> 
            <button type=”submit” class=”btn btn-primary”>Save changes</button> 
            <button class=”btn”>Cancel</button> 
          </div> 
        </fieldset> 
</form> 
</body> 
</html> 

 

 

  • <!DOCTYPE html>   
  • <html lang=“en”>   
  • <head>   
  • <meta charset=“utf-8”>   
  • <title>Twitter Bootstrap Version2.0 horizontal form layout example</title>   
  • <meta name=“description” content=“Twitter Bootstrap Version2.0 horizontal form layout example from w3resource.com.”>   
  • <link href=“twitter-bootstrap-v2/docs/assets/css/bootstrap.css” rel=“stylesheet”>  
  • </head>  
  • <body>  
  • <form class=“form-horizontal”>  
  •         <fieldset>  
  •           <legend>Controls Bootstrap supports</legend>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“input01”>Text input</label>  
  •             <div class=“controls”>  
  •               <input type=“text” class=“input-xlarge” id=“input01”>  
  •               <p class=“help-block”>In addition to freeform text, any HTML5 text-based input appears like so.</p>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“optionsCheckbox”>Checkbox</label>  
  •             <div class=“controls”>  
  •               <label class=“checkbox”>  
  •                 <input type=“checkbox” id=“optionsCheckbox” value=“option1”>  
  •                 Option one is this and that—be sure to include why it’s great  
  •               </label>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“select01”>Select list</label>  
  •             <div class=“controls”>  
  •               <select id=“select01”>  
  •                 <option>something</option>  
  •                 <option>2</option>  
  •                 <option>3</option>  
  •                 <option>4</option>  
  •                 <option>5</option>  
  •               </select>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“multiSelect”>Multicon-select</label>  
  •             <div class=“controls”>  
  •               <select multiple=“multiple” id=“multiSelect”>  
  •                 <option>1</option>  
  •                 <option>2</option>  
  •                 <option>3</option>  
  •                 <option>4</option>  
  •                 <option>5</option>  
  •               </select>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“fileInput”>File input</label>  
  •             <div class=“controls”>  
  •               <input class=“input-file” id=“fileInput” type=“file”>  
  •             </div>  
  •           </div>  
  •           <div class=“control-group”>  
  •             <label class=“control-label” for=“textarea”>Textarea</label>  
  •             <div class=“controls”>  
  •               <textarea class=“input-xlarge” id=“textarea” rows=“3”></textarea>  
  •             </div>  
  •           </div>  
  •           <div class=“form-actions”>  
  •             <button type=“submit” class=“btn btn-primary”>Save changes</button>  
  •             <button class=“btn”>Cancel</button>  
  •           </div>  
  •         </fieldset>  
  • </form>  
  • </body>  
  • </html>  

– See more at: http://www.w3resource.com/twitter-bootstrap/forms-tutorial.php#sthash.kgyHadcw.dpuf