part3-bootstrap

Transcript part3-bootstrap

Bootstrap
ITIS313 - Part 3
Resources:
1. Official Bootstrap Website (http://getbootstrap.com/)
2. W3 Schools (http://www.w3schools.com/bootstrap/default.asp )
3. Tutorial Point (http://www.tutorialspoint.com/bootstrap/)
4. Tutorial Republic (http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/ )
5.
Randy
Connolly
Connolly
andand
Hoar
Ricardo
(2015) Hoar
Fundamentals of WebFundamentals
Developmentof– Web
Sections
Development
5.6 & 5.7
Textbook to be published by Pearson Ed in early 2014
1
http://www.funwebdev.com
Mobile vs. Desktop Views
More websites were viewed on mobile devices and tablets
than desktops for the first time ever in October 2016
http://qz.com/825014/mobile-website-views-surpassed-desktop-views-for-the-first-time-ever-in-october-2016/
2
What is Bootstrap?
• A CSS framework is a pre-created set of CSS classes and
other software tools that make it easier to use and work
with CSS.
• Bootstrap is a powerful front-end framework for faster and
easier web development.
• Originally developed by Twitter, now an independent opensource framework.
• Current version is Bootstrap 3, and 4.0 is in alpha stage
• It includes HTML, CSS and JavaScript based design
templates for common user interface components like
Typography, Forms Controls, Tables, Navigations,
Dropdowns, Alerts, Tabs, Carousel and many other
3
Advantages of Bootstrap
1. Save lots of time: using the Bootstrap predefined design
templates and classes and concentrate on other
development work.
2. Responsive features: web pages to appear more
appropriately on different devices and screen resolutions
without any change in markup.
3. Consistent design: the designs and layouts of your web
pages are consistent throughout your development.
4. Easy to use: Bootstrap is very easy to use. Anybody with
the basic working knowledge of HTML and CSS can start
development with Bootstrap.
5. Compatible with modern browsers
6. Open Source: And the best part is, it is completely free to
download and use.
4
Responsive Design
• Bootstrap also gives you
ability to create responsive
layout with much less efforts.
• Responsive web design
changes the page layout (and
some content) for different
windows and screen sizes,
such as large screens,
mobiles, tablets, etc.
5
What is The Viewport?
• The viewport is the user's visible area of a web page.
• The viewport varies with the device, and will be smaller on a
mobile phone than on a computer screen.
• Before tablets and mobile phones, web pages were designed
only for computer screens, and it was common for web pages to
have a static design and a fixed size.
• Then, when we started surfing the internet using tablets and
mobile phones, fixed size web pages were too large to fit the
viewport.
• To fix this, browsers on those devices scaled down the entire web
page to fit the screen.
• This was not perfect!! But a quick fix.
6
Viewport
Without the viewport meta tag
With the viewport meta tag
7
Setting The Viewport
• HTML5 introduced a method to let web designers take
control over the viewport, through the <meta> tag.
• You should include the following <meta> viewport
element in all your web pages:
<meta name="viewport" content="width=device-width, initialscale=1.0">
• A <meta> viewport element gives the browser
instructions on how to control the page's dimensions
and scaling.
• The width=device-width part sets the width of the page
to follow the screen-width of the device.
• The initial-scale=1.0 part sets the initial zoom level when
the page is first loaded by the browser.
8
Bootstrap Essentials
1. Add the HTML5 doctype: Bootstrap uses HTML elements
and CSS properties that require the HTML5 doctype and
the needed elements
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
2. Bootstrap 3 is mobile-first: Bootstrap 3 is designed to be
responsive to mobile devices. Mobile-first styles are part
of the core framework.
<meta name="viewport" content="width=device-width, initialscale=1.0">
9
Including Bootstrap
• There are different ways to include Bootstrap framework
files into your pages:
1. Download and host the Bootstrap files.
2. Include Bootstrap from a CDN (Content Delivery
Network) host. This is faster and easier option for our
course.
• To apply the second way, include in the following code in
your header:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
10
Bootstrap Features
• Bootstrap has loads of predefined classes and
components, these include:
• Responsive Grid System
• Navigation
• Glyphicons
• Form controls
• Themes customisation
• and many more…
• We are only going to cover some of these.
11
Containers
• Bootstrap also requires a containing element to wrap
site contents.
• There are two container classes to choose from:
1. The container class provides a responsive fixed
width container.
2. The container-fluid class provides a full width
container, spanning the entire width of the viewport.
Note: Containers are not nestable (you cannot put a
container inside another container).
12
Container and Container-fluid
13
Grid System
• The Bootstrap Grid System visualizes the webpage into a
series of rows and columns, i.e. a grid.
• The gird allows up to 12 columns across the page.
• If you do not want to use all 12 column individually, you
can group the columns together to create wider columns.
• For example: a 6-6 split, 4-4-4, 9-3, or 3-6-3….
14
Applying the Columns
• Single Rows use the class row.
• All columns inside a row are use the class form: col-xx-y.
Where xx is the intended size (xs, sm, md, lg) and y is a
column span size (from 1 to 12).
<div class="container">

<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>

<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
15
Grid System
XS, SM, MD and LG
• The Bootstrap grid system works with four screen
size classes:
1.
2.
3.
4.
xs: for phones
sm: for tablets
md: for desktops
lg: for larger desktops
xs
sm
md
lg
Column Size
Extra small devices
Phones (<768px)
Small devices
Tablets (>=768px)
Medium devices
Desktops (>=992px)
Large devices
Desktops (>=1200px)
Grid behaviour
Horizontal at all times
Collapsed to start,
horizontal above
breakpoints
Collapsed to start,
horizontal above
breakpoints
Collapsed to start,
horizontal above
breakpoints
Container width
None (auto)
750px
970px
1170px
Class prefix
.col-xs-
.col-sm-
.col-md-
.col-lg-
Column width
Auto
~62px
~81px
~97px
Gutter width
30px (15px on each side of a column)
16
Grid System - lg
Large
17
Grid System - md
Medium
18
Grid System – sm & xs
Small
X-Small
19
Combining Grid Classes
• You can combine these classes in one class, for
example on a desktop screen you can have a 9/3 split
and small screens, and a 6/6 split for medium screens.
• Each class scales up, so if you wish to set the same
widths for xs and sm, you only need to specify xs.
<div class="container">
<div class="row">
<div class="col-xs-6
<div class="col-xs-6
</div>
<div class="row">
<div class="col-sm-3
<div class="col-sm-6
<div class="col-sm-3
</div>
</div>
col-md-8">.col-xs-12 .col-md-8</div>
col-md-4">.col-xs-6 .col-md-4</div>
col-md-4">.col-xs-6 .col-md-4</div>
col-md-4">.col-xs-6 .col-md-4</div>
col-md-4">.col-xs-6 .col-md-4</div>
20
Grid Offset
• Create a gap between your columns using a grid
offset
• Move columns to the right using .col-md-offset-*
classes. These classes increase the left margin of a
column by * columns:
<div class="row">
<div class="col-md-6 col1">.col-md-6</div>
<div class="col-md-5 col-md-offset-1">.col-md-5 and offset-1</div>
</div>
21
Visible or Hidden Element
• We can specify a screen size for elements to be
visible or hidden according to different screen sizes.
• Use class visible-xx or hidden-xx in a div to
show or hide the element in that screen mode.
• Example: Only show the img element in medium
and large resolutions:
<div class='visible-md visible-lg'>
<img src='images/blast.png' alt='Blasting Off' />
</div>
22
Visible or Hidden Element
Classes
xs
sm
md
lg
.visible-xs-*
Visible
Hidden
Hidden
Hidden
.visible-sm-*
Hidden
Visible
Hidden
Hidden
.visible-md-*
Hidden
Hidden
Visible
Hidden
.visible-lg-*
Hidden
Hidden
Hidden
Visible
.hidden-xs
Hidden
Visible
Visible
Visible
.hidden-sm
Visible
Hidden
Visible
Visible
.hidden-md
Visible
Visible
Hidden
Visible
.hidden-lg
Visible
Visible
Visible
Hidden
http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
23
Navigation Bar
1. Create a list of links for the navigation bar
2. Encompass the list with nav HTML5 element and add the
class navbar and navbar-default.
3. Include a div with class navbar-header and inside that an a
element for the site title with navbar-brand class.
4. Assign the list with a nav navbar-nav class and a
navbar-right class to aligned it to the right .
5. Set a highlighted active link with class active.
<nav class="navbar navbar-deafult">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">WebSiteName</a>
</div>
<ul class="nav navbar-nav navbar-right ">
<li class="active"><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
</ul>
</div>
</nav>
24
Navigation
Pills and Tabs
• That’s how the navigation bar appears:
• Navigation links appearance can be changed to:
-Pills
<ul class="nav nav-pills">
-Tabs
<ul class="nav nav-tabs">
25
Dropdown Links Menu
• Navigation bars can also hold dropdown menus. To add a
drop down list to a link item:
1. Add a class dropdown to the link list item
2. Add a class dropdown-toggle; an attribute datatoggle="dropdown" and a span with class caret.
3. Add a class dropdown-menu to the drop down link list
items.
26
Dropdown Links Menu
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
27
Glyphicons
• Bootstrap includes 260
glyphs, available for
Bootstrap free of cost.
• Use glyphicons in text,
buttons, toolbars, navigation,
or forms.
• Examples
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
28
Many more components
And themes and customizations
• Use the resources listed on the first slide to learn more
about Bootstrap components and features. Particularly
the official Bootstrap and W3 Schools websites.
Typography
29

part3-bootstrap

Transcript part3-bootstrap

Directory