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.
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.
Figure 1
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.
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.
Figure 4
Text and Image Manipulation using Bootstrap
In Figure 5, you’ll see some good examples of Bootstrap for text and image manipulation:
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.
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.
Figure 7
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.