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 “” 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. What Exactly is Bootstrap?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.

• Icons For Visual Studio

Getting Started with Visual StudioFirst 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).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. About Microsoft AzureYou 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. You can also learn more about hosting your website on Azure by reading “ ”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. Getting Started with BootstrapNext, 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 PackagesWhen 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. 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.

NoteWhile images are used in the menu system, you should not create an icon for every command. Consult to see whether your command should get an icon.Thumbnails.

Images used in the preview area of a dialog, such as the New Project dialog.Dialog images. Images that appear in dialogs or wizards, either as descriptive graphics or message indicators. Use infrequently and only when necessary to illustrate a difficult concept or gain the user's attention (alert, warning).Animated images. Used in progress indicators, status bars, and operation dialogs.Cursors.

Icons For Visual Studio

Used to indicate whether an operation is allowed using the mouse, where an object may be dropped, and so on.Icon design OverviewVisual Studio uses modern-style icons, which have clean geometry and a 50/50 balance of positive/negative (light/dark), and use direct, understandable metaphors. Crucial icon design points center around clarity, simplification, and context.Clarity: focus on the core metaphor that gives an icon its meaning and individuality.Simplification: reduce the icon to its core meaning - get the theme across with just the necessary element(s) and no frills.Context: consider all aspects of an icon's role during concept development, which is crucial when deciding which elements constitute the icon's core metaphor.With icons, there are a number of design points to avoid:.Don't use icons that signify UI elements except when appropriate. Choose a more abstract or symbolic approach when the UI element is neither common, evident, nor unique.Don't overuse common elements like documents, folders, arrows, and the magnifying glass.

Use such elements only when essential to the icon's meaning. For example, the right-facing magnifying glass should indicate only Search, Browse, and Find.Although some legacy icon elements maintain the use of perspective, don't create new icons with perspective unless the element lacks clarity without it.Don't cram too much information into an icon. A simple image that can be easily recognized or learned as a recognizable symbol is much more useful than an overly complex image. An icon cannot tell the whole story.Icon creation Concept developmentVisual Studio has within its UI a wide variety of icon types.

Carefully consider the icon type during development. Don't use unclear or uncommon UI objects for your icon elements.

Opt for the symbolic in these cases, such as with the Smart Tag icon. Note that the meaning of the abstract tag on the left is more obvious than the vague, UI-based version on the right:Correct use of symbolic imageryIncorrect use of symbolic imageryThere are instances in which standard, easily recognizable UI elements do work well for icons. Add Window is one such example:Correct UI element in an iconIncorrect UI element in an iconDon't use a document as a base element unless it is essential to the icon's meaning. Without the document element on Add Document (below) the meaning is lost, whereas with Refresh the document element is unnecessary to communicate the meaning.Correct use of document iconIncorrect use of document iconThe concept of 'show' should be represented by the icon which best illustrates what is being shown, such as with the Show All Files example. A lens metaphor may be used to indicate the concept of 'view' if necessary, such as with the Resource View example.' Show'View'The right-facing magnifying glass icon should represent only Search, Find, and Browse.

The left-facing variant with the plus sign or minus sign should represent only zoom in/zoom out.' Search'Zoom'In tree views, do not use both the folder icon and a modifier.

When available, use only the modifier.Correct tree view iconsIncorrect tree view iconsStyle details LayoutStack elements as shown for standard 16x16 icons:Layout stack for 16x16 iconsStatus notification elements are better used as standalone icons. There are contexts, however, in which a notification should be stacked on the base element, such as with the Task Complete icon:Standalone notification iconsTask Complete iconProject icons are typically.ico files that contain multiple sizes. Most 16x16 icons contain the same elements.

The 32x32 versions have more details, including the project type when applicable.VB Windows Control Library Project icons, 16x16 and 32x32Center an icon within its pixel frame. If that is not possible, align the icon to the top and/or right of the frame.Icon centered within the pixel frameIcon aligned to the top right of the frameIcon centered and aligned to the top of the frameTo achieve ideal alignment and balance, avoid obstructing the icon's base element with action glyphs. Place the glyph near the top left of the base element. When adding an additional element, consider the alignment and balance of the icon.Correct alignment and balanceIncorrect alignment and balanceEnsure size parity for icons that share elements and are used in sets. Note that in the incorrect pairing, the circle and arrow are oversized and don't match.Correct size parityIncorrect size parityUse consistent line and visual weights.

Evaluate how the icon you are building compares to other icons by using a side-by-side comparison. Never use the entire 16x16 frame, use 15x15 or smaller. The negative-to-positive (dark-to-light) ratio should be 50/50.Correct negative-to-positive ratioIncorrect negative-to-positive ratioUse simple, comparable shapes and complementary angles to build your elements without sacrificing element integrity. Use 45째 or 90째 angles where possible.PerspectiveKeep the icon clear and understandable. Use perspective and a light source only when necessary.

Although using perspective on icon elements should be avoided, some elements are unrecognizable without it. In such cases, a stylized perspective communicates the element's clarity.3-point perspective1-point perspectiveMost elements should be facing or angled to the right:Use light sources only when adding necessary clarity to an object.Correct light sourceIncorrect light sourceUse outlines only to enhance legibility or to better communicate the metaphor.