Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Design Course - Lecture 19 - Bootstrap, Form, Button, Image, Helper class, Responsive

133 views

Published on

Web Design Course - Lecture 19 - Bootstrap, Form, Button, Image, Helper class, Responsive

Published in: Design
  • Login to see the comments

Web Design Course - Lecture 19 - Bootstrap, Form, Button, Image, Helper class, Responsive

  1. 1. WEB DESIGN
  2. 2. WEB DESIGN FORM1 2 BUTTON2 IMAGE3 2 HELPER CLASS4 2 RESPONSIVE5
  3. 3. Form <form> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
  4. 4. Form Inline <form class="form-inline"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
  5. 5. BUTTON .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</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>
  6. 6. IMAGES .img-responsive .img-rounded .img-circle .img-thumbnail <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236"> <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"> <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
  7. 7. HELPER CLASS TEXT: .text-muted .text-primary .text-success .text-info .text-warning .text-danger Background: .bg-primary .bg-success .bg-info .bg-warning .bg-danger
  8. 8. HELPER CLASS .pull-left .pull-right .center-block .clearfix .show .hidden .text-hide .close .caret
  9. 9. RESPONSIVE Visible: .visible-xs, .visible-sm, .visible-md, .visible-lg Hidden: .hidden-xs .hidden-sm .hidden-md .hidden-lg
  10. 10. THANK YOU

×