Developing responsive web sites have become very easy thanks to Bootstrap. It's an open-source HTML, CSS and JavaScript framework . Before you start a project you will only need to add the Bootstrap references. If you are using the latest Bootstrap version, to get the optimal results, it is best that you also use the latest jQuery libraries. This is because some components do not work in the old jQuery libraries.( http://getbootstrap.com/).
Font Awesome is a set of icons specially designed for websites and applications. It contains its own style sheet as well. It is also compatible with screen readers, vectors and icons and can be scaled to any size.(http://fortawesome.github.io/Font-Awesome/).
When you manually download various packages and install them for development purposes various problems can develop. These problems can easily be avoided by using the package manager NuGet.
The package manager NuGet will allow you to very simply add or remove various packages in your project without any conflicts. You will only need to select what the project is. Thereafter by using NuGet, with a single command line you can install other packages for your project (https://www.nuget.org/packages).
- Install-Package jQuery
- Install-Package Bootstrap
The biggest advantage to Nuget is it manages dependencies when it's installing. Before installing other packages NuGet will see whether there are dependencies and will automatically download and install those packages as well. NuGet also supports conflict management, therefore if 2 packages depends on various versions of a similar package, NuGet will identify the correct one and will install only that one.
Step 1
Open Visual Studio and go to New Projects under the Visual C# category and select web and select MVC 4 Web Application.
Then select Intranet Application.
Step 2
Go to project Properties and then first click the web tab and then click on the checked specific port check box and then enter the specific port number of the website necessary to run.
Step 3
After opening the project, then go to the Packager Manager Console and enter the following commands:
- Install-Package jQuery
- Install-Package Bootstrap
- Install-Package FontAwesome
Check the Scripts and Content folder to see whether the installed files are now there.
Step 4
Thereafter add the newly installed CSS and JavaScript references to the “BundleConfig.cs” file.
Now you are ready to develop a new interactive responsive web site!
(Important: add the following line to your _Layout page <head> tag. Without that line you will not able to see the responsiveness in mobile devices.
- <meta name="viewport" content="width=device-width" />)
Step 5
To the _Layout page add the following code (the source code is attached below). Normally when you add something into the _Layout page it will inherit all other pages as well.
Step 6
To an Index page add the following code (the source code is attached below).
Step 7
Then run the project.
No comments:
Post a Comment