Less is a style sheet language that helps overcome some of the complexities and shortcomings with CSS, and is converted into CSS that browsers can use. Bootstrap uses it because the Less is converted to CSS, developers using Bootstrap do not need to be familiar with Less. However, knowing Less can make customizing sites easier.
Bootstrap offers web developers many advantages. It makes it easier to layout pages without the use of tables. It simplifies CSS, as the bulk of the functionality you look for as a developer is already built for you, and frequently only requires the addition of classes to HTML elements, and a bit of structure.
There are several tools that make development with Bootstrap even easier. Visual Studio has IntelliSense for Bootstrap, which offers autocompletion of the different classes. You can also download a set of snippets for Visual Studio, which allows you to create complex Bootstrap structures with just a couple of clicks of the mouse.
CREATING A BOOTSTRAP ENABLED PAGE
I assume that you are familiar with HTML(Hyper Text Markup Language) already and also CSS. As you can edit or create HTML with any text editor Bootstrap is also like that. But first you need to add necessary file references in HTML like CSS.
Regardless of the editor you choose, and you can use any editor you like, the steps to add Bootstrap to a page are similar.
- Otain the necessary files
- Create an HTML page and add the necessary references
After creating an HTML page, you need to reference the following files:
- Inside the head section, create a reference to bootstrap.min.css. Sample HTML for creating the reference is provided below. Remember, if your CSS file is in a different folder, you will need to update the folder name Styles to the name you chose. (In addition, you could use a content delivery network (CDN)).
<link rel='stylesheet' href='./Styles/bootstrap.min.css' />
/Scripts/jquery-2.1.4.min.js and /Scripts/bootstrap.min.js
When referencing script or CSS files, best practice is to use the minified versions of the files, typically identified with the letters min in the name. Minified files don’t contain line breaks, spaces, or other components that make the scripts human readable, things which browsers don’t need. By using the minified versions, you minimize the amount of data sent to the client, which will improve the rendering speed of the page.
On the next post we will continue with bootstrap classes and work with a page design practically.