Hello!
For today’s post I hope that the 3G network works fine in the train; specially when I need to download the NuGet package.
How to create a WebSite project in Visual Studio 2012 or 2013 including Bootstrap
First one: do you know Bootstrap? If you don’t, you should !
Bootstrap is a framework created by Twitter to create interfaces and responsive website based on HTML5 and CSS3.
As that’s it, basically is a zip file which has a couple of .css and. js files. The most common way to get this package is access to the site of Bootstrap and click Download Bootstrap .
The zip has everything you need to create a website taking advantage of the features offered by Bootstrap. However there are other more elegant way of doing this.
1 Create a website with Visual Studio 2012 or 2013. For this example I’ve hidden the local path and I put name to the site “BootstrapSample”
This action creates a clean website
2 Add an HTML page and call it index.html
3 Add the following code to the page
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title></title>
5: </head>
6: <body>
7: <div>
8: <h1>Title A</h1>
9: <p>
10: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
11: </p>
12: </div>
13: <div>
14: <h1>Title B</h1>
15: <p>
16: Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
17: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
18: </p>
19: </div>
20: <div>
21: <h1>Title C</h1>
22: <p>
23: Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
24: Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
25: </p>
26: </div>
27: </body>
28: </html>
Note: ‘ve put for example a poem in latin of my authorship.
4. If we navigate the page will see the following
Incredible, we have created a simple HTML and ZERO RESPONSIVE page!
5. Then add elements that possesses Bootstrap our website to take advantage of it. In the project we deploy the context menu, select the option “Manage NuGet Packages” and seek by Bootstrap. We select the right and click on “Install”.
Big stuff: Bootstrap is Twitter and is pretty obvious in the search results that 1 is not a product of Twitter but… well someone. Beware that you add to your project.
6. Once added the elements of this package our project already has the necessary elements to work with Bootstrap.
Update: the next step is not valid, Bootstrap 3.0 is responsive by default.
7. A detail I saw when I downloaded this pkg is not containing the file “bootstrap-responsive.css” which is which has the styles in responsive mode. We add a file with this name to the project and get the content fromhttp://getbootstrap.com/2.3.2/assets/css/bootstrap.css
8. Now it is to edit the page so it take advantage of some features of Bootstrap. We modify the code to take account of the following
-lines 6, add references to the Bootstrap CSS
-line 10 Add a general DIV to hold the entire contents of the page with the “container” class. This div Add margins to content and adjust it automatically.
-line 11, add a new DIV with the class “row – fluid” that is what contains 3 sections with the content of the page
-line 12, in each DIV put the “col-md-4” class to identify it. (in another post explain how bootstrap mode GRID works or if you want you can see the official help here ))
1: <!DOCTYPE html>
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <title></title>
5: <meta name="viewport" content="width=device-width, initial-scale=1.0">
6: <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">
7: <link href="Content/bootstrap/bootstrap-responsive.css" rel="stylesheet">
8: </head>
9: <body>
10: <div class="container">
11: <div class="row">
12: <div class="col-md-4">
13: <h1>Title A</h1>
14: <p>
15: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
16: </p>
17: </div>
18: <div class="col-md-4">
19: <h1>Title B</h1>
20: <p>
21: Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
22: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
23: </p>
24: </div>
25: <div class="col-md-4">
26: <h1>Title C</h1>
27: <p>
28: Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
29: Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.
30: </p>
31: </div>
32: </div>
33: </div>
34: <script src="scripts/jquery-1.9.1.js"></script>
1:
2: <script src="scripts/bootstrap.js">
</script>
35: </body>
36: </html>
9 Ready!
If we navigate to the page and change the size of it would see something similar to this
In the next post I comment on something else already going to ASP.Net MVC projects and stuff because my level off!
References: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
Greetings @ La Finca
El Bruno
El Bruno 
Hola!
Me gustaría hacerte una consulta.
Estoy interesada en el TFS
Pero utilizado Visual Studio. VB WinForms + Visual WebGui
el TFS será igual de aplicable?
Gracias.
LikeLike
Hola, pues si > en ese scenario podrías utilizar TFS sin problemas !!!
saludos
LikeLike
Hi Bruno
Great post!
But I think you are in a slight mistake with the bootstrap versions. The current version is 3 (the version that you have downloaded from Nuget in the first step), but later you have downloaded a file (bootstrap-responsive.css) from the version 2.3.2. These file is not neccessary because in version 3, bootstrap is responsive by default. In fact, in your next post you have used the “span” class that does not exist in version 3. I think that you have mixed both versions.
If it is I who is wrong, forgive and delete forever my comment 😦
Sorry for my english… si quieres el día que nos veamos te lo cuento en persona 🙂
LikeLike
Cool cool cool !! best part “… in version 3, bootstrap is responsive by default …”
I didn’t know this, I’m use to use the spanX class, and I didn’t find this one in the latest release.
Thanks for the information, I’ll check the documentation for version 3 and update the posts !!!
Regards
LikeLike
Now, bootstrap is responsive and fluid (percent size) by default, personally, I was more happy before with the span classes but now you have to use the new col- classes. If you don’t want to be responsive, you will use only the col-x classes that are not affected by media queries. Anyway, now is flat, so I will use bootstrap 3 🙂 (I’m very simple and flat is enough reason for me).
LikeLike
Hola luis
LikeLike
good nice
LikeLike
terrible, your code goes over the page margins?????? what are you doing here
LikeLike
OMG My code goes out of the page margins ! In post created 3 years ago … 😉
WP evolved a lot during this time, sadly the plugin I’ve used to paste code, does not evolve 😦
Thanks for the clarification
Regards
-Bruno
LikeLike