Web technologies-course 06.pptx
•Download as PPTX, PDF•
0 likes•28 views
This document provides an overview of CSS frameworks and Bootstrap 4. It defines what a CSS framework is and lists some of the most widely used ones. It then discusses Bootstrap 4 in more detail, covering how to install and use it, its various components like buttons, grids, and cards, and how to customize themes. It includes examples of Bootstrap code and components in a demo.
More Related Content
Similar to Web technologies-course 06.pptx
Similar to Web technologies-course 06.pptx (20)
More from Stefan Oprea
More from Stefan Oprea (20)
Recently uploaded
Recently uploaded (20)
Web technologies-course 06.pptx
- 2. COURSE 06 CSS FRAMEWORKS lect. eng. Rajmond JÁNÓ, PhD rajmond.jano@ael.utcl uj.ro fb.com/janorajmond
- 3. C06 – CSS FRAMEWORKS • CSS Frameworks • Bootstrap 4 • Bootstrap 4 components • Bootstrap 4 demo
- 4. CSS FRAMEWORKS • A CSS framework is a software framework that is meant to allow for easier, more standards- compliant web design using the CSS language • Most of these frameworks contain at least a grid • More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive (this differentiates these from functional and full JavaScript frameworks)
- 5. CSS FRAMEWORKS CSS frameworks offer different modules and tools: • reset style sheet • grid especially for responsive web design • web typography • set of icons in sprites or icon fonts • styling for tooltips, buttons, elements of forms • parts of graphical user interfaces like accordion, tabs, slideshow or modal windows (Lightbox) • equalizer to create equal height content • often used CSS helper classes (left, hide)
- 6. CSS FRAMEWORKS Most widely used CSS Frameworks: • Bootstrap 4 • Foundation • Bulma • Tailwind CSS • Semantic UI • Materialize CSS
- 7. BOOTSTRAP 4
- 8. INSTALLING/USING BOOTSTRAP 4 There are two ways of including Bootstrap 4 into your project: • Pulling Bootstrap source files by using package managers (npm, RubyGems, Composer, NuGet) – check documentation • With this method you can customize which files to include in your final product and reduce load • Using the BootstrapCDN1 • Not customizable, includes all the framework 1CDN – Content delivery network
- 9. USING THE BOOTSTRAP CDN To use the Bootstrap CDN just: • Navigate to https://getbootstrap.com – Get Started • Copy-paste the CSS and JS includes in the <head> section of your HTML document
- 10. BOOTSTRAP 4 COMPONENTS Alerts • Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages
- 11. BOOTSTRAP 4 COMPONENTS Badges • Small count and labeling component
- 12. BOOTSTRAP 4 COMPONENTS Breadcrumb • Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS
- 13. BOOTSTRAP 4 COMPONENTS Buttons • Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more
- 14. BOOTSTRAP 4 COMPONENTS Button group • Group a series of buttons together on a single line with the button group, and super-power them with JavaScript
- 15. BOOTSTRAP 4 COMPONENTS Card • Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options
- 16. BOOTSTRAP 4 COMPONENTS Carousel • A slideshow component for cycling through elements—images or slides of text—like a carousel
- 17. BOOTSTRAP 4 COMPONENTS Collapse • Toggle the visibility of content across your project with a few classes and our JavaScript plugins
- 18. BOOTSTRAP 4 COMPONENTS Dropdowns • Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin
- 19. BOOTSTRAP 4 COMPONENTS Forms • Form control styles, layout options, and custom components for creating a wide variety of forms
- 20. BOOTSTRAP 4 COMPONENTS Input group • Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file input
- 21. BOOTSTRAP 4 COMPONENTS Jumbotron • Lightweight, flexible component for showcasing hero unit style content
- 22. BOOTSTRAP 4 COMPONENTS List group • List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within
- 23. BOOTSTRAP 4 COMPONENTS Media object • Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like
- 24. BOOTSTRAP 4 COMPONENTS Modal • Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content
- 25. BOOTSTRAP 4 COMPONENTS Navs • Bootstrap’s included navigation components
- 26. BOOTSTRAP 4 COMPONENTS Navbar • Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for collapse plugin
- 27. BOOTSTRAP 4 COMPONENTS Pagination • Component for showing pagination to indicate a series of related content exists across multiple pages
- 28. BOOTSTRAP 4 COMPONENTS Alerts • Component for adding Bootstrap popovers, like those found in iOS, to any element on your site
- 29. BOOTSTRAP 4 COMPONENTS Progress • Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels
- 30. BOOTSTRAP 4 COMPONENTS Scrollspy • Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport
- 31. BOOTSTRAP 4 COMPONENTS Spinners • Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript
- 32. BOOTSTRAP 4 COMPONENTS Toasts • Push notifications to your visitors with a toast, a lightweight and easily customizable alert message
- 33. BOOTSTRAP 4 COMPONENTS Tooltips • Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage
- 34. BOOTSTRAP DEMO How did you do that? Where’d you get that from? I read the documentati on! https://getbootstrap.com/docs/4.3/getting-
- 35. BOOTSTRAP DEMO
- 36. BOOTSTRAP DEMO
- 37. BOOTSTRAP DEMO HTML BootstrapCDN Social media icons Local stylesheet
- 46. First image overlay Carousel Carousel indicators
- 47. Bootstra p designat or Screen size interval xs <576px sm [576; 768)px md [768; 992)px lg [992; 1200) px xl ≥1200px
- 54. col-x col-size-x [1..12] col- 1 col- 1 col- 1 col- 1 col- 1 col- 1 col- 1 col- 1 col- 1 col- 1 col- 1 col- 1 col-12 col-4 col-4 col-4 col-8 col-4 [1..12] {xs, sm, md, lg, xl} col-md-4 col-md-4 col-md-4 col-lg-8 col-lg-4
- 62. Card #3 Card #2 Card #1
- 67. Column #3 Column #2 Column #1
- 69. THEMING BOOTSTRAP • Theming is accomplished by SASS variables, SASS maps, and custom CSS • You can only theme projects with Bootstrap imported locally, you cannot theme the CDN
- 70. POLL RESULTS 0 10 20 30 40 50 60 A. Partial exam on Saturday, 9 Nov. B. Partial exam on Monday, 18 Nov. C. No partial exam Partial exam poll results RO ENG
- 71. SCHEDULE FOR NEXT 4 WEEKS Week Week span Activity #6 04 – 10 November C06 + L06: Bootstrap #7 11 – 17 November OFF – Web Technologies (C + L) #8 18 – 24 November Course Partial Exam: C01 – C06 Time allocation/student or group will be sent out Laboratory Test 01: L02 – L05: HTML, CSS, SCSS #9 25 Nov – 1 Dec C07 + L07: JavaScript (Part 1) … to be continued!
- 72. BIBLIOGRAPHY • https://getbootstrap.com/docs/4.3/getting- started/download/ • https://getbootstrap.com/docs/4.3/getting- started/introduction/ • https://getbootstrap.com/docs/4.3/getting- started/theming
- 73. COURSES Available online at: http://www.ael.utcluj.ro/ Information for Students -> Courses -> Web Technologies