How to Use The Bootstrap Framework Part 1

Share on FacebookTweet about this on TwitterShare on LinkedInGoogle+

Share on FacebookTweet about this on TwitterShare on LinkedInGoogle+

Bootstrap is an open-source framework that combines HTML, CSS, and JavaScript code to help developers build web applications. Bootstrap can be used for desktop and mobile development. There are built-in capabilities that automatically resize an application making it a smooth process to go from a website to a mobile app. With Bootstrap, a developer can have access to built-in layouts, shaping of text and images, colors, themes, buttons, menus, etc . The user interfaces are easy to use and build using Bootstrap. I have created a simple application that uses ColdFusion for data manipulation and Bootstrap for the user interface features.

segue-blog-bootstrap-framework-part1

 

Below I have a home page with some different features of Bootstrap that I will be explaining. In order to integrate Bootstrap into this application, I added the lines of code in thetag the code shown in lines #4 through #7 in Figure 2. The top bar of the page is a navigation bar. It is created by using the code on line #11 in Figure 2.

Basic Bootstrap Examples

Figure 1

Code to integrate bootstrap into an application

Figure 2

Lines #18 through #21show each file that will be used to navigate to the links in the navigation bar. The “Beginner Bootstrap Website” link will take the user back to the home page. The “Table Page” link, will take the user to the Table page shown in Figure 3.

Table in Bootstrap

Figure 3

To create the table in Figure 3, I used some features of Bootstrap to highlight data based on a certain criteria. First, in line #11 of the code in Figure 4, it shows how to set up the table. In order to add a striped table with a border, you would set the class to “table-striped table-bordered”. I also highlight the price values in red or green depending on the amount. If you look at line #23, I’m setting the highlight color to “danger” if the price is over $200,000, which is a built-in Bootstrap feature for the color red. If the price is under $500, I’m setting the highlight color to “success”, which is green. There are other features like these that can be easily used with Bootstrap.

Code for creating tables in Bootstrap

Figure 4

Text and Image Manipulation using Bootstrap

In Figure 5, you’ll see some good examples of Bootstrap for text and image manipulation:

Text and Image Manipulation in Bootstrap

Figure 5

If data is being returned from a database, it can easily be set to all lowercase, uppercase, or capitalized. There are functions that can do this in the query but I will show how it can be done using Bootstrap. Lines #6 through #14, show some features for text manipulation. Again, the “text-success” class can be used to set the font to green. For case manipulation, use “text-lowercase”, “text-uppercase” etc.

Another cool feature is to use to strikethrough a sentence or value. For online user guides or manuals, the keyboard short cut features can be used to give the reader a visual for instructions, shown in Figure 5. The code for this is shown in line #18 in Figure 6. The tags are used to create a keyboard shortcut image in your text to show the user certain key press instructions.

I have also added a Segue image that I was able to easily change to be a rounded, circular, or thumbnail version while using the exact same image just using different Bootstrap classes. At the bottom of the home page, I created a simple dropdown toggle menu to show how easily this could be done using Bootstrap by using the “dropdown toggle” class, shown in line #30 of the code. This drop down will open a new browser tab for the Segue Technologies or Bootstrap websites.

The code for line #18

Figure 6

Bootstrap has a lot of features that can be easily implemented on a site. Figure 7 shows a Bootstrap tab menu. I have created a tab menu with three pages: Home, Artists, and Orders. In order to create a tab menu, the “nav nav-tabs” class is used. I have set up the “tab-content” files in lines #7 through #17.  The script tag at the bottom of the file will be triggered by the JavaScript “click” event which will then set which tab to show when one is clicked.

Bootstrap Tab Menu

Figure 7

Code for Bootstrap Tab Menu

Figure 8

In my next blog, How to Use The Bootstrap Framework Part 2, I will be discussing the Grid Page, Form Page, and some other features of this sample website.

Need Help? Contact us