Extending Bootstrap with CSS, JavaScript, and jQuery
Bootstrap gives us some awesome primitives for creating some good looking user interfaces. However, today's users demand more creative UI widgets. In this course, you will learn to create several UI widgets step-by-step.
What you'll learn
This course will use a step-by-step approach for showing the student how to build several UI widgets using HTML, HTML5, CSS/CSS3, and Bootstrap. The overall project for this course is a simple Music Site that shows how to build all these UI widgets. There will be step-by-step demos for each module to illustrate the concepts of building custom UI widgets. We will use Visual Studio 2013 to build the HTML, however, any editor can be used as we will not be using any Microsoft-specific technology. The concepts in this course can be applied equally to PHP, MVC, Web Forms, or any web development system. At the end of the course the student will have built several ready-to-use UI widgets they can incorporate into their own web projects right away.
Table of contents
- Module Introduction 1m
- Introduction to Summary Blocks 3m
- Build Summary Blocks Step-by-Step 10m
- Introduction to Summary Blocks Themes 2m
- Theme Summary Blocks 6m
- Introduction to Readme Boxes 1m
- Build Readme Box Step-by-Step 6m
- Adding More Styles for Readme Box 3m
- Theme Readme Boxes 4m
- Add a New Page with Readme Boxes 6m
- Stopping Transitions When Moving From Page to Page 4m
- Module Summary 1m
- Module Introduction 1m
- Introduction to Product Selectors 2m
- Build a Product Selector 6m
- Styling the Product Selector 2m
- Write jQuery to Toggle Product Selector 2m
- Intro to Making Your Product Selector More Generic 2m
- Create JavaScript Objects for More Generic Code 6m
- Intro to Calculating Totals 3m
- Create Product Total Area 3m
- Write jQuery to Calculate Running Totals 6m
- Generic Total Calculation and Final Sample 5m
- Module Summary 1m
- Module Introduction 1m
- Adding Glyphs to Accordions 8m
- Introduction to Adding Glyphs Programmatically 2m
- Add Glyphs to Accordion Using jQuery 4m
- Change Glyphs Using jQuery 4m
- Use 'data-' Attributes for Generic Coding 2m
- Adding 'data-' Attributes to Accordions 4m
- Handling Different Accordions 1m
- Making the jQuery Generic for Multiple Accordions 5m
- Module Summary 1m
About the author
Paul has over thirty years of experience architecting information systems and his expertise is in much demand from Fortune 500 companies. Paul is a Pluralsight author, has published 400+ articles, and authored over 14 books on topics ranging from JavaScript, Angular, C#, SQL Server and many .NET technologies. Paul is a frequent speaker at conferences and user groups.