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