Tag: CSS

Challenge:

Howdy Folks, Sorry for being away from you for so long. But was occupied with lot of other things. But now, I’m here to share my learnings with you.
Before couple of weeks back, I’ve to create one functionality to make user’s task easy. I was clear with back-end code. And to make UI intuitive, I thought to use Bootstrap (If you are new to bootstrap, then I would recommend you to take a moment and give it a read here : http://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29 and http://getbootstrap.com/)
Long story short, Bootstrap is a framework for creating UI more intuitive rapidly! Developed by Twitter champs!
And If you know Bootstrap, you must be knowing that how easy it is to integrate bootstrap with your application. And yes, you are right it is. But while working on it, I found few challenges and learnt something which I thought to share with you!
Let’s go!

Solution:

If you are new to bootstrap, and looking for a way to integrate it with your ASP.NET application, then following are a good read to do so:
If you are using VS 2013 then you don’t have to worry. Because MS guys has integrated bootstrap within it.
http://techcrunch.com/2013/06/27/microsoft-adds-bootstrap-support-to-visual-studio-2013/
http://www.asp.net/visual-studio/overview/2013/creating-web-projects-in-visual-studio#bootstrap
But if you are using VS < 2013 then this posts will surely help you:
http://geekswithblogs.net/JeremyMorgan/archive/2012/09/18/how-to-use-twitter-bootstrap-on-an-asp.net-website.aspx
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms
http://elbruno.com/2013/10/02/vs2013-howto-create-a-website-project-in-visual-studio-using-bootstrap/
So, have you tried it? Looks simple, Correct? Till this point of time, everything was simple. But Life is not as simple as it seems to be!
So here are my learnings:

1. Dismissable alerts : When I tried to use it (http://getbootstrap.com/components/#alerts-dismissable). It didn’t worked. Then figured out that it needs Jquery reference on a page. So, If you are facing same challenge, give it a try! Or if you are going to use first time, don’t do such mistake 🙂
2. Modal : The default example of Modal given in documentation, didn’t worked for me. Then this tutorial helped me : http://www.w3resource.com/twitter-bootstrap/modals-tutorial.php
3. Width of Modal Dialog : If you would like to change width of a modal dialog then here’s a way to do it: http://stackoverflow.com/questions/10169432/how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box
4. RequiredFieldValidation and Validation and State : Wanted to apply styling as shown here: http://getbootstrap.com/css/#forms-control-validation

Initially tried with RequiredFieldValidator. But due to it’s complexity avoided doing so. Then used CustomValidator, Here’s how ClientValidationFunction function looks like:
[sourcecode language=”javascript”]
function ValidateALTText(oSrc, args) {
var isValid = false;
// label label-warning
isValid = args.Value.trim();
if (isValid) {
$("#" + oSrc.id).prev(".form-control").parent().removeClass("has-error");
}
else {
$("#" + oSrc.id).prev(".form-control").parent().addClass("has-error");
}
args.IsValid = isValid;
}
[/sourcecode]

1. Jquery Plugins : Cool, Jquey Plugins which has been designed to use with Bootstrap
   1. Wizard : Would like to create Wizard? http://vadimg.com/twitter-bootstrap-wizard-example/
   2. Confirm, Alert, Custom Dialog : If you would like to take a confirmation from user before doing postback then go for http://bootboxjs.com and if you are facing issue while showing confirmation box and doing postback then this thread will surely help you : http://stackoverflow.com/questions/20389205/bootbox-with-jquery-and-bootstrap-with-a-net-page-no-working/21433099#21433099
   3. FileStyle : Change look and feel of your file input box : http://markusslima.github.io/bootstrap-filestyle/

Found it useful? You have your own set of learnings? Why don’t you share it with all of us?
Happy Bootstraping! 🙂
Good reads:

1. Twitter Bootstrap Tutorial : http://www.w3resource.com/twitter-bootstrap/tutorial.php
2. The original list of resources and plugins for Bootstrap : http://bootsnipp.com/resources