Twitter Bootstrap is one of the most popular front end frameworks currently. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development. It uses HTML, CSS and Javascript.
History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter. It was released as an open source product in August 2011 on GitHub.
Why use Bootstrap?
- Mobile first approach: Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
- Browser Support: It is supported by all popular browsers.
- Easy to get started: With just the knowledge of HTML and, CSS anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.
- Responsive design: Bootstrap's responsive CSS adjusts to Desktops,Tablets and Mobiles.
- Provides a clean and uniform solution for building an interface for developers.
- It contains beautiful and functional built-in components which are easy to customize.
- It also provides web based customization.
- It is an open source.
Bootstrap Package Includes
- Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background etc.
- CSS: Bootstrap comes with feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
- Components: Bootstrap contains over a dozen reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more.
- JavaScript Plugins:: Bootstrap contains over a dozen custom jQuery plugins which can be included easily either all, or one by one.
- Customization: You can customize Bootstrap's components, variables, and plugins to get your very own version.
There are two versions available for download, compiled Bootstrap and Bootstrap source files.
You can download Bootstrap files from here.
Compiled download contain complied and minified version of CSS and JavaScript files as well as icons in font format for faster and easier web development, while the source download contain original source files for all CSS and JavaScript.
Compiled download contain complied and minified version of CSS and JavaScript files as well as icons in font format for faster and easier web development, while the source download contain original source files for all CSS and JavaScript.
Understanding the File Structure
You'll find the following file structure and contents.bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
Creating Your First Web Page with Bootstrap
So far you have understood the structure and the purposes of Bootstrap files, now it's time to put Bootstrap into real use. In this section, we'll create a basic Bootstrap template.
Let's walk through the following steps. At the end of the tutorial, you will have an HTML file that displays "Hello world" message in your web browser.
Let's walk through the following steps. At the end of the tutorial, you will have an HTML file that displays "Hello world" message in your web browser.
Step 1: Creating a Basic HTML file
Open up your favorite code editor and create a new HTML file. Start with an empty window and type the following code:<!DOCTYPE HTML> <html> <head> <title>Bootstrap V3 template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap-3.0.0/dist/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="bootstrap-3.0.0/assets/js/html5shiv.js"></script> <script src="bootstrap-3.0.0/assets/js/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//code.jquery.com/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script> </body> </html>
And we're all set! With those all files added, we can begin to develop any site or application with Twitter Bootstrap.
Step 2: Saving the file
Now save the file on your desktop as "bootstrap-template.html".
To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. (If it does not, open your browser and drag the file to it.)
To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. (If it does not, open your browser and drag the file to it.)
Please feel free to post any comment or question if you have.
0 comments