Can't See Design Tab In Visual Studio Community 2017 For Mac

By Bill Hatfield | Email Print

Bootstrap is a popular approach for standardizing how style is done for both desktop and mobile websites. But getting started can be confusing. In this article, you’ll find out how to get up and running with Bootstrap using Microsoft Visual Studio Community 2015 Edition (VSCE), a free version of Microsoft’s flagship development environment. (If you aren’t already familiar with VSCE, see “Getting a Free, Yet Powerful Web Dev Tool: Visual Studio Community 2015 Edition” to learn how to download and install it.) After that, you’ll see how to apply Bootstrap to an existing site to make it pop.

Bootstrap is a very popular, free, open-source framework for styling your website. It consists of CSS and JavaScript components and it implements a host of best practices and modern design guidelines.

Bootstrap isn’t difficult to understand, but there are a few concepts to master that will help you take advantage of all it has to offer. By the end of this article you’ll be ready to begin taking your sites to the next level.

First you need Visual Studio Community 2015 Edition. Next, you need to create a project in Visual Studio. Just start Visual Studio and from the menus choose File / New Project (or hit Ctrl+Shift+N).

Double-click on a XAML file to launch the Previewer in Xamarin Studio or Visual Studio for Mac. You should see a split view with your XAML on the left and a preview on the right: If you don’t see the design surface on the right, press the Preview button at the top right of the text editor to toggle the Previewer.

Along the left, under Templates, open Visual C# and click on Web. Now click to select ASP.NET Web Application. Give the project a name at the bottom and click OK.

A second dialog appears asking for more specifics on the kind of Web application you want to create.

From here, you can select from among a number of different kinds of Web application styles including Web Forms, MVC, etc. Each of these application approaches provide different capabilities to accelerate you development, whatever project entails.

Because we’ll be using simple HTML/JavaScript, go ahead and click Empty. We’ll just add pages as we need them.

Click OK.

You may or may not see this dialog appear.

This dialog is a reminder that Microsoft Azure is a cloud computing platform that provides a whole lot of features and capabilities for hosting, maintaining and monitoring your site’s health. Its tight integration with Visual Studio makes it a very good option for many developers. If you’re interested in investigating Microsoft Azure further, you can get a free trial at http://azure.microsoft.com/en-us/pricing/free-trial/. You can also learn more about hosting your website on Azure by reading “So you want to Build and Deploy a Web App to the Cloud – at low-to-no cost”

For our purposes now, go ahead and click the No thanks… option under the Sign In button. Your project will be created and you’re ready to begin.

Next, you’ll need Bootstrap itself. And thanks to Visual Studio’s NuGet Package Manager, the process is a snap.

In Solution Explorer on the right, click to select your project name (it should be the second from the top, under the solution name). Now from the menus select Project / Manage NuGet Packages…

When the new tab appears. It retrieves a list of NuGet packages available. When the list appears, click the search textbox in the upper-right and enter bootstrap. Your results will look something like this.

Click to select bootstrap and then click the Install button. Visual Studio now downloads Bootstrap, extracts it and installs the CSS, JavaScript and font files in your project. Now at the top of the tab, choose click the Filter dropdown and choose Installed left of the dialog.

Here you see that Bootstrap has installed and one other thing – jQuery. Why? One of the things Visual Studio did when you requested Bootstrap’s installation is to look to see if Bootstrap depended on any other libraries. In this case it required jQuery. So it first installed jQuery and then installed Bootstrap. NuGet packages are available for virtually any library you’re likely to need.

As you can see Visual Studio’s NuGet Package Manager makes an otherwise time-consuming and error-prone process as quick and simple as a search and a click.

In Solution Explorer, notice the new folders in your project.

When you open up Content, fonts, and Scripts, you’ll see all the files that were added for Bootstrap. You don’t need to do anything with these files except reference the ones you need in your pages.

Visual Studio

Can't See Design Tab In Visual Studio Community 2017 For Mac

Can't See Design Tab In Visual Studio Community 2017 For Mac Free Download