bootstrap framework
Post on 24-Jan-2017
1.621 Views
Preview:
TRANSCRIPT
Web Design Technology 1
By Yaowaluck Promdee, Dr.Sumonta Kasemvilas
Bootstrap is the most popular HTML, CSS and JS framework for developing responsive, mobile first projects on the web.
Web Design Technology 3
What is Bootstrap?• Scaffolding – grid system• Base CSS – typography, tables, forms, images• Components – navigation, breadcrumbs, pagination• JavaScript – jQuery plugins
Web Design Technology 4
Why use Bootstrap?
• Easy to use• Responsive features• Mobile-first approach• Browser compatibility
Web Design Technology 5
Get Started Bootstrap
• Download Bootstrap from getbootstrap.com
• Include Bootstrap from a CDN
Web Design Technology 6
Bootstrap CDN• Download form a CND (Content Delivery Network)
<!-- 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>
Web Design Technology 7
Download Bootstrap
BootstrapCompiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.
Source codeSource Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup.
SassBootstrap ported from Less to Sass for easy inclusion in Rails, Compass, or Sass-only projects.
Web Design Technology 8
Create Webpage with Bootstrap
1. Add the HTML5 doctype
2. Bootstrap 3 is mobile-first
<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.
Web Design Technology 9
Create Webpage with Bootstrap
3. Containers
Bootstrap also requires a containing element to wrap site contents.There are two container classes to choose from:
The .container class provides a responsive fixed width containerThe .container-fluid class provides a full width container, spanning the entire width of the viewport
Web Design Technology 10
Grid systemExtra small devices Phones (<768px)
Small devices tablet (>=768px)
Medium devices Desktops (>=992px)
Large devices Desktop (>=1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoint
Max container width
None(auto) 750pz 970pz 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Gutter width 30px (15px on each side of column)
Max column width Auto 60px 78px 95px
Offsets/Column ordering
N/A Yes
Web Design Technology 11
Grid system
<div class="container-fluid"> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div></div></div>
Web Design Technology 12
Grid systemFor Mobile and Desktop
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --><div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div>
Web Design Technology 13
Responsive tables.table /.table-striped / .table-bordered/ .table-hover
<body><div class="container"><table class="table table-striped”>…<!– Table here --></table></div></body> …
…<head><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></head>
Web Design Technology 14
Bootstrap Images
Image shapes
<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">
Web Design Technology 15
Bootstrap PagerPager is also a form of pagination (as described in the previous chapter).Pager provides previous and next buttons (links).To create previous/next buttons, add the .pager class to an <ul> element:
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li></ul>
Align ButtonsUse the .previous and .next classes to align each button to the sides of the page
Web Design Technology 16
Navigation BarsBootstrap Navigation bar
A standard navigation bar is created with <nav class=“navbar-default”>
Just change the .navbar-default class into .navbar-inverse
The .navbar-fixed-top class makes the navigation bar fixed at the top
Web Design Technology 17
Bootstrap FormsStandard rules for all three form layouts:• Always use <form role="form">
(helps improve accessibility for people using screen readers)
• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
• Add class .form-control to all textual <input>, <textarea>, and <select> elements
Web Design Technology 18
ComponentsGlyphicons
<button type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
Web Design Technology 19
BreadcrumbsIndicate the current page's location within a navigational hierarchySeparators are automatically added in CSS through :before and content.class breadcrumb
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li></ol>
Web Design Technology 20
Custom content<div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="..." alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>...</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div></div>
Web Design Technology 21
Using the framework
Starter templateNothing but the basics: compiled CSS and JavaScript along with a container.
Bootstrap themeLoad the optional Bootstrap theme for a visually enhanced experience.
GridsMultiple examples of grid layouts with all four tiers, nesting, and more.
Web Design Technology 22
Using the framework
JumbotronBuild around the jumbotron with a navbar and some basic grid columns.
Narrow jumbotronBuild a more custom page by narrowing the default container and jumbotron..
top related