Tag Archives: Twitter Bootstrap

Bootstrap for ASP.NET MVC Review

Starts off with a good introduction to using Bootstrap in your ASP.NET applications.  It covers the default “File | New” experience, manually added files and my favorite, NuGet. The author then continues with introducing the Bootstrap element styles in a logical order, starting with the grid and ending with form validation.  Next the author introduces the JavaScript components of Bootstrap.

In the next part of the book the author does what I have not seen in other books on Bootstrap, the author explains how to create helper methods, which is good but there already is a well used package for that in which the author has a chapter on on at the end of the book.

The author goes on to give suggestions are to how to work with and convert sites that do not have bootstrap.

I’m not sure why but the author included a whole chapter using the jQuery DataTables plugin with some of it’s extensions with Bootstrap.

Overall, the book was easy to read, the author was clear and logical in his explanations of Bootstrap. I would recommend this book to someone just starting to learn Bootstrap and working on ASP.NET applications.

jQuery Twitter Bootstrap Flickr Carousel

A few months ago I built a jQuery plugin that uses the Twitter Bootstrap Carousel to cycle through images on Flickr. In order to use this plugin you need to get an Api Key from Flickr and have the following software:

  • jQuery (v1.8 or higher)
  • Twitter Bootstrap (v3.0 or higher)
  • Twitter Bootstrap components (v3.0 or higher)
  • twbsPagination (optional)

Sample Usage

$('#flickr-carousel').twbsFlickrCarousel(
	{
		tagsToSearchFor: 'mvpsummit,mvp2013,mvp13', 
		flickrApiKey: 'insert your key here', 
		paginationSelector: '#flickr-pagination'
	}
);

Download the plugin from GitHub at: https://github.com/jguadagno/twbs-flickrCarousel

See an example of usage at: http://mvp2014.mvpsummitevents.info/flickr

Bootstrap Theme Switcher jQuery plugin

A few months ago a published an article on a Bootstrap Theme Switcher. I’ve since approved this post and the JavaScript and turned it into a jQuery plugin. This plugin works with the Bootswatch API to provide the user the following:

  • Loads a list of available themes from the API into a SELECT or a UL,
  • Dynamically change the site theme to the selected theme
  • Manually change the theme
  • Save the selected theme to a cookie, requires the jQuery Cookie plugin,
  • Loads the selected theme from a cookie, requires the jQuery Cookie plugin,

The plugin also allows you to load of list of local themes in case you to note want to use the Bootswatch site.

Let me know what you think.

Downloads

jQuery Plugin page
http://plugins.jquery.com/bootstrapThemeSwitcher/
GitHub Repository
http://github.com/jguadagno/bootstrapThemeSwitcher
Demo site
http://introtobootstrap.azurewebsites.net/

Next steps

  • NuGet Package
  • NPM module
  • Bower module

Bootstrap Theme Switcher

UPDATE: This is now a jQuery Plugin. See the post Bootstrap Theme Switcher jQuery Plugin.

While creating a Proof of Concept design for a web site I was working on I thought it would be cool to demonstrate the power of themes in Twitter Bootstrap by providing an option in the Proof of Concept to switch to some of the themes that are on Bootswatch.  It was a remarkably easy solution, that involved jQuery, jQuery.cookie plugin, Twitter Bootstrap Navbar and the themes from Bootswatch.

This sample assumes that you are using a CDN for the Twitter Bootstrap and jQuery files and that you downloaded the themes from Bootswatch and copied them to the path of /css/themes. The example could easily be modified to use the themes on the Bootstrap CDN.

First, let’s start with a basic template for Twitter Bootstrap

<html lang="en">
	<head>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" 
			href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		<link rel="stylesheet" 
			href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <link id="bootstrapTheme" rel="stylesheet" 
			href="http://netdna.bootstrapcdn.com/bootswatch/3.1.1/cerulean/bootstrap.min.css">
        <link rel="stylesheet" 
			href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->    
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	</head>
<body>

<div class="container-fluid">

Your content here!

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" 
	type="text/javascript">
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" 
	type="text/javascript">
</script>
<script src="/js/site.js" type="text/javascript"></script>

</body> 
</html>

Next, we’ll add the navbar with the theme selector menu.

<div class="container">
	<div class="navbar-header">
		<button class="navbar-toggle"> 
  			<span class="sr-only">Toggle navigation</span>
  		</button> 
  		<a class="navbar-brand" href="index.html">Intro to Twitter Bootstrap</a>
  	</div>
	<div class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
		<li class="dropdown"><a class="dropdown-toggle" href="#">Bootstrap Site </a>
			<ul class="dropdown-menu">
				<li><a>default</a></li>
				<li><a>amelia</a></li>
				<li><a>cerulean</a></li>
				<li><a>cosmo</a></li>
				<li><a>custom</a></li>
				<li><a>cyborg</a></li>
				<li><a>darkly</a></li>
				<li><a>flatly</a></li>
				<li><a>journal</a></li>
				<li><a>lumen</a></li>
				<li><a>readable</a></li>
				<li><a>shamrock</a></li>
				<li><a>simplex</a></li>
				<li><a>slate</a></li>
				<li><a>spacelab</a></li>
				<li><a>superhero</a></li>
				<li><a>united</a></li>
				<li><a>yeti</a></li>
			</ul>
		</li>
	</ul>
	</div><!--/.nav-collapse -->
