Sidebar Blocks
A sidebar is a short piece of text presented outside the narrative flow of the main text. The sidebar is normally presented inside a bordered box to set it apart from the main text.
.An Example Sidebar ************************************************ Any AsciiDoc SectionBody element (apart from SidebarBlocks) can be placed inside a sidebar. ************************************************
Renders:
You may also used the attribute role to control padding and rounded corners.
With role set to value well-small Bootstrap 2, or well-sm Bootstrap 3
.An Example Sidebar [role="well-small"] **** Any AsciiDoc SectionBody element (apart from SidebarBlocks) can be placed inside a sidebar. ****
Renders:
With role set to value well-large Bootstrap 2, or well-lg Bootstrap 3
.An Example Sidebar [role="well-large"] **** Any AsciiDoc SectionBody element (apart from SidebarBlocks) can be placed inside a sidebar. ****
Renders:
Open Blocks
Open blocks are special: they are used to generate document abstracts, book part introductions and more.
Here we will used it to display a very simple two columns layout.
For demonstration purpose only, and to understand where are the visual limit of open block, we used these css rules :
.openblock {
border: 1px dashed;
height: 300px;
background-color: #fff;
padding: 0.2em;
}
.A side intro title -- *The main title* And the content, what could be whatever you want: table, image, listing, ... --
Renders:
The main title
And the content, what could be whatever you want: table, image, listing, …
Design under control
A bit ugly, but may be improved with css rules. Set a CSS class (timeline for example)
to the role attribute, with following definitions :
.timeline > .title {
background-color: blue;
color: white;
padding: 20px 20px;
text-align: center;
margin: 0;
}
.timeline > .content {
padding: 40px 20px;
}
.timeline > .content > p > strong {
font-size: 30px;
color: navy;
}
[role="timeline"] .A side intro title -- *The main title* And the content, what could be whatever you want: table, image, listing, ... --
Renders:
The main title
And the content, what could be whatever you want: table, image, listing, …
Choose side of main content
You can also change the side of intro title (default is left), by adding
the halign attribute with right value.
[role="timeline",halign="right"] .A side intro title -- *The main title* And the content, what could be whatever you want: table, image, listing, ... --
Renders:
The main title
And the content, what could be whatever you want: table, image, listing, …
Width of two columns
You can control width of both columns with the cols attribute.
Default values are 3,9. That means col-md-3 or span3 for intro title,
and col-md-9 or span9 for main content.
[role="timeline",halign="left",cols="4,8"] .A side intro title -- *The main title* And the content, what could be whatever you want: table, image, listing, ... --
Renders:
The main title
And the content, what could be whatever you want: table, image, listing, …
Blog signature
On blog, we used also a signature to identify origin of an article and its author.
Optional attributes citetitle and attribution are there for that.
[role="timeline",citetitle="from http://example.com",attribution="Author's name"] .A side intro title -- *The main title* And the content, what could be whatever you want: table, image, listing, ... --
Renders:
The main title
And the content, what could be whatever you want: table, image, listing, …
— Author's name
Visit our expo for other concrete examples.
About this document
How to build the source code
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/master/docs/delimited-blocks.asciidoc]
.