Book Image

Bootstrap for ASP.NET MVC

By : Pieter van der Westhuizen
Book Image

Bootstrap for ASP.NET MVC

By: Pieter van der Westhuizen

Overview of this book

<p>Bootstrap, a leading open source frontend framework, takes care of typography, form layouts, and user interface components, allowing a developer to focus on writing code. Integrating 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.</p> <p>You will learn about 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 will guide you through building a website using Bootstrap, utilizing layout and user interface components. In the process, you will also learn to build HTML helpers and T4 templates as well as how to use the jQuery DataTables plugin. At the end of this book, you will find some valuable tips and tricks, which will help you in getting the most out of your Bootstrap and ASP.NET MVC integrated website.</p>

Related Content you might be interested in

Current Title:

Small book image
Bootstrap for ASP.NET MVC
Pieter van der Westhuizen
Aug, 2014 | 198 pages
No titles found
Table of Contents (18 chapters)
Bootstrap for ASP.NET MVC
Bootstrap for ASP.NET MVC
Credits
Credits
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with ASP.NET MVC and Bootstrap
Getting Started with ASP.NET MVC and Bootstrap
The Bootstrap distribution
Using Bootstrap with a site created with the standard Visual Studio project template
Creating an empty ASP.NET MVC site and adding Bootstrap manually
Creating the site Layout file
Creating a home controller with a Bootstrap-themed view
Adding Bootstrap files using NuGet
Improving your site performance with bundling and minification
Summary
2
Using Bootstrap CSS and HTML Elements
Using Bootstrap CSS and HTML Elements
The Bootstrap grid system
Bootstrap HTML elements
Form layout and elements
Bootstrap validation styles
Creating editor templates for primitive types
Bootstrap image classes
Summary
3
Using Bootstrap Components
Using Bootstrap Components
The Bootstrap navigation bar
List groups
Badges
The media object
Page headers
Breadcrumb
Pagination
Input groups
Button dropdowns
Alerts
Progress bars
Summary
4
Using Bootstrap JavaScript Plugins
Using Bootstrap JavaScript Plugins
Data attributes versus the programmatic API
Cascading dropdowns
Modal dialogs
Tabs
Tooltips
Popovers
The accordion component
The carousel component
Summary
5
Creating ASP.NET MVC Bootstrap Helpers
Creating ASP.NET MVC Bootstrap Helpers
Built-in HTML helpers
Creating a custom helper
Creating helpers using static methods
Creating helpers using extension methods
Creating fluent HTML helpers
Creating self-closing helpers
Summary
6
Creating T4 Templates to Scaffold Bootstrap Views
Creating T4 Templates to Scaffold Bootstrap Views
An overview of scaffolding
T4 templates
Customizing the generated code for controllers
Customizing the generated code for views
Creating a custom scaffolder extension
Summary
7
Converting a Bootstrap HTML Template into a Usable ASP.NET MVC Project
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 the menu plugin library
Adding different page views
Adding charts to your views
Summary
8
Using the jQuery DataTables Plugin with Bootstrap
Using the jQuery DataTables Plugin with Bootstrap
jQuery DataTables
Adding DataTables to your ASP.NET MVC project
Loading and displaying data in jQuery DataTables
DataTables extensions
Summary
9
Making Things Easier with the TwitterBootstrapMVC Library
Making Things Easier with the TwitterBootstrapMVC Library
The TwitterBootstrapMVC library
Including TwitterBootstrapMVC in your project
Using the TwitterBootstrapMVC helpers
Summary
Bootstrap Resources
Bootstrap Resources
Themes
Add-ons
Editors and generators
Index
Index

The carousel component

The carousel component is a user interface element, which you'll see on a number of websites. It is essentially a slideshow that cycles through different elements, usually images. The carousel component should be contained inside a <div> element with a class name of carousel and a data-ride attribute with a value of carousel. To use the carousel component in your project, perform the following steps:

  1. The carousel component consists of an ordered list element, <ol>, that renders as small circles in the browser and indicates which slide is currently active. The markup for this element is as follows:

    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

  2. Next, another <div> element with a class name of carousel-inner needs to be created...

Previous Section
End of Section 9
Next Section