JQuery and Bootstrap 3

Saturday, January 18, 2014

File new project, empty asp.net web application


Add a folder and inside add an html file


Add a stylesheet to the folder


Add this styling to the stylesheet


Add this markup to the html page


Right click in the page and select view in browser


View a standard html page with no styling, the default


Download bootstrap 3 from the web site


Right click the project and select manage nuget packages


Search for bootstrap and install it


Bootstrap is installed, click close


Open the content folder and view bootstrap style sheets


Grab the bootstrap.min and drag it above the custom style sheet in the head section


Refresh the page and view that the only effect is that the labels are bold and a border around the button


Add a div and these classes to the name label and textbox


Now it looks more like bootstrap, since bootstrap is mobile first, it is responsive


Resize the window the texbox stay perfectly aligned, perfectly centered


Wrap all labels and textboxes in div form-group and add class form-control to the textboxes, remove the line breaks


Wrap the checkboxes in div with the class checkbox


Add a div with class radio around the radio buttons and btn btn-primary class to the submit button


Refresh the page, now the form is the default bootstrap form, a totally responsive from, well styled


Add these classes to the form, label and textbox for styling


Save the page and refresh the browser, view the result


Reduce the window horizontally, the texbox is positioned beneath the label


Wrap every group of elements in a div with this class


Refresh the page and view the styling with an offset of two


Reduce the window to smart phone size, view the vertical alignment


2 column layout, add a div and wrap the form tag in a div


Add this css with id identifiers


Refresh the page and view the result


Navigate to bootstrap site and click on javascript


Click on modal link


Copy this code, where the three dots are is where the form will be inserted


Paste the code into the body, paste the form into the div with the class modal-body


Add a reference to jquery and bootstrap js files in the head section


Hit the run button


Click the launch button


View the form in the modal dialog box


From the bootstrap home page navigate to the css section


Click on forms


Default Success Warning Important Info Inverse
B S W I ? O