Getting started with BOOTSTRAP

Getting Started with Bootstrap

·         Using Bootstrap can create a web page easilly.

·         Bootstrap is a free front –end framework for faster & easier web development

·         It is the most popular HTML, CSS and JavaScript framework for developing responsive , mobile-first web sites.

·         Responsive development means creating web sites which automatically adjust themselves ,depends on the device resolution.

Why use Bootstrap

• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core framework
• Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

Bootstrap CDN

MaxCDN provide CDN support for Bootstrap's CSS and JavaScript.

(CDN-Content Delivery Network)

One advantage of using the Bootstrap CDN

If a user already have downloaded Bootstrap from MaxCDN when visiting another site.

 As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.

 Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

MaxCDN

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

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Downloading the Bootstrap files

Two versions available for download,

·         Precompiled Bootstrap    - contain compiled and minified version of CSS and JavaScript files

·         Bootstrap Source Files- contain original source files for all CSS and JavaScript, along with a local copy of the docs.

 

Precompiled Bootstrap

bootstrap/ 

├── css/ 

│ ├── bootstrap.css 

│ ├── bootstrap.css.map 

│ ├── bootstrap.min.css 

│ ├── bootstrap.min.css.map 

│ ├── bootstrap-theme.css 

│ ├── bootstrap-theme.css.map 

│ ├── bootstrap-theme.min.css 

│ └── bootstrap-theme.min.css.map 

├── js/ 

│ ├── bootstrap.js 

│ └── bootstrap.min.js 

└── fonts/ 

├── glyphicons-halflings-regular.eot 

├── glyphicons-halflings-regular.svg 

├── glyphicons-halflings-regular.ttf 

├── glyphicons-halflings-regular.woff 

└── glyphicons-halflings-regular.woff2

Bootsrap folder architecture

In here compiled CSS and JS (bootstrap.*),

as well as compiled and minified CSS and JS (bootstrap.min.*),

 CSS source maps (bootstrap.*.map) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.

Bootstrap source code

The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation.

bootstrap/ 

├── less/ 

├── js/ 

├── fonts/ 

├── dist/

│ ├── css/ 

│ ├── js/ 

│ └── fonts/ 

└── docs/ 

    └── examples/

The less/, js/, and fonts/ are the source code for CSS, JS, and icon fonts (respectively).

The dist/ folder includes everything listed in the precompiled download section above.

The docs/ folder includes the source code for our documentation, and examples/ of Bootstrap usage.

Bootstrap Grid System

The Bootstrap grid system provides the quick and easy way to create the layouts of the web pages.

Ex : Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to   12 columns as the device or viewport size increases.

Bootstrap 3 includes predefined grid classes for quickly making grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc.

As ex:

.col-xs-* class to create grid columns for extra small devices like cell phones

.col-sm-* class for small screen devices like tablets

.col-md-* class for medium size devices like desktops

.col-lg-* for large desktop screens

key features of the new grid system

Features Bootstrap 3 Grid System	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Max container width	None (auto)	750px	970px	1170px
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Max column width	Auto	~62px	~81px	~97px
Gutter width	15px on each side of a column (i.e. 30px)

Supported browsers

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	Supported	Supported	N/A	Not Supported	N/A
iOS	Supported	N/A		Not Supported	Supported
Mac OS X	Supported	Supported		Supported	Supported
Windows	Supported	Supported	Supported	Supported	Not Supported

Follow....

 http://getbootstrap.com

http://www.w3schools.com

http://www.tutorialrepublic.com

R. A.J.R.RUPASINGHE

CIS 2012/2013

jayanirupasinghe123@gmail.com

Continue Reading