Bootstrap

CSS 3/Bootstrap
Content
Overview CSS3
How to use CSS
Vendor Prefixes
CSS3 - Rounded Corners
CSS3 - Gradients
CSS3 - Shadow Effects
CSS3 - Animation
CSS3 - Font Face
What is Bootstrap?
Whats included
Bootstrap - Features
Bootstrap - Boilerplate code
Bootstrap - Grid Layout
Bootstrap Images Style
Bootstrap Glyphicons
Bootstrap CSS
Bootstrap Other Components
Bootstrap - Javascript
Presentation Title | Date
Copyright Capgemini 2012. All Rights Reserved 2

@font-face
With the help of CSS3 you can use own customize font
No longer have to use pre-selected web-safe fonts
In the new @font-face rule, you must define a name for the font and
then point to the font file.
@font-face {
font-family: myCustomFont; //Name of the font
src: url(sansation_light.woff); // You can add font-weight, font-size also
}
h1 {
font-family: myCustomFont;
}

Bootstrap = ?
Twitter Bootstrap = HTML5 Markup + CSS + jQuery
HTML: Defines the data and structure of the page using elements
CSS: Defines how the data and the elements actually look, and how they
behave when interacting with them
jQuery: Fast, small, and feature-rich JavaScript library.

Bootstrap - Whats included
This is most basic structure of Boostrap
Please note that all JavaScript plug-ins

require jQuery to be included

Features
Free front-end framework

Support IE8 and higher
Entirely css-driven project to include a JavaScript plug-ins and icons
Mobile First approach - mobile-first styles are part of the core framework
Grid scaffolding for responsive design - CSS adjusts to phones, tablets, and
desktops
JavaScript Plug-ins Tabs, Carousel, Collapse, Alert, Dropdown, Modal,
Popover, Tooltip and more
Font-icons

Boilerplate
Visit http://getbootstrap.com/getting-started/#template
Explanation:
<!DOCTYPE html> // Use of HTML5 doctype

<meta charset="utf-8"> // Use UTF-8 character set for html file
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // X-UA-Compatible meta tells IE

to use the highest mode available to that version of IE.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no>

// viewport meta gives the instructions to the browser that how to control the pages
dimensions and scaling, width=device-width set the width of the page to follow the screen width
of the device, initial-scale=1 set the initial zoom level, user-scalable=no disable zooming
capabilities on mobile devices

Grid Layout

Grid Layout cont
How to writes pages using a grid:
<! every row must have 12 colums -- >

<div class=row>
<div class=col-md-4>
<! content -- >
</div>
< ! need to complete 8 more columns -- >
</div>

Grid Layout cont
Bootstrap 3 an always-responsive grid with a maximum size
1. col-xs-[num] grid have no maximum size.

(use for the extra-small devices like mobile phones)
2. col-sm-[num] grid resize up to 750px
(use for the small devices like tablets)
3. col-md-[num] grid resize up to 970px
(use for the medium devices like desktops)
4. col-lg-[num] grid resize up to 1170px
(use for the large devices like high resolutions desktops)
Note: you should choose col-md or col-lg for desktop sites.

Grid Layout cont
You can also use two grid sizes for the different screen sizes:
<div class=row>
<div class=col-sm-8 col-md-4 col-xs-6>

<! content -- >
</div>
<div class=col-sm-4 col-md-8 col-xs-6>

<! content -- >
</div>
</div>

Bootstrap Images Style
Add classes to an <img> element to easily style images
Images can be made responsive-friendly via the addition of the

.img-responsive class.
<img src= class=img-rounded alt= />

<img src= class=img-circle alt= />
<img src= class=img-thumbnail alt= />
<img src= class=img-responsive alt=>

Glyphicons
These are SVG (Scalable Vector Graphics)
250+ icons, are available for free with bootstrap
How to use
<div>
<span class=glyphicon glyphicon-search></span>
</div>
For performance reason, all icons require baseclass ie., glyphicon and individual class ie.
glyphicon-iconname
Visit : http://getbootstrap.com/components/#glyphicons

CSS Components
Tables
Forms
Buttons
Images
Helper Classes etc.,,
Visit : http://getbootstrap.com/css

Other Components
Dropdown
Button Groups / Dropdowns
Input Groups
Navigations
Breadcrumbs
Pagination
Badges
Alerts
Thumbnails
Panels .and many more
Visit : http://getbootstrap.com/components

Javascript Components
Modals
Dropdowns
Tab
Tooltip
Popover
Alert
Collapse
Carousel
Visit : http://getbootstrap.com/javascript

Bootstrap Resources
https://www.bootply.com/
https://bootswatch.com/
https://wrapbootstrap.com/
https://startbootstrap.com/

About Capgemini
With around 120,000 people in 40 countries, Capgemini is one of
the world's foremost providers of consulting, technology and
outsourcing services. The Group reported 2011 global revenues
of EUR 9.7 billion.
Together with its clients, Capgemini creates and delivers
business and technology solutions that fit their needs and drive
the results they want. A deeply multicultural organization,
Capgemini has developed its own way of working, the
Collaborative Business ExperienceTM, and draws on Rightshore ,
its worldwide delivery model.
www.capgemini.com
The information contained in this presentation is proprietary.

2012 Capgemini. All rights reserved.
Rightshore is a trademark belonging to Capgemini.

Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap

Uploaded by

Copyright:

Available Formats

CSS 3/Bootstrap

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 2

No longer have to use pre-selected web-safe fonts

Copyright Capgemini 2012. All Rights Reserved 17

Twitter Bootstrap = HTML5 Markup + CSS + jQuery

jQuery: Fast, small, and feature-rich JavaScript library.

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 18

This is most basic structure of Boostrap

Please note that all JavaScript plug-ins

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 19

Free front-end framework

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 20

<!DOCTYPE html> // Use of HTML5 doctype

<meta http-equiv="X-UA-Compatible" content="IE=edge"> // X-UA-Compatible meta tells IE

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no>

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 21

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 22

How to writes pages using a grid:

<! every row must have 12 colums -- >

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 23

Bootstrap 3 an always-responsive grid with a maximum size

1. col-xs-[num] grid have no maximum size.

Note: you should choose col-md or col-lg for desktop sites.

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 24

<div class=col-sm-8 col-md-4 col-xs-6>

<div class=col-sm-4 col-md-8 col-xs-6>

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 25

Add classes to an <img> element to easily style images

Images can be made responsive-friendly via the addition of the

<img src= class=img-rounded alt= />

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 26

These are SVG (Scalable Vector Graphics)

250+ icons, are available for free with bootstrap

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 27

Helper Classes etc.,,

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 28

Copyright Capgemini 2012. All Rights Reserved 29

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 30

Presentation Title | Date

Copyright Capgemini 2012. All Rights Reserved 31

The information contained in this presentation is proprietary.

You might also like