bootstrap 3.1.1
Post on 27-Jan-2015
128 Views
Preview:
DESCRIPTION
TRANSCRIPT
Twitter’s Bootstrap 3.1.1
What we are going to cover
• Overview of Bootstrap• Why Bootstrap• Getting Started Bootstrap• Grid System of Bootstrap• CSS, Components, JavaScript• Layouts in Bootstrap• media queries• Creating sample Structures using Bootstrap• Customization
Overview
• Framework for front-end development• Open source project by Twitter.• Mobile-first approach• Responsive design
Why ??
• Faster development• Browser Support• Number of devices Support• Easy to use• Built-in easy to customize
components• Free
Getting Started
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
Getting Started
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Grid System
CSS, Components, JavaScript
CSS Components JavaScriptTypography Glyph icons Modal
Code Breadcrumbs ScrollSpy
Table Pagination Tooltip
Forms Button Dropdowns Popover
Buttons Input Groups Collapse
Images Badges Carousel
Helper Classes Navigation Bar Affix
Responsive Utilities Jumbotron
Progress Bar
Alert
Panel
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes
Layouts
Extra small devicesPhones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times
Collapsed to start, horizontal above breakpoints
Container width
None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Media Queries
E.g.• @media (min-width:500px) { … }• @media (orientation: portrait) { … }
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution.
Creating sample structure
• <div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
• <div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Customization
Allows you to select required files to compile into your custom build of Bootstrap
Questions ?
Thank You
top related