Kevin Lyn. - Bootstrap 3.3: A Guide Book for Beginners to Learn Web Framework Fast!

Bootstrap 3.3
A Guide Book for Beginners to Learn Web Framework Fast!

Kevin Lyn.

Copyright 2015 by Kevin Lyn.

All rights reserved. No part of this publication may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the author, except in the case of brief quotations embodied in critical reviews and certain other noncommercial uses permitted by copyright law.

Disclaimer

While all attempts have been made to verify the information provided in this book, the author doesnt assume any responsibility for errors, omissions, or contrary interpretations of the subject matter contained within. The information provided in this book is for educational and entertainment purposes only. The reader is responsible for his or her own actions and the author does not accept any responsibilities for any liabilities or damages, real or perceived, resulting from the use of this information.

Table of Contents

This book is all about bootstrap. After reading it, you will know how to use bootstrap for development. You will also know the constituent components of bootstrap. The two types of bootstrap, that is, the compiled and the source code files are explored in detail with emphasis on the difference between the two types.

Here you will learn how to predict the appearance of a web page on different devices and screens depending on the kind of layout you have used. Tables, which are a common feature in web development have been discussed. Adding hover, borders, adding background features and as well as differentiating the rows of a table have been discussed.

The files which are usually found in the bootstrap folder are also explained in terms of what they do. You will also be guided on how to include these bootstrap files in your project and even in the header of your code. The different types of layouts which are available in bootstrap are explored in detail and their effect on devices with different screen sizes.

You will also know how to make responsive tables with bootstrap so that they can appear well on different devices regardless of the screen size. Lists are also explored in this book. The different types of buttons are also explored, and as well as images and forms in bootstrap.

Modals, accordions and carousel, which are advanced features in bootstrap have also been discussed in this book. There are code examples as well as pictures in this book for ease of understanding. The following topics have been discussed:

• Definition
• Getting started
• Grid system in Bootstrap
• Fixed Layout
• Tables
• Lists
• Forms
• Styling Images
• Buttons
• Modals
• Accordion
• Carousel

With bootstrap, you can create web pages that will scroll well on any device. Something like a table, which might seem difficult to fit on a cell phone can be made to do this using bootstrap. This explains how powerful bootstrap is. This can also be done without too much coding and in a short period of time.

You might have heard of responsive web design. If not, dont worry for youll understand what it is after reading this book. You might have realized that some websites are not accessible via cell phones and tablets, but one can only access them via computers. Web pages also do not appear the same on devices with different sizes in terms of the layout and how they scroll.

You know about validation. Instead of using Jquery, with which much coding will be needed, bootstrap can be used for this purpose using less than 5 words. It has numerous controls which are available in HTML such as buttons and text fields. With bootstrap, these can be made beautiful. Image and text sliders can also be made using bootstrap with much less effort in terms of coding.

Ever heard of responsive web design? Bootstrap is a collection of tools which helps developers in creating responsive websites. Most of todays websites are not responsive, meaning that you can only access them via computers. Devices with small screen such as mobile phones and tablets cannot access these websites.

This is why Jacob Thornton and Mark Otto developed bootstrap. With this tool, developers create websites with amazing features and these can be accessed via devices of any screen size. Responsiveness is one of the emerging issues in web development, and this is the reason why you should consider learning bootstrap.

It is compatible with nearly all the browsers currently in use. If you have never used this tool, you will be amazed how it senses the size of the screen of the device and then it adjusts the pages of the web page dynamically. Its documentation has been translated into other languages such as Russian, Spanish and Chinese.

If you have not downloaded it, it is available for free download on Github, so you can get it from there. The process of creating a responsive layout with bootstrap is much easy such that even beginners will find it easy. The tool is based on HTML and CSS.

Some of the interface components that can be created with bootstrap include carousel, buttons, modals, accordion, forms, tables, dropdowns, alerts, navigation and tabs. It also offers Javascript extensions which are optional.

Why you should use Bootstrap

1. Responsive design- with bootstrap, web pages appear well on devices with different screen sizes and resolution. You will not observe any change in markup.

1. Easy to learn and use- provided you know the basics of HTML and CSS, you dont need to learn bootstrap. You only need to get started.

1. Saves time- instead of defining your own classes, you just use the predefined bootstrap classes and templates and then use that doing in doing other development work.

1. Compatibility with Browsers- bootstrap is compatible with most of the current browsers such as Google Chrome, Mozilla Firefox, Safari, Opera and Internet Explorer.

1. Consistency in Design- through a central library, all of the components of this tool share the same design styles and templates which have led to consistency.

1. Open source- bootstrap is available for free download on GitHub.

It is worth to note that some properties such as shadows, rounded corners and gradients which are supported by CSS3 are also supported in Bootstrap. However, when you use older versions of browsers such as the Internet explorer and you have developed these features with bootstrap, they will not be supported.

Before you can begin to use bootstrap, it is good to make sure that you understand the basics of both HTML and CSS as these are the building blocks of bootstrap. Also, ensure that your computer has an editor of choice. I dont prefer the basic ones such as notepad. You can download and install Dreamweaver or Notepad++.

Downloading Bootstrap Files

When downloading bootstrap files, you will be availed with two versions, the Bootstrap source files and the Compiled Bootstrap files. The source version always contains original source files for all Javascript and CSS and a local copy of the documents.

The compiled version contains the minified and compiled versions of Javascript and CSS files. For easy and faster web development, it has icons in font format. In this book, we are going to use the compiled version of bootstrap. It is easy for understanding and saving of time since as the programmer, you will not be needed to include separate files for each functionality.

It also has less HTTP request, hence you will save on bandwidth when moving the site to a production environment. After download the bootstrap file, it will come a zipped format. Unzip it and you will find the following files: