Twitter bootstrap (css, components and javascript)
798 views
17 slides
Feb 25, 2016
Slide 1 of 17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
About This Presentation
Details about Twitter Bootstrap Components, CSS etc
Slide Content
Twitter Bootstrap
(Css, Components, JavaScript)
Presented By: Ali Tanwir
(Css, Components, JavaScript)
Presented By: Ali Tanwir
Agenda
Overview
Advantages of Bootstrap
How to get Bootstrap
Create first web page
Understanding meta tag
Containers
Grid System
Components
Boostraps JavaScript
Overview
Advantages of Bootstrap
How to get Bootstrap
Create first web page
Understanding meta tag
Containers
Grid System
Components
Boostraps JavaScript
Overview
Bootstrap was developed by Mark Otto and
Jacob Thornton at Twitter, and released as
an open source product in August 2011 on
GitHub (No. 1 project on GitHub on June
‘14).
It is a free front-end framework for faster
and easier web development.
It is a set of predefined CSS classes and a
JQuery functions.
Bootstrap was developed by Mark Otto and
Jacob Thornton at Twitter, and released as
an open source product in August 2011 on
GitHub (No. 1 project on GitHub on June
‘14).
It is a free front-end framework for faster
and easier web development.
It is a set of predefined CSS classes and a
JQuery functions.
Advantages of Bootstrap
Easy to use
Responsive features
Consistent Design
Mobile-first approach
Browser compatibility
Easy to use
Responsive features
Consistent Design
Mobile-first approach
Browser compatibility
How to get Bootstrap
Download Bootstrap from getbootstrap.com
Add Twitter Bootstrap in
BuildConfig.groovy file under plugins,
// plugins needed at runtime but not for
compilation
runtime ':twitter-bootstrap:3.3.4'
Include Bootstrap from a CDN (Content
Delivery Network)
Latest compiled and minified CSS
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/boot
strap/3.3.5/css/bootstrap.min.css">
JQuery library
<script
src="https://ajax.googleapis.com/ajax/libs/jq
uery/1.11.3/jquery.min.js"></script>
Latest compiled javascript
<script
src="http://maxcdn.bootstrapcdn.com/boots
trap/3.3.5/js/bootstrap.min.js"></script>
Download Bootstrap from getbootstrap.com
Add Twitter Bootstrap in
BuildConfig.groovy file under plugins,
// plugins needed at runtime but not for
compilation
runtime ':twitter-bootstrap:3.3.4'
Include Bootstrap from a CDN (Content
Delivery Network)
Latest compiled and minified CSS
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/boot
strap/3.3.5/css/bootstrap.min.css">
JQuery library
<script
src="https://ajax.googleapis.com/ajax/libs/jq
uery/1.11.3/jquery.min.js"></script>
Latest compiled javascript
<script
src="http://maxcdn.bootstrapcdn.com/boots
trap/3.3.5/js/bootstrap.min.js"></script>
Create First Web Page
Add the HTML5 doctype
-Bootstrap uses HTML elements and CSS
properties that require the HTML5 doctype.
-Always include the HTML5 doctype at the
beginning of the page, along with the lang
attribute and the correct character set.
Add viewport <meta> tag inside the <head>
element
-To ensure proper rendering and touch zooming,
add viewport <meta> tag inside the <head>
element:
<meta name="viewport" content="width=device-
width, initial-scale=1">
Add Container
Add the HTML5 doctype
-Bootstrap uses HTML elements and CSS
properties that require the HTML5 doctype.
-Always include the HTML5 doctype at the
beginning of the page, along with the lang
attribute and the correct character set.
Add viewport <meta> tag inside the <head>
element
-To ensure proper rendering and touch zooming,
add viewport <meta> tag inside the <head>
element:
<meta name="viewport" content="width=device-
width, initial-scale=1">
Add Container
Understanding <meta> tag
<meta name="viewport"
content="width=device-width, initial-
scale=1">
The width=device-width part sets the width
of the page to follow the screen-width of the
device (which will vary depending on the
device).
The initial-scale=1 part sets the initial zoom
level when the page is first loaded by the
browser. You can disable zooming
capabilities on mobile devices by adding
user-scalable=no to the viewport meta tag.
This disables zooming, meaning users are
only able to scroll, and results in your site
feeling a bit more like a native application.
<meta name="viewport"
content="width=device-width, initial-
scale=1, maximum-scale=1, user-
scalable=no">
<meta name="viewport"
content="width=device-width, initial-
scale=1">
The width=device-width part sets the width
of the page to follow the screen-width of the
device (which will vary depending on the
device).
The initial-scale=1 part sets the initial zoom
level when the page is first loaded by the
browser. You can disable zooming
capabilities on mobile devices by adding
user-scalable=no to the viewport meta tag.
This disables zooming, meaning users are
only able to scroll, and results in your site
feeling a bit more like a native application.
<meta name="viewport"
content="width=device-width, initial-
scale=1, maximum-scale=1, user-
scalable=no">
Containers
Creating Fixed Layout
The process of creating the fixed yet
responsive layout starts with the .container
class. After that create rows with the .row
class to wrap the horizontal groups of
columns. Rows must be placed within a
container for proper alignment and padding.
<div class="container">
<div class="row">
...
</div>
</div>
Creating Fixed Layout
The process of creating the fixed yet
responsive layout starts with the .container
class. After that create rows with the .row
class to wrap the horizontal groups of
columns. Rows must be placed within a
container for proper alignment and padding.
<div class="container">
<div class="row">
...
</div>
</div>
Creating Fluid Layout
The class .container-fluid simply applies the
horizontal margin with the value auto and
left and right padding of 15px on element to
offset the left and right margin of -15px (i.e.
margin: 0 -15px;) used on the .row.
It create the fluid layouts in order to utilize the
100% width of the viewport.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Creating Fluid Layout
The class .container-fluid simply applies the
horizontal margin with the value auto and
left and right padding of 15px on element to
offset the left and right margin of -15px (i.e.
margin: 0 -15px;) used on the .row.
It create the fluid layouts in order to utilize the
100% width of the viewport.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Grid System
Bootstrap includes a responsive, mobile first
fluid grid system that appropriately scales
up to 12 columns as the device or
viewport size increases.
Grid systems are used for creating page
layouts through a series of rows and
columns that house your content. Here's
how the Bootstrap grid system works:
Rows must be placed within a .container
(fixed-width) or .container-fluid (full-
width) for proper alignment and padding.
Use rows to create horizontal groups of
columns.
Content should be placed within columns,
and only columns may be immediate
children of rows.
Predefined grid classes like .row and .col-
xs-4 are available for quickly making grid
layouts. Less mixins can also be used for
more semantic layouts.
Columns create gutters (gaps between
column content) via padding. That padding
is offset in rows for the first and last column
via negative margin on .rows.
The negative margin is why the examples
below are outdented. It's so that content
within grid columns is lined up with non-grid
content.
*click on the Gid System heading to open a reference webpage.
Bootstrap includes a responsive, mobile first
fluid grid system that appropriately scales
up to 12 columns as the device or
viewport size increases.
Grid systems are used for creating page
layouts through a series of rows and
columns that house your content. Here's
how the Bootstrap grid system works:
Rows must be placed within a .container
(fixed-width) or .container-fluid (full-
width) for proper alignment and padding.
Use rows to create horizontal groups of
columns.
Content should be placed within columns,
and only columns may be immediate
children of rows.
Predefined grid classes like .row and .col-
xs-4 are available for quickly making grid
layouts. Less mixins can also be used for
more semantic layouts.
Columns create gutters (gaps between
column content) via padding. That padding
is offset in rows for the first and last column
via negative margin on .rows.
The negative margin is why the examples
below are outdented. It's so that content
within grid columns is lined up with non-grid
content.
*click on the Gid System heading to open a reference webpage.
Grid columns are created by specifying the
number of 12 available columns you wish
to span. For example, 3 equal columns
would use three .col-xs-4.
If more than 12 columns are placed within a
single row, each group of extra columns
will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen
widths greater than or equal to the
breakpoint sizes, and override grid classes
targeted at smaller devices. Therefore, e.g.
applying any .col-md-* class to an element
will not only affect its styling on medium
devices but also on large devices if a .col-
lg-* class is not present.
Grid columns are created by specifying the
number of 12 available columns you wish
to span. For example, 3 equal columns
would use three .col-xs-4.
If more than 12 columns are placed within a
single row, each group of extra columns
will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen
widths greater than or equal to the
breakpoint sizes, and override grid classes
targeted at smaller devices. Therefore, e.g.
applying any .col-md-* class to an element
will not only affect its styling on medium
devices but also on large devices if a .col-
lg-* class is not present.
Grid System Table
*click on the Gid System Table image to open a reference webpage.
*click on the Gid System Table image to open a reference webpage.
Components
Over a dozen reusable components built to
provide iconography, dropdowns, input
groups, navigation, alerts, and much more.
-Dropdowns
-Navs
-Navbar
-Breadcrumbs
-Pagination
*click on the Components & types of components to open a reference webpage.
Over a dozen reusable components built to
provide iconography, dropdowns, input
groups, navigation, alerts, and much more.
-Dropdowns
-Navs
-Navbar
-Breadcrumbs
-Pagination
*click on the Components & types of components to open a reference webpage.
Bootstrap JavaScript
Bring Bootstrap's components to life with
over a dozen custom jQuery plugins. Easily
include them all, or one by one.
Plugins can be included individually (using
Bootstrap's individual *.js files), or all at
once (using bootstrap.js or the minified
bootstrap.min.js).
*click on the Bootstrap Javascript heading to open a reference webpage.
Bring Bootstrap's components to life with
over a dozen custom jQuery plugins. Easily
include them all, or one by one.
Plugins can be included individually (using
Bootstrap's individual *.js files), or all at
once (using bootstrap.js or the minified
bootstrap.min.js).
*click on the Bootstrap Javascript heading to open a reference webpage.
List of Javascripts & Demo
Transitions (transition.js)
Modals (modal.js)
Dropdowns (dropdown.js)
ScrollSpy (scrollspy.js)
Togglable tabs (tab.js)
Tooltips (tooltip.js)
Popovers (popover.js)
Alert messages (alert.js)
Buttons (button.js)
Collapse (collapse.js)
Carousel (carousel.js)
Affix (affix.js)
*click on the names of the list of javascripts to open a reference webpage.
Transitions (transition.js)
Modals (modal.js)
Dropdowns (dropdown.js)
ScrollSpy (scrollspy.js)
Togglable tabs (tab.js)
Tooltips (tooltip.js)
Popovers (popover.js)
Alert messages (alert.js)
Buttons (button.js)
Collapse (collapse.js)
Carousel (carousel.js)
Affix (affix.js)
*click on the names of the list of javascripts to open a reference webpage.
References
CSS reference from -
http://getbootstrap.com/css/
Components reference from -
http://getbootstrap.com/components/
Javascripts reference from -
http://getbootstrap.com/javascript/
Containers reference from -
-http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fixed-layout.php
-http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fluid-layout.php
For further modifications into Boostrap
Components can refer -
https://react-bootstrap.github.io/components.html
CSS reference from -
http://getbootstrap.com/css/
Components reference from -
http://getbootstrap.com/components/
Javascripts reference from -
http://getbootstrap.com/javascript/
Containers reference from -
-http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fixed-layout.php
-http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-fluid-layout.php
For further modifications into Boostrap
Components can refer -
https://react-bootstrap.github.io/components.html
Thank
You !
You !
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 798
- Slides 17
- Age 3571 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
33 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
36 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
33 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views