For past few weeks, I started working on Twitter Bootstrap CSS Framework. I am really impressed on this framework and i like to add some post on this. Today we are going to see what is Twitter Bootstrap and how to create a basic web page in Twitter Bootstrap 3.
Following is the output, when i run this code in Internet Explorer 9
For more detailed information, please refer Getting Started Guide.
Hope, you enjoyed this Post.
What is Twitter Bootstrap:
Twitter Bootstrap is a CSS Framework that is used to design web pages including Responsive designs web pages using HTML5, CSS and Javascript. You don't require any prior design knowledge in order to use this framework. It is one of the easiest CSS framework available in the industry today. Twitter Bootstrap has already written the CSS styles for you, has
inbuilt jQuery support and also has some popular JavaScript tools like transitions, popup etc. You just need to include the corresponding CSS classes in the HTML tags based on your requirement.
As per the official documentation, Bootstrap is a Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Installation:
The fastest way to get Bootstrap is to download the compiled and
minified versions of our CSS and JavaScript, along with the included
fonts from the download link. After downloading the zip files and extract to your prefered location. You will find three folders js, font, css. The "css" folder will contain style sheet for both non-responsive and responsive designs and also their minimized versions. The "js" folder will contain bootstrap.js and its minimized version. This "js" folder will also contains various JavaScript components that we will use
in our sites. The "font" folder will contain halflings fonts supplied by glyphicons. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost.
Important Note: you need to include jquery library file in your HTML5 Webpage in order for Bootstrap Javascript components to work.
Now, let's create an HTML5 web page by including Bootstrap CSS, JS files (Minified version).
<!DOCTYPE html> <html> <head> <title>Bootstrap HTML5 Web Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="row"> <h1>My first HTML5 Web Page using Twitter Bootstrap</h1> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://code.jquery.com/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Following is the output, when i run this code in Internet Explorer 9
For more detailed information, please refer Getting Started Guide.
Hope, you enjoyed this Post.
No comments:
Post a Comment