Bootstrap

CREATING A BOOTSTRAP ENABLED PAGE

Regardless of the editor you choose, and you can use any editor you like, the steps to add Bootstrap to a page are similar.

  1. Obtain the necessary files
    To add Bootstrap to a page, you’ll need to obtain the CSS, glyphicons, and JavaScript files from getbootstrap.com. These files are available in a single zip file, which can be extracted to the folder you’ll store your HTML pages in. By default, the folders inside of the zip file are titled cssfontsand js. While you can keep these folder names, I like to rename css to Styles, and js to Scripts.
    In addition, the Bootstrap JavaScript library requires jQuery. You can obtain jQuery from www.jquery.com. The only file you’ll need is the minified, production file. You can add this to the Styles folder.
  2. Create an HTML page and add the necessary references
    After creating an HTML page, you need to reference the following files:

    1. 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 Stylesto the name you chose. (In addition, you could use a content delivery network (CDN)).
      <link rel=’stylesheet’ href=’./Styles/bootstrap.min.css’ />
    2. Inside the bodysection, typically at the bottom, you need to reference two JavaScript files, jQuery and Bootstrap. The files must be referenced in that order. As before, you will need to update the folder name Scripts to the name you chose. The name of the jQuery file may also be different as the version of jQuery changes over time. Finally, you could also use a CDN to serve the necessary files.
      /Scripts/jquery-2.1.4.min.js
      /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.

 

 

BOOTSTRAP THEMES

One of Bootstrap’s greatest strengths is its community. There are countless developers that use Bootstrap for their websites, and many who have contributed to the project. This comes in the form of contributions straight to the project itself, which is available on GitHub, or by creating extensions or themes.

Themes are pre-built CSS files that contain the necessary markup to change the structure and color scheme. What’s nice about Bootstrap themes is they use the same classes as Bootstrap, meaning that you can change to a new theme simply by replacing the CSS file you’re already using with the one you’ve obtained.

A quick Bing search will reveal several places you can find Bootstrap themes. One popular location is Bootswatch. Once you find the theme you wish to use, all you need to do is download the CSS files (don’t forget the minified version!), and replace the default ones you were already using.

It’s important to note that if you wish to build your own theme, or to modify a theme that you’ve obtained, that the layout and color scheme provided by Bootstrap is based on CSS. Bootstrap uses CSS for its style and responsive UI. This means you can always override the default layout provided by Bootstrap by using normal CSS application rules. CSS’s priority scheme uses a “last-write wins” method, meaning that if you either reference a custom CSS file or provide inline CSS, knowing that the

You can create your own CSS file, and reference it in an HTML page after the default Bootstrap file. Let’s say you created a file named custom.min.css, and added the following markup.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s