</div> 

Then, the JavaScript

$().ready(function() {
	/* For theme switching */    
	var themeName = $.cookie("themeName");
	var themePath = $.cookie("themePath");
	if (themeName !== undefined) {
		setTheme(themeName, themePath);
	}
});

function setTheme(themeName, themePath) {
	var cssLink = "";
	$('#bootstrapTheme').replaceWith(cssLink);

	$.cookie("themeName", themeName, { expires: 7, path: "/" });
	$.cookie("themePath", themePath, { expires: 7, path: "/" });
}

Now you are done. But how does it work?

In the head section of the template you should notice that we gave one of the stylesheets an id of ‘bootstrapTheme‘. This link will be modified by the setTheme function in the JavaScript file to dynamically change the theme and save the theme preference to a cookie to load in the future. In the jQuery ready function, we check for the presence of the cookie ‘themeName‘, if present, a call is made to setTheme to load the theme. The theme is changed by clicking on one of theme menu items which, in turn, calls setTheme.

Twitter Bootstrap Resources

Over the past few months, I have built quite a few sites using Twitter Bootstrap. I think it is an awesome framework for styling web sites and abstracts away a lot of the differences in CSS between modern browsers.  I say Twitter Bootstrap did for CSS what jquery did for JavaScript. I typical say that if you use both frameworks in the same site, you site will work pretty consistent against all modern browsers.

Anyway, the purpose of this post was to list all of the Twitter Bootstrap resources that use or find helpful.

Content Delivery Networks | Resource Guides | Tutorials | Themes | Layout Helpers | Visual Studio NuGet Packages | UI Components

Content Delivery Networks (CDN)

Bootstrap CDN http://www.bootstrapcdn.com
Microsoft Ajax CDN http://www.asp.net/ajaxlibrary/cdn.ashx#Bootstrap_Releases_on_the_CDN_14

Resource Guides

The Big Bad Ass List of Twitter Bootstrap Resources http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

Tutorials

Bootstrap Tutorial: A Guide for Beginners https://blog.udemy.com/bootstrap-tutorial-a-guide-for-beginners/

Themes

Bootswatch http://bootswatch.com/
Themes for Bootstrap http://www.themesforbootstrap.com/
jquery-ui for Bootstrap https://github.com/jquery-ui-bootstrap/jquery-ui-bootstrap/
Style Bootstrap http://stylebootstrap.info/
PaintStrap http://paintstrap.com/

Layout Helpers

Bootply http://www.bootply.com
BootUI http://www.bootui.com/
Layoutit http://www.layoutit.com/build

Visual Studio NuGet Packages

As of ASP.NET MVC 5, the File | New templates are already wired for Twitter Bootstrap, just in case, here are a few packages to get you started.

Bootstrap http://www.nuget.org/packages/bootstrap/
AngularJS UI Bootstrap http://www.nuget.org/packages/Angular.UI.Bootstrap/
Bootstrap for MVC 5 http://www.nuget.org/packages/Twitter.Bootstrap.MVC/
Paged List for ASP.NET (Bootstrap) http://www.nuget.org/packages/PagedListExt/
Font Awesome http://www.nuget.org/packages/FontAwesome/

UI Widgets

General Libraries | Buttons | Fonts | Input Widgets | Notification Helpers

General Libraries

Bootstrap Components (for ASP.NET MVC) http://bootstrapcomponents.apphb.com/
Fuel UX http://exacttarget.github.io/fuelux/#

Buttons

Button Builder http://bootsnipp.com/buttons

Fonts

Font Awesome http://fontawesome.io/
Font Custom http://fontcustom.com/

Input Widgets

Bootstrap Form Helpers http://bootstrapformhelpers.com/
Bootstrap Acknowledge Inputs http://averagemarcus.github.com/Bootstrap-AcknowledgeInputs/
Bootstrap Wysiwyg Editor http://mindmup.github.io/bootstrap-wysiwyg/
Bootstrap Validation Helpers http://reactiveraven.github.io/jqBootstrapValidation/
Date Picker http://www.eyecon.ro/bootstrap-datepicker/
Time Picker https://github.com/jdewit/bootstrap-timepicker

Notification Helpers

PNotify http://sciactive.com/pnotify/
%d bloggers like this: