Bootstrap for ASP.NET MVC

Description

Combine the power of ASP.NET Core with Bootstrap 4 to build elegant, responsive web apps About This BookUpdated for Bootstrap 4 and ASP.Net MVC 6, this book shows how to take advantage of the latest new features introduced in both of these industry-leading frameworksBuild responsive, mobile-ready apps by combining the power of ASP.NET MVC with BootstrapGrasp the intricacies of Bootstrap and how to use it with ASP.NET MVCBuild your own tools and helpers to assist you in creating ASP.NET MVC Bootstrap sites easily and quicklyMaster the use of Bootstrap components and plugins with ASP.NET MVCWho This Book Is For If you are an ASP.NET MVC developer and would like to know how to incorporate Bootstrap into your projects, then this book is invaluable to you. Developers with entry-level experience of ASP.NET MVC development and limited experience with Bootstrap will also benefit from this book. What You Will LearnCreate a new ASP.NET MVC project that uses Bootstrap for its styling and learn how to include external libraries using the new package managersLearn to use the various Bootstrap CSS and HTML elements, and how to use the new Bootstrap 4 grid layout systemExplore the different input groups and implement alerts, progress bars, and badgesExplore JavaScript components by illustrating and walking through the process of using JavaScript/jQuery to add interactivity to Twitter Bootstrap componentsBuild your own ASP.NET MVC helpers and tag helpers to reduce the amount of HTML needed to generate Bootstrap elementsConvert a Bootstrap HTML template into a usable ASP.NET MVC projectUse the jQuery DataTables plugin with Bootstrap and ASP.NET MVCIn Detail One of the leading open source frontend frameworks, Bootstrap has undergone a significant change and introduced several features that make designing compelling, next-generation UIs much simpler. Integrating Bootstrap with ASP.NET's powerful components can further enhance its capabilities. This book guides you through the process of creating an ASP.NET MVC website from scratch using Bootstrap. After a primer on the fundamentals of Bootstrap, you will learn your way around and create a new ASP.NET MVC project in Visual Studio. You will move on to learn about the various Bootstrap components as well as techniques to include them in your own projects. The book includes practical examples to show you how to use open-source plugins with Bootstrap and ASP.NET MVC and guides you through building an ASP.NET MVC website using Bootstrap, utilizing layout and user-interface components. At the end of this book, you will find some valuable tips and tricks to help you get the most out of your Bootstrap-integrated and ASP.NET MVC-integrated website. Style and approach This is a compact, step-by-step guide that focuses on combining the power of Bootstrap with ASP.Net MVC to build next-generation web apps. With clear instructions, this book will show how to build a complete ASP.Net MVC-integrated web app from scratch using Bootstrap. It will also cover several tricks for integrating Bootstrap and ASP.Net MVC, and getting the most out of both frameworks. Cover Copyright Credits About the Author About the Reviewer www.PacktPub.com Table of Contents Preface Chapter 1: Getting Started with ASP.NET Core and Bootstrap 4 Files included in the Bootstrap distribution Bootstrap style sheets Bootstrap JavaScript files Bootstrap fonts/icons Bootstrap source files CSS pre-processors Creating an empty ASP.NET MVC site and adding Bootstrap manually Enabling MVC and static files Creating the default route controller and view Adding the Bootstrap 4 files using Bower Compiling the Bootstrap Sass files using Gulp Adding Gulp npm packages Enabling Gulp-Sass compilation Running Gulp tasks Binding Gulp tasks to Visual Studio events Installing Font Awesome Creating a MVC Layout page Content Delivery Networks Summary Chapter 2: Using Bootstrap CSS and HTML Elements The Bootstrap grid system Bootstrap Grid components Containers Rows Columns Bootstrap HTML elements Bootstrap tables Enabling MVC Scaffolding Scaffolding an MVC List View page Styling Bootstrap tables Bootstrap contextual table classes Responsive and smaller tables Bootstrap buttons Outline buttons Form layout and elements Vertical/basic forms Inline forms Grid-based forms Bootstrap images Bootstrap figures Summary Chapter 3: Using Bootstrap Components The Bootstrap navigation bar Basic navbar Responsive navbar Navbar with dropdown menus Navbar color schemes List groups Badges Media object Breadcrumbs Pagination Input groups Button dropdowns Alerts Progress bars Basic progress bar Contextual progress bars Striped and animated progress bars Cards Summary Chapter 4: Using Bootstrap JavaScript Components Data attributes versus the programmatic API Cascading dropdowns Modal dialogs Modal size and animation Tabs Tooltips Popovers The accordion/collapse component The carousel component Summary Chapter 5: Creating MVC Bootstrap Helper and Tag Helpers Built-in HTML Helpers Built-in Tag Helpers The difference between HTML Helpers and Tag Helpers Creating HTML Helpers using static methods Using the static method helper in a view Creating helpers using extension methods Using the extension method helper in a view Creating self-closing helpers Using the self-closing helper in a view Creating a Bootstrap button Tag Helper Using the Bootstrap button Tag Helper Creating a Bootstrap Alert Tag Helper Using the Bootstrap Alert Tag Helper Summary Chapter 6: Converting a Bootstrap HTML Template into a Usable ASP.NET MVC Project Working with prebuilt HTML templates Creating the ASP.NET MVC project Creating the master layout Adding a view for the home controller Adding different page views Adding charts to views Adding Google Charts to views Server-side data processing with Google Charts Summary Chapter 7: Using the jQuery DataTables Plugin with Bootstrap 4 jQuery DataTables Adding DataTables to your ASP.NET MVC project Using the DataTables Bower package Using the CDN Adding Bootstrap styling to DataTables Loading and displaying data in jQuery DataTables DataTables plugins Date sorting Rendering DataTables extensions The ColReorder extension The ColVis buttons extension The copy and print buttons extension Summary Chapter 8: Creating Bootstrap 4 ASP.NET MVC Sites Using Visual Studio Code What is Visual Studio Code? Installing Visual Studio Code Creating an empty ASP.NET project Scaffolding a project using Yeoman Enabling ASP.NET MVC and static files Adding a default route controller and view Using Bower to add the Bootstrap 4 files Using Gulp to compile the Bootstrap Sass files Creating a MVC layout page Testing the site Summary Appendix: Bootstrap Resources Themes Add-ons Editors and generators Index