Bootstrap webtech presentation - new

Bootstrap webtech presentation - new

• 1.
  BOOTSTRAP WebtechLearning TM
• 2.
  BOOTSTRAP BASIC BOOTSTRAP 1st Edition OUR TRAININGYOUR CARRER
• 3.
  INTRODUCTIONTO TWITTERBOOTSTRAP Bootstrap isthe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is a free front-end framework for faster and easier web development Bootstrap includes HTML and CSS based design templates for typography, forms, buttons`, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins Bootstrap also gives you the ability to easily create responsive designs Responsive Web Design? Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops. Why Use Bootstrap? * Easy to use * Responsive features *Mobile-first approach WebTechLearning,Chandigarh
• 4.
  BOOTSTRAPGRIDS Bootstrap's grid systemallows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns: Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size. Basic Structure of a Bootstrap Grid <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> Grid Classes The Bootstrap grid system has four classes: * xs (for phones) * sm (for tablets) * md (for desktops) * lg (for larger desktops) WebTechLearning,Chandigarh
• 5.
  BOOTSTRAPIMAGES Contextual Colors andBackgrounds Bootstrap also has some contextual classes that can be used to provide "meaning through colors". Eg: .text-muted, .text-primary, .textsuccess, .text-info, .text-warning, and. text-danger The classes for background colors are: .bg-primary, .bg-success, bg-info, bgwarning, .bg-danger Bootstrap Image Shapes * Rounded Corners WebTechLearning,Chandigarh <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236"> * Circle <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"> * Thumbnail <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">
• 6.
  Responsive Images Images comesin all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen. Create responsive images byadding an.img-responsive class to the <img> tag. Theimage will thenscale nicely to theparent element. Example: <img class="img-responsive" src="img_chania.jpg" alt="Chania"> WebTechLearning,Chandigarh
• 7.
  .btn-link .btn-sm .btn-xs.btn-md BOOTSTRAPBUTTONS Bootstrap providesseven stylesof buttons: WebTechLearning,Chandigarh .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger Button Sizes .btn-lg
• 8.
  BOOTSTRAPNAVIGATIONBAR Anavigation bar isanavigation headerthat is placedatthe top ofthe page: WebTechLearning,Chandigarh With Bootstrap, a navigation bar can extend or collapse, depending on the screen Size. A standard navigation bar is created with Eg: <nav class="navbar navbardefault"> FixedNavigation Bar The navigation bar can also be fixed at the top or at the bottom of the page. A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll. The .navbar-fixed-top class makes the navigation bar fixed at the top. Inverted Navigation Bar If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar. Just change the .navbar-default class into .navbar-inverse
• 9.
  BOOTSTRAPFORMS Bootstrap Form Layouts WebTechLearning,Chandigarh Bootstrapprovides three types of form layouts: * Vertical form (this is default) * Horizontal form * Inline form Standard rules forall three formlayouts: * 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 Tip: Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
• 10.
  WebTechLearning,Chandigarh SupportedForm Controls Bootstrap supportsthe following form controls: 1 input 2 textarea 3 checkbox 4 radio 5 select Bootstrap Form Control States * INPUT FOCUS * DISABLED INPUTS * DISABLED FIELDSETS * READONLY INPUTS * VALIDATION STATES * ICONS * HIDDEN LABELS Input Sizing in Forms Set the heights of input elements using classes like .input-lg and .input-sm Set the widths of elements using grid column classes like .col-lg-*and .col-sm-*. BOOTSTRAPFORMS
• 11.
  BOOTSTRAPTOOLTIP PLUGIN How toCreatea Tooltip WebTechLearning,Chandigarh To create a tooltip, add the data-toggle="tooltip" attribute to an element. Use the title attribute to specify the text that should be displayed inside the tooltip: <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method. The following code will enable all tooltips in the document: Example <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>