Bootstrap for ASP.NET MVC - Second Edition

Book description

Combine the power of ASP.NET Core with Bootstrap 4 to build elegant, responsive web apps

About This Book

  • Updated 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 frameworks
  • Build responsive, mobile-ready apps by combining the power of ASP.NET MVC with Bootstrap
  • Grasp the intricacies of Bootstrap and how to use it with ASP.NET MVC
  • Build your own tools and helpers to assist you in creating ASP.NET MVC Bootstrap sites easily and quickly
  • Master the use of Bootstrap components and plugins with ASP.NET MVC

Who 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 Learn

  • Create a new ASP.NET MVC project that uses Bootstrap for its styling and learn how to include external libraries using the new package managers
  • Learn to use the various Bootstrap CSS and HTML elements, and how to use the new Bootstrap 4 grid layout system
  • Explore the different input groups and implement alerts, progress bars, and badges
  • Explore JavaScript components by illustrating and walking through the process of using JavaScript/jQuery to add interactivity to Twitter Bootstrap components
  • Build your own ASP.NET MVC helpers and tag helpers to reduce the amount of HTML needed to generate Bootstrap elements
  • Convert a Bootstrap HTML template into a usable ASP.NET MVC project
  • Use the jQuery DataTables plugin with Bootstrap and ASP.NET MVC

In 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.

Table of contents

  1. Bootstrap for ASP.NET MVC Second Edition
    1. Bootstrap for ASP.NET MVC Second Edition
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. eBooks, discount offers, and more
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    7. 1. Getting Started with ASP.NET Core and Bootstrap 4
      1. Files included in the Bootstrap distribution
        1. Bootstrap style sheets
        2. Bootstrap JavaScript files
        3. Bootstrap fonts/icons
        4. Bootstrap source files
      2. CSS pre-processors
      3. Creating an empty ASP.NET MVC site and adding Bootstrap manually
        1. Enabling MVC and static files
        2. Creating the default route controller and view
      4. Adding the Bootstrap 4 files using Bower
      5. Compiling the Bootstrap Sass files using Gulp
        1. Adding Gulp npm packages
          1. Enabling Gulp-Sass compilation
          2. Running Gulp tasks
          3. Binding Gulp tasks to Visual Studio events
      6. Installing Font Awesome
      7. Creating a MVC Layout page
        1. Content Delivery Networks
      8. Summary
    8. 2. Using Bootstrap CSS and HTML Elements
      1. The Bootstrap grid system
        1. Bootstrap Grid components
          1. Containers
          2. Rows
          3. Columns
      2. Bootstrap HTML elements
        1. Bootstrap tables
          1. Enabling MVC Scaffolding
          2. Scaffolding an MVC List View page
          3. Styling Bootstrap tables
          4. Bootstrap contextual table classes
          5. Responsive and smaller tables
        2. Bootstrap buttons
          1. Outline buttons
      3. Form layout and elements
        1. Vertical/basic forms
        2. Inline forms
        3. Grid-based forms
      4. Bootstrap images
      5. Bootstrap figures
      6. Summary
    9. 3. Using Bootstrap Components
      1. The Bootstrap navigation bar
        1. Basic navbar
        2. Responsive navbar
        3. Navbar with dropdown menus
        4. Navbar color schemes
      2. List groups
      3. Badges
      4. Media object
      5. Breadcrumbs
      6. Pagination
      7. Input groups
      8. Button dropdowns
      9. Alerts
      10. Progress bars
        1. Basic progress bar
        2. Contextual progress bars
        3. Striped and animated progress bars
      11. Cards
      12. Summary
    10. 4. Using Bootstrap JavaScript Components
      1. Data attributes versus the programmatic API
      2. Cascading dropdowns
      3. Modal dialogs
        1. Modal size and animation
      4. Tabs
      5. Tooltips
      6. Popovers
      7. The accordion/collapse component
      8. The carousel component
      9. Summary
    11. 5. Creating MVC Bootstrap Helper and Tag Helpers
      1. Built-in HTML Helpers
      2. Built-in Tag Helpers
      3. The difference between HTML Helpers and Tag Helpers
      4. Creating HTML Helpers using static methods
        1. Using the static method helper in a view
      5. Creating helpers using extension methods
        1. Using the extension method helper in a view
      6. Creating self-closing helpers
        1. Using the self-closing helper in a view
      7. Creating a Bootstrap button Tag Helper
        1. Using the Bootstrap button Tag Helper
      8. Creating a Bootstrap Alert Tag Helper
        1. Using the Bootstrap Alert Tag Helper
      9. Summary
    12. 6. Converting a Bootstrap HTML Template into a Usable ASP.NET MVC Project
      1. Working with prebuilt HTML templates
      2. Creating the ASP.NET MVC project
      3. Creating the master layout
      4. Adding a view for the home controller
      5. Adding different page views
      6. Adding charts to views
        1. Adding Google Charts to views
        2. Server-side data processing with Google Charts
      7. Summary
    13. 7. Using the jQuery DataTables Plugin with Bootstrap 4
      1. jQuery DataTables
      2. Adding DataTables to your ASP.NET MVC project
        1. Using the DataTables Bower package
        2. Using the CDN
        3. Adding Bootstrap styling to DataTables
      3. Loading and displaying data in jQuery DataTables
      4. DataTables plugins
        1. Date sorting
        2. Rendering
      5. DataTables extensions
        1. The ColReorder extension
        2. The ColVis buttons extension
        3. The copy and print buttons extension
      6. Summary
    14. 8. Creating Bootstrap 4 ASP.NET MVC Sites Using Visual Studio Code
      1. What is Visual Studio Code?
      2. Installing Visual Studio Code
      3. Creating an empty ASP.NET project
        1. Scaffolding a project using Yeoman
        2. Enabling ASP.NET MVC and static files
        3. Adding a default route controller and view
      4. Using Bower to add the Bootstrap 4 files
      5. Using Gulp to compile the Bootstrap Sass files
      6. Creating a MVC layout page
        1. Testing the site
      7. Summary
    15. A. Bootstrap Resources
      1. Themes
      2. Add-ons
      3. Editors and generators

Product information

  • Title: Bootstrap for ASP.NET MVC - Second Edition
  • Author(s): Pieter van der Westhuizen
  • Release date: September 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781785889479