Using the Splunk Web Framework CSS

So far in this chapter, we have imported an external CSS Theme and have been working on our own external CSS file to create and manipulate the style rules of our HTML code. A lot of the work is already done for us though, as Splunk comes with CSS built into the web framework to allow web developers with knowledge of well-known frameworks to start building within the Splunk Web Framework easily and quickly.

One of the most well known of these frameworks is Bootstrap and as we have discussed previously, it comes with our Splunk environment installation. Bootstrap is a free frontend framework that allows fast and easy web development and includes HTML and CSS-based design templates for a large range of elements, including buttons, tables, forms, navigation, fonts, images, and many more. It also includes JavaScript plugins to provide further functionality.

In the next part of this chapter, we will continue to work with our raw dashboard and utilize some of the features that Bootstrap provides us. Hopefully you will see that it is easy to use, has a load of features, and is compatible with most modern web browsers. By using a framework that has already been established, you will see that it allows us to implement these features more rapidly than sorting our code by ourselves.

In our work, we have been linking our dashboard HTML code to the version of Bootstrap that we have installed as part of our Splunk installation. If we wanted the most up-to-date version, we could download it directly and install it into our static directory, as we have been doing so far with our external CSS files. The latest version can be downloaded from http://getbootstrap.com.

Instead of having to download this file and update every time there is a change, we can point to the content delivery network for Bootstrap, which would be similar to the following URL: http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css.

For a full list of features and documentation on Bootstrap for a specific version, go to the main website at the following location, replacing the Word version with the version of Bootstrap you are using: http://getbootstrap.com/<version>/index.html.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.121.160