Introduction to Responsive Web Development
0 likes469 views
The following topics has been covered in the presentation: 1. Web Development 101 2. Introduction to Bootstrap 3
![Bootstrap [part 1]](https://cdn.slidesharecdn.com/ss_thumbnails/bootstrappart-11-170208154053-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to Introduction to Responsive Web Development (20)
Recently uploaded (20)
Introduction to Responsive Web Development
- 1. Bootstrap Introduction to Twitter Bootstrap 3 in/nikhilbaby
- 2. #Agenda ? Web Development 101 ? Twitter Bootstrap ? Building a responsive web page with bootstrap components
- 3. #Web Development 101 ? HTML De?nes the data and structure of page using elements ? CSS De?nes how the data and the elements actually look, and how they behave when interacting with them ? Javascript The programming language of the web
- 5. #HowtouseCSS
- 6. #CSS Selectors Selector Example Example Description .class .intro Selects all elements with class="intro" #id #?rstname Selects the element with id="?rstname" * * Selects all elements element p Selects all <p> elements Reference: https://www.w3schools.com/cssref/css_selectors.asp
- 9. #Twitter Bootstrap ? Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile ?rst projects on the web. ? As of Dec 2017, 16.3% of all websites are powered by Bootstrap. (https://w3techs.com/technologies/details/js-bootstrap/all/all) ? Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto, and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. ? It was released as an open source project in August 2011.
- 10. #Bootstrap Features ? Mobile ?rst approach (also known as progressive enhancement) ? Supported by all popular browsers ? Easy to get started ? Responsive design
- 11. #Bootstrap Contents & Filestructure ? Sca?olding: Grid System ? CSS: Classes ? Components: Dropdown ? Javascript plugins: Carousel
- 13. #Media Queries ? Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device. ? Media queries can be used to check many things, such as: ? width and height of the viewport ? width and height of the device ? orientation ? resolution
- 14. #Grid Layout ? Bootstrap includes a responsive, mobile ?rst ?uid grid system that appropriately scales up to 12 columns as the device or viewport size increases. ? Grid systems are used for creating page layouts through a series of rows and columns that house your content. ? When using the grid system you need to keep in mind that the design has to be ?rst made for the mobile devices and then scaled to the larger ones.
- 15. #Grid Layout
- 17. #Grid Options
- 18. CSS Classes
- 19. #Tables ? For basic styling¡ªlight padding and only horizontal dividers¡ªadd the base class .table to any <table> ? Use .table-striped to add zebra-striping to any table row within the <tbody> ? Add .table-bordered for borders on all sides of the table and cells ? Add .table-hover to enable a hover state on table rows within a <tbody>
- 20. #Tables
- 21. #Forms ? Individual form controls automatically receive some global styling. ? All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. ? Wrap labels and controls in .form-group for optimum spacing. ? Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.
- 23. #Buttons ? Use the button classes on an <a>, <button>, or <input> element. ? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. ? Add the disabled attribute to <button> buttons. ? Add the .active class to change the state of the button to active.
- 25. #Images ? Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. ? This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element. ? To center images which use the .img-responsive class, use .center-block
- 28. #Dropdown ? Wrap the dropdown's trigger and the dropdown menu within .dropdown ? Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent. ? Add a header to label sections of actions in any dropdown menu. ? Add .disabled to a <li> in the dropdown to disable the link.
- 30. #Navbar ? Navbars are responsive meta components that serve as navigation headers for your application or site. ? They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases. ? Be sure to use a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly
- 33. #Modal ? Modals are streamlined, but ?exible, dialog prompts with the minimum required functionality and smart defaults. ? Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code. ? Modals have two optional sizes, available via modi?er classes to be placed on a .modal-dialog: ? .model-lg ? .model-sm
- 35. #Carousel ? A slideshow component for cycling through elements, like a carousel. ? Nested carousels are not supported. ? Add captions to your slides easily with the .carousel-caption element within any .item.