Downloaded 186 times
![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>](https://image.slidesharecdn.com/bootstrap-140402004528-phpapp01/85/Bootstrap-3-1-1-6-320.jpg)
More Related Content
![Bootstrap [part 1]](https://cdn.slidesharecdn.com/ss_thumbnails/bootstrappart-11-170208154053-thumbnail.jpg?width=640&height=640&fit=bounds)
Bootstrap 3.1.1
- 1.
- 2. What we aregoing 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
- 3. Overview • Framework forfront-end development • Open source project by Twitter. • Mobile-first approach • Responsive design
- 4. Why ?? • Fasterdevelopment • Browser Support • Number of devices Support • Easy to use • Built-in easy to customize components • Free
- 5. Getting Started <!DOCTYPE html> <htmllang="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:// -->
- 6. Getting Started <!--[if ltIE 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>
- 7.
- 8. CSS, Components, JavaScript CSSComponents JavaScript Typography 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
- 9. Layouts Extra small devicesPhone s (<768px) Small devicesTablet s (≥768px) Medium devices Deskt ops (≥992px) Large devices Deskt ops (≥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)
- 10. 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.
- 11. 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>
- 12.
- 13.
- 14.