Embed Size (px)
Citation preview
Imran IhsanAssistant Professor, Department of Computer ScienceAir University, Islamabad, Pakistanwww.imranihsan.com
Responsive Web Design – BootStrap
Front-End UI: Bootstrap
Responsive Design and Grid System
What are Front-end UI Frameworks
Collection of ready-to-use HTML, CSS and
JavaScript templates for UI components:
Typography,
Forms, Buttons, Tables,
Navigations, Dropdowns, Alerts,
Modals, Tabs, Accordion,
Carousel etc.
Popular Front-end UI Frameworks
1. Bootstrap 6. Pure
2. Semantic-UI 7. Skeleton
3. Foundation 8. UIKit
4. Materialize 9. Milligram
5. Material UI 10. Susy
https://www.keycdn.com/blog/front-end-frameworks/
Why Front-End Web UI Frameworks?
Responsive web designMobile first
Cross-browser compatibilityDealing with quirks of browsers
Increased productivityEasy to get started
Community supportResources and web page templates
Bootstrap Overview
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile
first projects on the web
From the Bootstrap webpage
Bootstrap Overview
Front-end framework for faster and easier web
development
Includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
Easily create responsive designs with mobile first approach
Bootstrap History
First released in 2011
Mark Otto and Jacob Thornton
Current Production Version 4.1.3
The first comprehensive framework
Gained popularity very quickly
Setting up the Project Folder
Download the Bootstrap4-starter.zip and Unzip
Open a cmd window
Move to the conFusion folder and Type
npm install
Initialize a Git repository in the project folder
node_modules
Commit of your project folder to the Git repository with the message "Initial Setup".
Set up an online Git repository and synchronize your project folder with online repository.
Downloading Bootstrap
Use npm to fetch the Bootstrap files for use within your project
Npm install [email protected] –save
This will fetch the Bootstrap files and store is in your node_modules folder in a bootstrap folder.
The bootstrap->dist folder contains the precompiled Bootstrap CSS and JS files for use within your project.
Start your lite-server by typing npm start at the prompt.
Getting your Web Page Bootstrap Ready
Open the index.html file in your favorite text editor.
Insert the following code in the <head> of index.html
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
Getting your Web Page Bootstrap Ready
At the bottom of the page, just before the end of the body tag, add the following code to include the JQuery library
<!-- jQuery first, then Tether, then Bootstrap JS. --> <script src="node_modules/jquery/dist/jquery.min.js"></script><script src="node_modules/tether/dist/js/tether.min.js"></script> <scriptsrc="node_modules/bootstrap/dist/js/bootstrap.min.js">
</script>
Now, do a Git commit with the message "Intro. to Bootstrap".
You may push the commit to your online repository.
Why Responsive Design?
Users increasingly accessing websites from a variety of devices of different screen sizes
One size fits all, no longer a possibility!
Adapt to the user’s “viewport”
Build it into the core of the site
Mobile First Design
Mobile Computer
Mobile First
Traditional
First satisfy theMobile constraints
Foundation for Responsive Design
Grid system
Fluid images
Media queries
Media Queries
CSS technology to apply some styles based on the size of the viewport
e.g.,
@media (min-width: 992px) {
/* CSS styles customized for desktop */
}
Viewport<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
The viewport meta tag:
Ensures that the screen width is set to the device width
and the content is rendered with this width in mind
Designing the websites to be responsive to the size of
the viewport
Bootstrap grid system
http://v4-alpha.getbootstrap.com/layout/grid/
Bootstrap Grid
Designed to be:
Responsive
Mobile first
Fluid
CSS Flexbox Layout
Simpler and flexible layout options in CSS
Can easily handle dynamic/unknown size of
content containers
Direction-agnostic layout
Why Flexbox for Bootstrap?
Easy vertical alignment of content within a parent element
Easy reordering of content across devices and screen resolutions with the help of media queries
Easy CSS-only equal height columns for your gridbased layouts
Bootstrap Grid
Bootstrap GridBootstrap makes available five classes
default targets all screen sizes from extra small to extra large,
sm for small,
md for medium,
lg for large, and
xl for extra large screen sizes
Each row in Bootstrap grid system is divided into 12 columns
Use the classes .col-*, .col-sm-*, .col-md-*, and .col-lg-* for defining
the layouts for the various screen sizes
Specify how many columns each piece of content will occupy within a
row, all adding up to 12 or a multiple thereof
Bootstrap Grid
Auto-layout Columns
Bootstrap Grid Details
Extra small<576px
Small≥576px
Medium≥768px
Large≥992px
Extra large≥1200px
Grid behaviorHorizontalat all times
Collapsed to start, horizontal above breakpoints
Max containerwidth
None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Using Column classes
Extra Small Screens Small,
Medium, Large and Extra Large Screens
Using Column Push and Pull
Extra Small Screens Small,
Medium, Large and Extra Large Screens
Reordering Content
Extra Small Screens Small,
Medium, Large and Extra Large Screens
Vertical Alignment
Horizontal Alignment
Column Offset
Nesting Columns
Exercise
Responsive Design and Bootstrap Grid System
Create responsive websites using the Bootstrap grid system
Customize the CSS classes through your own additions in a separate CSS file
Bootstrap Grid System and Responsive Design
Media Query<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Using a Container class<div class="container"> ...
Dividing the content into rows<div class="row"> ...
Creating a Jumbotron<header class="jumbotron"> ...
Creating a footer
Applying column classes within each row
Header<div class="col-12 col-sm-8"> ... </div>
<div class="col col-sm"> ... </div>
Inner<div class="col-sm-4 col-md-3"> ... </div> <div class="col-sm col-md"> ... </div>
Footer<div class="col-5 col-sm-2"> ... </div> <div class="col-6 col-sm-5"> ... </div> <div class="col col-sm-4"> ... </div> <div class="col-auto"> ... </div>
Push, Pull and Offset
Using Push, Pull and Offset with column layout classes<div class="col-sm-4 push-sm-8 col-md-3 push-md-9"> ... </div> <div class="col-sm pull-sm-4 col-md pull-md-3"> ... </div>
For the div containing the <ul> with the site links, update the class as follows<div class="col-5 offset-1 col-sm-2">
Save all the changes, you can do a Git commit with the message "Bootstrap Grid Part 1"
Using Flex Order<div class="col-sm-4 col-md-3 flex-last"> ... </div> <div class="col-sm col-md flex-first"> ... </div>
List styles<ul class="list-unstyled"> ... </ul>
Custom CSS class.row-header{
margin:0px auto;
padding:0px;
}
.row-content {
margin:0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height:400px;
}
.footer{
background-color: #D1C4E9;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
Custom CSS class
Include style.css into index.html<link href="css/styles.css" rel="stylesheet">
Add Classes<div class="row row-header"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<footer class="footer"> ... </footer>
Customize Jumbotron and the Address.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: #9575CD ;
color:floralwhite;
}
address{
font-size:80%;
margin:0px;
color:#0f0f0f;
}
Content
Vertically Centering the Content
In the content section, update all rows
<div class="row row-content align-items-center">
In the footer, update the third column div
<div class="col col-sm-4 align-self-center">
Horizontally Centering the Content
Update the copyright paragraph
<div class="row justify-content-center"> <div class="col-auto">
