Getting to Know Bootstrap for Rapid Web Development

Bootstrap is a free and open-source front-end web framework for designing websites and web applicationsFind out more about Bootstrap https://www.udemy.com/getting-to-know-bootstrap-for-rapid-web-development/?couponCode=SLIDESHARE

*Bootstrap

*What is Bootstrap

*Introduction to using Bootstrap *What it can do and why use it?*Bootstrap CDN*How to add it to your website.*Starter Template*containers, rows, and columns.*http://v4-alpha.getbootstrap.com/

*Layout Structure of the page

Containers Fixed width max-width breakpoint or Fluid width 100% all the time<div class="container"> </div><div class="container-fluid"> ...</div>

*Breakpoints - responsive

// Small devices (landscape phones, 544px and up)@media (min-width: 544px) { ... }

// Medium devices (tablets, 768px and up)@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)@media (min-width: 1200px) { ... }

*Bootstrap Grid System

Container width None (auto)

576px 720px 940px 1140px

Class prefix .col-xs-

.col-sm-

.col-md-

.col-lg-

.col-xl-

Basics of the grid<div class="container"> <div class="row"> <div class="col-sm-4"> One of three columns </div> <div class="col-sm-4"> One of three columns </div> <div class="col-sm-4"> One of three columns </div> </div></div>

*Jumbotron

<div class="jumbotron"> <h1 class="display-3">Hello, world!</h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <hr class="m-y-2"> <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> <p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p></div>

*Media Objects

<div class="media"> <a class="media-left" href="#"> <img class="media-object" src="..." alt="Generic placeholder image"> </a> <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. </div></div>

*Bootstrap Typography

http://v4-alpha.getbootstrap.com/content/typography/HeadingsSmallText classesHtml typography

*Bootstrap Tables

http://v4-alpha.getbootstrap.com/content/tables/<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody></table>

*Bootstrap Forms

Classes Used for Supported variations.form-group Any group of form controls Use with any block-level

element like <fieldset> or<div>

.form-control Textual inputs text, password, datetime-local, date, month ,time , week, number, email, url, search, tel, color

Select menus multiple, sizeTextareas N/A

.form-control-file File inputs file

.form-check

.form-check-inlineCheckboxes and radios N/A

*Components Buttons

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

*Address - Blockquote

<address>

<strong>Twitter, Inc.</strong><br />

1355 Market St, Suite 900<br />

San Francisco, CA 94103<br />

<abbr title="Phone">P:</abbr> (123) 456-7890

</address>

<blockquote class="blockquote">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>

</blockquote>

*Images Bootstrap

<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail"><img src="..." class="img-rounded pull-xs-left" alt="..."><img src="..." class="img-rounded pull-xs-right" alt="..."><img src="..." class="img-fluid" alt="Responsive image">

*Components Bootstrap

alerts<div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read this important alert message.</div><div class="alert alert-info" role="alert"> <strong>Heads up!</strong> This alert needs your attention, but it's not super important.</div><div class="alert alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good.</div><div class="alert alert-danger" role="alert"> <strong>Oh snap!</strong> Change a few things up and try submitting again.</div>

*Grouping

http://v4-alpha.getbootstrap.com/components/list-group/btn-group

*Bootstrap Navbar

http://v4-alpha.getbootstrap.com/components/navbar/<nav class="navbar navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"> ☰ </button> <div class="collapse" id="exCollapsingNavbar"> <div class="bg-inverse p-a-1"> <h4>Collapsed content</h4> <span class="text-muted">Toggleable via the navbar brand.</span> </div> </div>

*Bootstrap Carousel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="..." alt="First slide"> </div> <div class="carousel-item"> <img src="..." alt="Second slide"> </div> <div class="carousel-item"> <img src="..." alt="Third slide"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div>

*Bootstrap ToolTip

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top</button><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right</button><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom</button><button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left</button>

*Bootstrap Modal

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div></div>

*Bootstrap Styling utilities

<div class="pull-xs-left">Float left on all viewport sizes</div><br><div class="pull-xs-right">Float right on all viewport sizes</div><br><div class="pull-xs-none">Don't float on all viewport sizes</div><br>

* Bootstrap Rapid Web Development

<!DOCTYPE html><html lang="en"> <head>  <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">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script> </body></html>

Date post:	13-Jan-2017
Category:	Education
Upload:	laurence-svekis
View:	141 times
Download:	1 times

Getting to Know Bootstrap for Rapid Web Development

Education