| Table of Contents | ||||
|---|---|---|---|---|
|
...
Many Bootstrap components are classes that can be used by means of the div tag. These include, for example, the container, jumbotron, alert, progress bar, spinner, card, flexbox, media, and grid system row and column classes. Check out all of these components in the W3 School tutorial or Bootstrap’s own overview. We provide one example to illustrate the use of the div predicate. The following code would generate a Jumbotron element:
| Code Block |
|---|
div(Content, 'jumbotron jumbotron-fluid px-3', 'text-align:center', Html) |
Of course, this only works if you add another query (or queries) to generate the Content for this Jumbotron. To add couple of lines of formatted text (a large title head and a paragraph), we could use the following code for creating a complete Jumbotron element with some text as a simple example:
| Code Block |
|---|
atomic_list_concat([
'<h3>Introduction</h3>',
'<p>You are about to interact with our conversational agent <b>YourAgentName</b>.'],
Content),
div(Content, 'jumbotron jumbotron-fluid px-3', 'text-align:center', Html) |
The first query, using the built-in predicate atomic_list_concat/2 generates HTML code that consists of the two HTML elements of a h3 heading following by a paragraph. These elements are just simply quoted each (remember to always use single quotes!) and put in that order in a Prolog list [...]. The atomic_list_concat/2 predicate then returns a new atom that is the concatentiation of these two elements in the output argument Content. This (quoted) HTML code then is passed on to the div/4 query in its first input argument (using the same variable name) to embed it in the Jumbotron element. The resulting HTML code looks like:
| Code Block |
|---|
<div class="jumbotron jumbotron-fluid px-3" style="text-align:center">
<h3>Introduction</h3>
<p>You are about to interact with our conversational agent <b>YourAgentName</b>.</p>
</div> |
span tag
The span tag is an inline element that is commonly used to style HTML content. We have added a span/3 predicate span(Content, Style, Html) that just does that and nothing else. An example of a span tag that can be useful is to style the content and change the font family that is used within some HTML content:
...
By means of these and generate with the rule. The HTML code is represented in Bootstrap format, which is also clearly illustrated by examples below or on Bootstrap's documentation website (Bootstrap Documentation).
| Note |
|---|
Prolog Advice: To manipulate strings and atoms in Prolog it is useful to look at documentation of the following built-in functions: atomic_list_concat, atom_concat, string_concat, append, and maplist here: https://www.swi-prolog.org/. The predicate applyTemplate is a defined predicate that will be explained below. |
...