Programming Articles

Bootstrap makes it easy to create a nice looking menu system (see Figure 1 and Figure 2). Instead of coding all your menus within your shared layout file, make your menus dynamic by storing them in an XML file or a database table. In this article, you create a simple one-line menu system using two C# classes and a little bit of Razor code in an MVC page. The sample in this article shows you how to build a hierarchical menu structure to be used with drop-down menus. You'll also see how to store and retrieve the menus from an XML file using LINQ to XML and a little bit of recursion.

As you can tell from my recent articles, I've been working a lot with Bootstrap. I've been learning how to extend Bootstrap with my own customizations. In this article, I'll show you how to create a custom product selection system like the one shown in Figure 1. To build this system, you'll use the Bootstrap panel classes, button groups, and glyphs. Along with these classes, you'll write a little jQuery to keep a running total of the selected products and make the glyphs change on the button groups. Finally, a little CSS is used to enhance the look of your product selection system.

In my last article, I showed you how to extend the Bootstrap accordion. While the jQuery and CSS I created worked, I realized that I forgot a couple of things. In this article, you'll learn to ensure that the glyphs added to the accordion work when you click on the title of the accordion. In addition, you'll see how to make the jQuery work with multiple accordions on one page. Finally, you'll see how you can use different glyphs on each accordion on each page and use data- attributes to control the glyphs used.

Over the last few years, my company has created many mobile websites for our clients. Like many programmers, we use Twitter Bootstrap to write these mobile websites. Right out of the box, Bootstrap gives you a very nice look and feel, but at times, either your customer wants something different, or you find that you need to add on some functionality to make something easier to use. One thing I added was the ability to add an up- or down-arrow to the title area of the Bootstrap accordion (See Figure 2 for an example of an accordion). In this article, you'll learn how to write just a little bit of CSS and jQuery to extend Bootstrap's accordion.

It seems like everywhere you read, everyone is talking about using ASP.NET MVC to create mobile Web applications. But what about programmers still working in Web Forms? We want our projects done using the latest techniques, we want to build mobile Web apps, and we want to use jQuery and Bootstrap, too.