SlideShare a Scribd company logo

Anvesh_BOOTSTRAP.pptx

•Download as PPTX, PDF•
•
C
contactanveshk50

Bootstrap is a front-end framework for building responsive, mobile-first websites. It provides HTML and CSS-based design templates for common user interface components like buttons, navigation bars, and grid systems as well as extensions for things like carousels and modals. Developers can include Bootstrap via a content delivery network or by downloading files and linking the CSS and JavaScript in their HTML. It is a popular and widely used framework that helps speed up the development process and ensures a consistent and mobile-optimized experience across browsers and devices.

Related slideshows

Bootstrap webtech presentation - new
Bootstrap webtech presentation - newBootstrap webtech presentation - new
Bootstrap webtech presentation - new
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
BootStrap_1_Introduction
BootStrap_1_IntroductionBootStrap_1_Introduction
BootStrap_1_Introduction
 
1 of 10
<BOOTSTRAP/> -Anvesh
| BOOTSTRAP |  Bootstrap is a front-end framework that allows developers to create modern, responsive, and mobile-friendly websites.  It provides a comprehensive set of CSS and JavaScript components, making it easy to build visually appealing and consistent web interfaces.  Developed by Mark Otto and Jacob Thornton at Twitter  Mobile first approach  ICONS and Pre-made templates
| FEATURES OF BOOTSTRAP | Responsive Design Bootstrap's grid system and responsive utility classes enable the creation of websites that look great on different screen sizes and devices. Pre-styled Components Bootstrap includes a wide variety of reusable components, such as buttons, forms, navigation bars, cards, and more. These components save development time and ensure a consistent look and feel. Customizable Developers can easily customize Bootstrap's default styles and components to match their design requirements, using SASS or CSS overrides.
| HOW TO USE |  We can include it either by using CDN or downloaded files.  Syntax for using downloaded files <script type = "text/javascript" src = "jquery.min.js"></script> <script type = "text/javascript" src = "bootstrap.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "bootstrap.min.css">  Syntax for using CDN (Content Distribution Network)
| CONTAINERS |  It has a concept of containing elements to wrap site contents.  There are two types of containers .container : Class used for a responsive fixed width. Syntax for using .container <div class = "container"> ….. </div> .container-fluid : Class used for a full-width container. Syntax for using .container-fluid <div class = "container-fluid"> ….. </div>
| BOOTSTRAP GRID | The Bootstrap grid system has four classes: It allows up to 12 columns across the page.
| BOOTSTRAP BUTTONS | Bootstrap provides 7 styles of buttons. We can use the btn class to obtain it. btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
| COMPONENTS | Many more reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.  Accordion  Alerts  Badge  Breadcrumb  Buttons  Button group  Card  Carousel  Close button  Collapse  Dropdowns  List group  Modal  Navs & tabs  Navbar  Offcanvas  Pagination  Popovers  Progress  Scrollspy  Spinners  Toasts  Tooltips
| ADVANTAGES OF BOOTSTRAP |  Fewer Cross browser bugs  A consistent framework that supports major of all browsers and CSS compatibility fixes  Lightweight and customizable  Responsive structures and styles  Several JavaScript plugins using the jQuery  Good documentation and community support  Loads of free and professional templates, WordPress themes and plugins  Great grid system | DISADVANTAGES OF BOOTSTRAP |  Class bloat  Less Customization
THANK YOU

More Related Content

Anvesh_BOOTSTRAP.pptx

  • 2. | BOOTSTRAP |  Bootstrap is a front-end framework that allows developers to create modern, responsive, and mobile-friendly websites.  It provides a comprehensive set of CSS and JavaScript components, making it easy to build visually appealing and consistent web interfaces.  Developed by Mark Otto and Jacob Thornton at Twitter  Mobile first approach  ICONS and Pre-made templates
  • 3. | FEATURES OF BOOTSTRAP | Responsive Design Bootstrap's grid system and responsive utility classes enable the creation of websites that look great on different screen sizes and devices. Pre-styled Components Bootstrap includes a wide variety of reusable components, such as buttons, forms, navigation bars, cards, and more. These components save development time and ensure a consistent look and feel. Customizable Developers can easily customize Bootstrap's default styles and components to match their design requirements, using SASS or CSS overrides.
  • 4. | HOW TO USE |  We can include it either by using CDN or downloaded files.  Syntax for using downloaded files <script type = "text/javascript" src = "jquery.min.js"></script> <script type = "text/javascript" src = "bootstrap.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "bootstrap.min.css">  Syntax for using CDN (Content Distribution Network)
  • 5. | CONTAINERS |  It has a concept of containing elements to wrap site contents.  There are two types of containers .container : Class used for a responsive fixed width. Syntax for using .container <div class = "container"> ….. </div> .container-fluid : Class used for a full-width container. Syntax for using .container-fluid <div class = "container-fluid"> ….. </div>
  • 6. | BOOTSTRAP GRID | The Bootstrap grid system has four classes: It allows up to 12 columns across the page.
  • 7. | BOOTSTRAP BUTTONS | Bootstrap provides 7 styles of buttons. We can use the btn class to obtain it. btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
  • 8. | COMPONENTS | Many more reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.  Accordion  Alerts  Badge  Breadcrumb  Buttons  Button group  Card  Carousel  Close button  Collapse  Dropdowns  List group  Modal  Navs & tabs  Navbar  Offcanvas  Pagination  Popovers  Progress  Scrollspy  Spinners  Toasts  Tooltips
  • 9. | ADVANTAGES OF BOOTSTRAP |  Fewer Cross browser bugs  A consistent framework that supports major of all browsers and CSS compatibility fixes  Lightweight and customizable  Responsive structures and styles  Several JavaScript plugins using the jQuery  Good documentation and community support  Loads of free and professional templates, WordPress themes and plugins  Great grid system | DISADVANTAGES OF BOOTSTRAP |  Class bloat  Less Customization