diff --git a/sample/accordion.dita b/sample/accordion.dita index c740707b..db69fba3 100644 --- a/sample/accordion.dita +++ b/sample/accordion.dita @@ -1,5 +1,4 @@ - + Accordion Build vertically collapsing accordions in combination with Bootstrap’s Collapse JavaScript @@ -20,6 +20,8 @@ outputclass bodydiv + accordion + accordion-item @@ -32,13 +34,13 @@ format="html" scope="external" >collapse internally to make it collapsible. To render an accordion that’s expanded, add - outputclass="show" to expand the relevant section .

+ open="yes" to expand the relevant accordion-item .

Example

Click the accordions below to expand/collapse the accordion content.

- +
Accordion Item #1 @@ -66,7 +68,10 @@
- <bodydiv outputclass="accordion"> + +
+ <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="accordion"> <section id="accordion1" outputclass="show"> <title>Accordion Item #1</title> <p> @@ -98,47 +103,91 @@ </p> </section> </bodydiv> +
+
+ Specialization + <accordion> + <accordion-item id="accordion1" open="yes"> + <title>Accordion Item #1</title> + <p> + <b>This is the first item’s accordion body.</b> It is shown by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding Bootstrap’s default + variables. + </p> + </accordion-item> + <accordion-item id="accordion2"> + <title>Accordion Item #2</title> + <p> + <b>This is the second item’s accordion body.</b> It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding Bootstrap’s default + variables. + </p> + </accordion-item> + <accordion-item id="accordion3"> + <title>Accordion Item #3</title> + <p> + <b>This is the third item’s accordion body.</b> It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding Bootstrap’s default + variables. + </p> + </accordion-item> +</accordion> +
+
Flush -

Add outputclass="accordion-flush" to remove the default +

Set flush="yes" to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

- +
Accordion Item #1

- Placeholder content for this accordion, which is intended to demonstrate outputclass="accordion-flush". + Placeholder content for this accordion, which is intended to demonstrate the use of flush This is the first item's accordion body.

Accordion Item #2 -

Placeholder content for this accordion, which is intended to demonstrate outputclass="accordion-flush". +

Placeholder content for this accordion, which is intended to demonstrate the use of flush This is the second item's accordion body. Let's imagine this being filled with some actual content.

Accordion Item #3

- Placeholder content for this accordion, which is intended to demonstrate outputclass="accordion-flush". + Placeholder content for this accordion, which is intended to demonstrate the use of flush This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

 - <bodydiv outputclass="accordion-flush"> + +
+ <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="accordion-flush"> ...etc -<bodydiv> +</bodydiv> +
+
+ Specialization + <accordion flush="yes"> + ...etc +</accordion> +
+
Always open -

Set bodydiv outputclass="accordion-open" to make accordion items stay open when another item is opened.

+

Set open="yes" to make accordion items stay open when another item is opened.

- +
Accordion Item #1 @@ -166,8 +215,19 @@
- <bodydiv outputclass="accordion-open"> + +
+ <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="accordion-open"> ...etc -<bodydiv> +</bodydiv> +
+
+ Specialization + <accordion open="yes"> + ...etc +</accordion> +
+ diff --git a/sample/alerts.dita b/sample/alerts.dita index 08181cef..9ffc442a 100644 --- a/sample/alerts.dita +++ b/sample/alerts.dita @@ -32,17 +32,20 @@ of the eight required contextual classes (e.g., set outputclass to alert-success).

- -
A simple primary alert—check it out!
-
A simple secondary alert—check it out!
-
A simple success alert—check it out!
-
A simple danger alert—check it out!
-
A simple warning alert—check it out!
-
A simple info alert—check it out!
-
A simple light alert—check it out!
-
A simple dark alert—check it out!
+ +
A simple primary alert—check it out!
+
A simple secondary alert—check it out!
+
A simple success alert—check it out!
+
A simple danger alert—check it out!
+
A simple warning alert—check it out!
+
A simple info alert—check it out!
+
A simple light alert—check it out!
+
A simple dark alert—check it out!
 - <section outputclass="alert-primary"> + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="alert-primary"> A simple primary alert—check it out! </section> <section outputclass="alert-secondary"> @@ -66,20 +69,53 @@ <section outputclass="alert-dark"> A simple dark alert—check it out! </section> +
+
+ Specialization + <alert color="primary"> + A simple primary alert—check it out! +</alert> +<alert color="secondary"> + A simple secondary alert—check it out! +</alert> +<alert color="success"> + A simple success alert—check it out! +</alert> +<alert color="danger"> + A simple danger alert—check it out! +</alert> +<alert color="warning"> + A simple warning alert—check it out! +</alert> +<alert color="info"> + A simple info alert—check it out! +</alert> +<alert color="light"> + A simple light alert—check it out! +</alert> +<alert color="dark"> + A simple dark alert—check it out! +</alert> +
+ +
Additional content

Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.

- -
- <i outputclass="bi bi-emoji-smile pe-2"/>Well done! + +
+ <ph outputclass="bi bi-emoji-smile pe-2"/>Well done!

Aww yeah, you successfully read this important alert message. This example text with a link is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

 - <section outputclass="alert-success"> + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="alert alert-success"> <title><i outputclass="bi bi-emoji-smile pe-2"/>Well done!</title> <p> Aww yeah, you successfully read this important alert message. This example text with a @@ -90,13 +126,30 @@ Whenever you need to, be sure to use margin utilities to keep things nice and tidy. </p> </section> +
+
+ Specialization + <alert color="success"> + <title><icon outputclass="bi-emoji-smile" padding="e2"/>Well done!</title> + <p> + Aww yeah, you successfully read this important alert message. This example text with a + <xref href="#">link</xref> is going to run a bit longer so that you can see + how spacing within an alert works with this kind of content. + </p> + <p> + Whenever you need to, be sure to use margin utilities to keep things nice and tidy. + </p> +</alert> +
+ +
Notes

DITA note elements are displayed as alerts according to the type attribute. With the exception type="othertype", an icon is added if type is present.

-
+
This is just a note. Notice this piece of information. This note will speed you on your way. @@ -109,40 +162,105 @@ You may hurt yourself! This is something other than a normal note.
- <note type="note">This is just a note.</note> -<note type="notice">Notice this piece of information.</note> -<note type="fastpath">This note will speed you on your way.</note> -<note type="remember">Don't forget to do what this note says.</note> -<note type="tip">This is a fine little tip.</note> -<note type="attention">Please pay extra attention to this note.</note> -<note type="caution">Care is required when proceeding.</note> -<note type="important">This note is important.</note> -<note type="restriction">You can't do what this note says.</note> -<note type="danger">You may hurt yourself!</note> -<note type="other" othertype="Another note">This is something other than a normal note.</note> -

The default colors can be overridden by using an outputclass.

-
- This is a primary note. - This is a secondary note. - This is light note. - This is dark note. -
- <note type="note" outputclass="alert-primary">This is a primary note.</note> -<note type="note" outputclass="alert-secondary">This is a secondary note.</note> -<note type="note" outputclass="alert-light">This is light note.</note> -<note type="note" outputclass="alert-dark">This is dark note.</note> -

Use an additional otherprops to alter the default icon, use CSS font-size and color to change the icon appearance.

-
- This note has a search icon. + <note type="note"> + This is just a note. +</note> +<note type="notice"> + Notice this piece of information. +</note> +<note type="fastpath"> + This note will speed you on your way. +</note> +<note type="remember"> + Don't forget to do what this note says. +</note> +<note type="tip"> + This is a fine little tip. +</note> +<note type="attention"> + Please pay extra attention to this note. +</note> +<note type="caution"> + Care is required when proceeding. +</note> +<note type="important"> + This note is important. +</note> +<note type="restriction"> + You can't do what this note says. +</note> +<note type="danger"> + You may hurt yourself! +</note> +<note type="other" othertype="Another note"> + This is something other than a normal note. +</note> +

The default colors can be overridden by using a color attribute or an outputclass.

+ + This is a primary note. + This is a secondary note. + This is light note. + This is dark note. + + +
+ <xmlatt>outputclass</xmlatt> + <note type="note" outputclass="alert-primary"> + This is a primary note.</note> +<note type="note" outputclass="alert-secondary"> + This is a secondary note.</note> +<note type="note" outputclass="alert-light"> + This is light note. +</note> +<note type="note" outputclass="alert-dark"> + This is dark note. +</note> +
+
+ Specialization + <note color="primary"> + This is a primary note. +</note> +<note color="secondary"> + This is a secondary note. +</note> +<note color="light"> + This is light note. +</note> +<note color="dark"> + This is dark note. +</note> +
+ + +

Use an additional icon attribute or otherprops to alter the default icon.

+ + This note has a search icon. This note uses a styled smile emoji. -
- <note otherprops="icon(bi-search)" type="other" othertype="Search">This note has a search icon.</note> -<note otherprops="icon(bi-emoji-smile), style(font-size: 2rem; color: cornflowerblue;)" type="note" othertype="Another note">This note uses a styled smile emoji.</note> + + +
+ <xmlatt>outputclass</xmlatt> + <note otherprops="icon(bi-search)" type="other" othertype="Search"> + This note has a search icon. +</note> +<note otherprops="icon(bi-emoji-smile), style(font-size: 2rem; color: cornflowerblue;)" type="note" othertype="Another note"> + This note uses a styled smile emoji. +</note> +
+
+ Specialization + <note icon="bi-search" type="other" othertype="Search"> + This note has a search icon. +</note> +<note icon="bi bi-emoji-smile" style="font-size: 2rem; color: cornflowerblue;" type="note"> + This note uses a styled smile emoji. +</note> +
+ diff --git a/sample/badge.dita b/sample/badge.dita index 3332f197..c71d4b21 100644 --- a/sample/badge.dita +++ b/sample/badge.dita @@ -1,5 +1,4 @@ - + Badges Documentation and examples for badges, Bootstrap’s small count and labeling component. @@ -28,18 +28,28 @@

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.

- +
-

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

+

Example heading New

 - <title>Example Heading <ph outputclass="badge bg-secondary">New</ph></title> -<p>Example Text <ph outputclass="badge bg-secondary">New</ph></p> + +
+ <xmlatt>outputclass</xmlatt> + <title>Example Heading <ph outputclass="bg-secondary">New</ph></title> +<p>Example Text <ph outputclass="bg-secondary">New</ph></p> +
+
+ Specialization + <title>Example Heading <badge>New</badge></title> +<p>Example Text <badge>New</badge></p> +
+
Background colors

Set a background-color with contrasting foreground color with Bootstrap’s outputclass text-{color} and bg-{color} utilities for styling, which you still may use if you prefer.

- - Primary - Secondary - Success - Danger - Warning - Info - Light - Dark + +

+ Primary + Secondary + Success + Danger + Warning + Info + Light + Dark +

- <ph outputclass="badge text-bg-primary">Primary</ph> + +
+ <xmlatt>outputclass</xmlatt> + <ph outputclass="badge text-bg-primary">Primary</ph> <ph outputclass="badge text-bg-secondary">Secondary</ph> <ph outputclass="badge text-bg-success">Success</ph> <ph outputclass="badge text-bg-danger">Danger</ph> @@ -65,5 +80,18 @@ <ph outputclass="badge text-bg-info">Info</ph> <ph outputclass="badge text-bg-light">Light</ph> <ph outputclass="badge text-bg-dark">Dark</ph> +
+
+ Specialization + <badge>Primary</badge> +<badge color="secondary">Secondary</badge> +<badge color="success">Success</badge> +<badge color="danger">Danger</badge> +<badge color="warning">Warning</badge> +<badge color="info">Info</badge> +<badge color="light">Light</badge> +<badge color="dark">Dark</badge> +
+ diff --git a/sample/borders.dita b/sample/borders.dita new file mode 100644 index 00000000..eac1be95 --- /dev/null +++ b/sample/borders.dita @@ -0,0 +1,287 @@ + + + + + Borders + Use border utilities to quickly style the border and border-radius of an element. + + + + Borders + Color + Background + CSS + outputclass + + frame + + + + + +
+ Borders +

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

+
+ +
+  border   +  border-top  +  border-end  +  border-bottom  +  border-start +
+ + <ph outputclass="border">...</ph> +<ph outputclass="border-top">...</ph> +<ph outputclass="border-end">...</ph> +<ph outputclass="border-bottom">...</ph> +<ph outputclass="border-start">...</ph> + +
+ Border Specialization +

The border and rounded attributes provide a semantic way to add borders and rounded corners.

+
+ + +
+ Bordered Section +

This section has a border.

+
+ +
+

This div has a border and rounded corners.

+
+ +
    +
  1. + +
    2. +
  2. + +
    3. +
+ + + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="border p-2"> + ... +</section> + +<div outputclass="border rounded p-2 m-2"> + ... +</div> + +<ul outputclass="carousel border rounded m-2 w-50"> + ... +</ul> +
+
+ Specialization + <section border="yes" padding="2"> + ... +</section> + +<div border="yes" rounded="yes" padding="2" margin="2"> + ... +</div> + +<carousel border="yes" rounded="yes" margin="2" width="50"> + <carousel-item> + <image href="..."/> + </carousel-item> + <carousel-item> + <image href="..."/> + </carousel-item> +</carousel> +
+ +
+ Border Styling +

The border attribute also accepts numeric values 1-5 for width. The rounded attribute + supports values 0-5, circle and pill. + The bordercolor attribute can be used to set the color of the border.

+
+ + +
+ Width 1 + Width 2 + Width 3 + Width 4 + Width 5 +
+ + +
+ <xmlatt>outputclass</xmlatt> + <ph outputclass="border border-1">Width 1</ph> +<ph outputclass="border border-2">Width 2</ph> +<ph outputclass="border border-3">Width 3</ph> +<ph outputclass="border border-4">Width 4</ph> +<ph outputclass="border border-5">Width 5</ph> +
+
+ Specialization + <ph border="1">Width 1</ph> +<ph border="2">Width 2</ph> +<ph border="3">Width 3</ph> +<ph border="4">Width 4</ph> +<ph border="5">Width 5</ph> +
+ + + +
+ Primary + Primary subtle + Success + Danger +
+ + +
+ <xmlatt>outputclass</xmlatt> + <ph outputclass="border border-primary">Primary</ph> +<ph outputclass="border border-primary-subtle">Primary subtle</ph> +<ph outputclass="border border-success">Success</ph> +<ph outputclass="border border-danger">Danger</ph> +
+
+ Specialization + <ph bordercolor="primary">Primary</ph> +<ph bordercolor="primary-subtle">Primary subtle</ph> +<ph bordercolor="success">Success</ph> +<ph bordercolor="danger">Danger</ph> +
+ + + +
+ Rounded 0 + Rounded 1 + Rounded 2 + Rounded 3 + Rounded 4 + Rounded 5 +
+ + +
+ <xmlatt>outputclass</xmlatt> + <ph outputclass="border rounded-0">Rounded 0</ph> +<ph outputclass="border rounded-1">Rounded 1</ph> +<ph outputclass="border rounded-2">Rounded 2</ph> +<ph outputclass="border rounded-3">Rounded 3</ph> +<ph outputclass="border rounded-4">Rounded 4</ph> +<ph outputclass="border rounded-5">Rounded 5</ph> +
+
+ Specialization + <ph border="yes" rounded="0">Rounded 0</ph> +<ph border="yes" rounded="1">Rounded 1</ph> +<ph border="yes" rounded="2">Rounded 2</ph> +<ph border="yes" rounded="3">Rounded 3</ph> +<ph border="yes" rounded="4">Rounded 4</ph> +<ph border="yes" rounded="5">Rounded 5</ph> +
+ + + +
+ Circle + Pill +
+ + +
+ <xmlatt>outputclass</xmlatt> + <ph outputclass="border rounded-circle border-info">Circle</ph> +<ph outputclass="border rounded-pill border-dark">Pill</ph> +
+
+ Specialization + <ph border="yes" rounded="circle" bordercolor="info">Circle</ph> +<ph border="yes" rounded="pill" bordercolor="dark">Pill</ph> +
+ + +
+ Frame attribute support +

For DITA elements which support the frame attribute, such as lines + and codeblock, additional frame borders are automatically added as shown:

+
+ +

+ // Simple C++ program to display "Hello World" + +// Header file for input output functions +#include<iostream> + +using namespace std; + +// main function - +// where the execution of program begins +int main() +{ + // prints hello world + cout<<"Hello World"; + return 0; +} +

+ Shall I compare thee to a summer’s day? +Thou art more lovely and more temperate: +Rough winds do shake the darling buds of May, +and summer’s lease hath all too short a date: +... +

+ + + + + + + Animal + Gestation + + + + + Elephant (African and Asian) + 19-22 months + + + Giraffe + 15 months + + + Rhinoceros + 14-16 months + + + Hippopotamus + 7 1/2 months + + + +
+

+ + <codeblock frame="sides">...</codeblock> +<lines frame="topbot" outputclass="bg-secondary-subtle p-3 border rounded">...</lines> +<table frame="all">...</table> + + diff --git a/sample/button-group.dita b/sample/button-group.dita index ee054521..2de1e732 100644 --- a/sample/button-group.dita +++ b/sample/button-group.dita @@ -1,5 +1,4 @@ - + Button group Group a series of buttons together on a single line or stack them in a vertical column. @@ -29,71 +29,113 @@ outputclass="btn-group"

- -
- Left - Middle - Right -
+ + + Left + Middle + Right + - <div outputclass="btn-group"> + +
+ <xmlatt>outputclass</xmlatt> + <div outputclass="btn-group"> <xref outputclass="btn-primary" href="#">Left</xref> <xref outputclass="btn-primary" href="#">Middle</xref> <xref outputclass="btn-primary" href="#">Right</xref> </div> +
+
+ Specialization + <button-group> + <button href="#">Left</button> + <button href="#">Middle</button> + <button href="#">Right</button> +</button-group> +
+
Mixed styles
- -
- Left - Middle - Right -
+ + + Left + Middle + Right + - <div outputclass="btn-group"> + +
+ <xmlatt>outputclass</xmlatt> + <div outputclass="btn-group"> <xref outputclass="btn-danger" href="#">Left</xref> <xref outputclass="btn-warning" href="#">Middle</xref> <xref outputclass="btn-success" href="#">Right</xref> </div> +
+
+ Specialization + <button-group> + <button color="danger" href="#">Left</button> + <button color="warning" href="#">Middle</button> + <button color="success" href="#">Right</button> +</button-group> +
+
Outlined styles
- -
- Left - Middle - Right -
+ + + Left + Middle + Right + - <div outputclass="btn-group"> + +
+ <xmlatt>outputclass</xmlatt> + <div outputclass="btn-group"> <xref outputclass="btn-outline-primary" href="#">Left</xref> <xref outputclass="btn-outline-primary" href="#">Middle</xref> <xref outputclass="btn-outline-primary" href="#">Right</xref> </div> +
+
+ Specialization + <button-group> + <button outline="yes" href="#">Left</button> + <button outline="yes" href="#">Middle</button> + <button outline="yes" href="#">Right</button> +</button-group> +
+
Button toolbar

Combine sets of button groups into button toolbars for more complex components.

- -
-
- 1 - 2 - 3 - 4 -
-
- 5 - 6 - 7 -
-
- 8 -
-
+ + + + 1 + 2 + 3 + 4 + + + 5 + 6 + 7 + + + 8 + + - <div outputclass="btn-toolbar"> + +
+ <xmlatt>outputclass</xmlatt> + <div outputclass="btn-toolbar"> <div outputclass="btn-group me-2"> <xref outputclass="btn-primary" href="#">1</xref> <xref outputclass="btn-primary" href="#">2</xref> @@ -109,19 +151,55 @@ <xref outputclass="btn-info" href="#">8</xref> </div> </div> +
+
+ Specialization + <button-toolbar> + <button-group outputclass="me-2"> + <button href="#">1</button> + <button href="#">2</button> + <button href="#">3</button> + <button href="#">4</button> + </button-group> + <button-group outputclass="me-2"> + <button color="secondary" href="#">5</button> + <button color="secondary" href="#">6</button> + <button color="secondary" href="#">7</button> + </button-group> + <button-group outputclass="me-2"> + <button color="info" href="#">8</button> + </button-group> +</button-toolbar> +
+
Vertical variation

Make a set of buttons appear vertically stacked rather than horizontally.

- -
- Top - Middle - Bottom -
+ + + Top + Middle + Bottom + - <div class="btn-group-vertical"> - ...etc + +
+ <xmlatt>outputclass</xmlatt> + <div outputclass="btn-group-vertical"> + <xref outputclass="btn-primary" href="#">Top</xref> + <xref outputclass="btn-primary" href="#">Middle</xref> + <xref outputclass="btn-primary" href="#">Bottom</xref> </div> +
+
+ Specialization + <button-group vertical="yes"> + <button href="#">Top</button> + <button href="#">Middle</button> + <button href="#">Bottom</button> +</button-group> +
+ diff --git a/sample/buttons.dita b/sample/buttons.dita index a3476db0..c3a51693 100644 --- a/sample/buttons.dita +++ b/sample/buttons.dita @@ -1,5 +1,4 @@ - + Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple @@ -29,7 +29,7 @@

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

- + Primary Secondary Success @@ -39,7 +39,11 @@ Light Dark - <xref href="#" outputclass="btn-primary">Primary</xref> + + +
+ <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-primary">Primary</xref> <xref href="#" outputclass="btn-secondary">Secondary</xref> <xref href="#" outputclass="btn-success">Success</xref> <xref href="#" outputclass="btn-danger">Danger</xref> @@ -47,13 +51,27 @@ <xref href="#" outputclass="btn-info">Info</xref> <xref href="#" outputclass="btn-light">Light</xref> <xref href="#" outputclass="btn-dark">Dark</xref> +
+
+ Specialization + <button href="#">Primary</button> +<button href="#" color="secondary">Secondary</button> +<button href="#" color="success">Success</button> +<button href="#" color="danger">Danger</button> +<button href="#" color="warning">Warning</button> +<button href="#" color="info">Info</button> +<button href="#" color="light">Light</button> +<button href="#" color="dark">Dark</button> +
+ +
Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the outputclass and a value of btn-outline-* to remove all background images and colors on any button.

- + Primary Secondary Success @@ -63,7 +81,10 @@ Light Dark - <xref href="#" outputclass="btn-outline-primary">Primary</xref> + +
+ <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-outline-primary">Primary</xref> <xref href="#" outputclass="btn-outline-secondary">Secondary</xref> <xref href="#" outputclass="btn-outline-success">Success</xref> <xref href="#" outputclass="btn-outline-danger">Danger</xref> @@ -71,5 +92,60 @@ <xref href="#" outputclass="btn-outline-info">Info</xref> <xref href="#" outputclass="btn-outline-light">Light</xref> <xref href="#" outputclass="btn-outline-dark">Dark</xref> +
+
+ Specialization + <button href="#" outline="yes">Primary</button> +<button href="#" color="secondary" outline="yes">Secondary</button> +<button href="#" color="success" outline="yes">Success</button> +<button href="#" color="danger" outline="yes">Danger</button> +<button href="#" color="warning" outline="yes">Warning</button> +<button href="#" color="info" outline="yes">Info</button> +<button href="#" color="light" outline="yes">Light</button> +<button href="#" color="dark" outline="yes">Dark</button> +
+ +
+ Sizing +

Fancy larger or smaller buttons? Use size="large" or + size="small" for additional sizes.

+
+ + Large button + Large button + + + +
+ <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-primary btn-lg">Large button</xref> +<xref href="#" outputclass="btn-secondary btn-lg">Large button</xref> +
+
+ Specialization + <button href="#" size="large">Large button</button> +<button href="#" color="secondary" size="large">Large button</button> +
+ + + + Small button + Small button + + + +
+ <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-primary btn-sm">Small button</xref> +<xref href="#" outputclass="btn-secondary btn-sm">Small button</xref> +
+
+ Specialization + <button href="#" size="small">Small button</button> +<button href="#" color="secondary" size="small">Small button</button> +
+ + + diff --git a/sample/card.dita b/sample/card.dita index 8c18ccfb..77da9565 100644 --- a/sample/card.dita +++ b/sample/card.dita @@ -1,5 +1,4 @@ - + Cards Bootstrap’s cards provide a flexible and extensible content container with multiple variants and @@ -38,115 +38,166 @@ have no margin by default, so use spacing utilities as needed.

-

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, - so they’ll naturally fill the full width of its parent element. This is easily customized with Bootstrap’s - various - sizing - options. +

Below is an example of a basic card with mixed content and a default width. Card widths are easily customized with Bootstrap’s various + sizing options.

- - - -
- Card Title - -

Some quick example text to build on the card title and make up the bulk of the card’s content.

- Go Somewhere -
- - + +
+ Card Title + +

Some quick example text to build on the card title and make up the bulk of the card’s content.

+ Go Somewhere +
- <bodydiv outputclass="row"> - <bodydiv outputclass="col"> - <section outputclass="card w-50"> - <title outputclass="h5">Card Title</title> - <image outputclass="card-img-top" href="..." /> - <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> - <xref outputclass="btn-primary" href="#">Go Somewhere</xref> - </section> - </bodydiv> -</bodydiv> + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="card w-50"> + <title outputclass="h5">Card Title</title> + <image outputclass="card-img-top" href="..." /> + <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> + <xref outputclass="btn-primary" href="#">Go Somewhere</xref> +</section> +
+
+ Specialization + <card> + <title>Card Title</title> + <image href="..." /> + <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> + <button href="#">Go Somewhere</button> +</card> +
+
Titles, text, and links

Links are added and placed next to each other by altering the outputclass and adding card-link to an xref tag.

Subtitles are used by adding a div element.

- - - -
- Card Title -
Card Subtitle
-

Some quick example text to build on the card title and make up the bulk of the card’s content.

- Card Link - Another Link -
- - + +
+ Card Title +
Card Subtitle
+

Some quick example text to build on the card title and make up the bulk of the card’s content.

+ Card Link + Another Link +
- <bodydiv outputclass="row"> - <bodydiv outputclass="col"> - <section outputclass="card w-50"> - <title outputclass="h5">Card Title</title> - <div outputclass="h6">Card Subtitle</title> - <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> - <xref outputclass="card-link" href="#">Card Link</xref> - <xref outputclass="card-link" href="#">Another Link</xref> - </section> - </bodydiv> -</bodydiv> + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="card w-50"> + <title outputclass="h5">Card Title</title> + <div outputclass="h6">Card Subtitle</div> + <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> + <xref outputclass="card-link" href="#">Card Link</xref> + <xref outputclass="card-link" href="#">Another Link</xref> +</section> +
+
+ Specialization + <card> + <title>Card Title</title> + <div outputclass="h6">Card Subtitle</div> + <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> + <xref outputclass="card-link" href="#">Card Link</xref> + <xref outputclass="card-link" href="#">Another Link</xref> +</card> +
+
Images -

Setting outputclass to card-img-top places an image to the top of the card +

The first image within a card places an image to the top of the card

- + -
- +
+

Some quick example text to build on the card title and make up the bulk of the card’s content.

- <bodydiv outputclass="row"> - <bodydiv outputclass="col"> - <section outputclass="card w-50"> - <image outputclass="card-img-top" href="..." /> - <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> - </section> - </bodydiv> -</bodydiv> + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="card w-50"> + <image outputclass="card-img-top" href="..." /> + <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> +</section> +
+
+ Specialization + <card> + <image href="..." /> + <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> +</card> +
+
Header and footer -

Add an optional header and/or footer within a card using the outputclass attribute and adding - card-header and card-footer +

Add an optional header and/or footer within a card using the card-header and card-footer elements.

- - - -
- Special title treatment -
Featured
-

With supporting text below as a natural lead-in to additional content.

- Go somewhere -
- + +
+ Special title treatment +
Featured
+

With supporting text below as a natural lead-in to additional content.

+ Go somewhere +
2 days ago
+
+ + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="card w-50"> + <div outputclass="card-header">Featured</div> + <title outputclass="h5">Special title treatment</title> + <p>With supporting text below as a natural lead-in to additional content.</p> + <xref href="#" outputclass="btn-primary">Go somewhere</xref> +</section> +
+
+ Specialization + <card> + <card-header>Featured</card-header> + <title>Special title treatment</title> + <p>With supporting text below as a natural lead-in to additional content.</p> + <button href="#">Go somewhere</button> + <card-footer>2 days ago</card-footer> +</card> +
+
+ Card Colors +

A card can be colorized by adding a color attribute. This + applies a contextual background color.

+
+ +
+ Card Title + +

Some quick example text to build on the card title and make up the bulk of the card’s content.

+ Go Somewhere +
- <bodydiv outputclass="row"> - <bodydiv outputclass="col"> - <section outputclass="card w-50"> - <div outputclass="card-header">Featured</div> - <title outputclass="h5">Special title treatment</title> - <p>With supporting text below as a natural lead-in to additional content.</p> - <xref href="#" outputclass="btn-primary">Go somewhere</xref> - </section> - </bodydiv> -</bodydiv> + <card color="success"> + <title>Card Title</title> + <image href="..." /> + <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> + <button href="#">Go Somewhere</button> +</card> diff --git a/sample/carousel.dita b/sample/carousel.dita index 1aa18c14..07638670 100644 --- a/sample/carousel.dita +++ b/sample/carousel.dita @@ -1,5 +1,4 @@ - + Carousel A slideshow component for cycling through elements—images or slides of text—like a carousel. @@ -18,8 +18,8 @@ CSS outputclass - otherprops - ol + carousel + carousel-item fig image @@ -39,7 +39,7 @@ they’re not explicitly required. Add and customize as you see fit.

Here is an example with slides

- +
  1. @@ -52,7 +52,10 @@
- <ol outputclass="carousel"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel"> <li> <image href="..." /> </li> @@ -63,12 +66,28 @@ <image href="..." /> </li> </ol> +
+
+ Specialization + <carousel> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> +</carousel> +
+
Indicators -

Set otherprops="indicators(true)" to add indicators to the carousel, alongside the +

Set indicators="yes" to add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide.

- +
  1. @@ -81,7 +100,10 @@
- <ol outputclass="carousel" otherprops="indicators(true)"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel" otherprops="indicators(true)"> <li> <image href="..." /> </li> @@ -92,11 +114,27 @@ <image href="..." /> </li> </ol> +
+
+ Specialization + <carousel indicators="yes"> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> +</carousel> +
+
With captions

Add captions by using fig elements

- +
  1. @@ -118,7 +156,10 @@
- <ol outputclass="carousel"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel"> <li> <fig> <title>The First Slide</title> @@ -138,19 +179,44 @@ </fig> </li> </ol> +
+
+ Specialization + <carousel> + <carousel-item> + <fig> + <title>The First Slide</title> + <image href="..." /> + </fig> + </carousel-item> + <carousel-item> + <fig> + <title>The Second Slide</title> + <image href="..." /> + </fig> + </carousel-item> + <carousel-item> + <fig> + <title>The Third Slide</title> + <image href="..." /> + </fig> + </carousel-item> +</carousel> +
+
With non-image elements -

Place additional DITA elements within a div element to add them within a carousel. - Additional structure and spacing can be added by setting the outputclass="col-*" - attribute.

+

Place additional DITA elements within a grid-row element to add them within a carousel. + Additional structure and spacing can be added by using the grid-col element.

- +
  1. -
    +
    - Is it for fear to wet a widow’s eye + Is it for fear to wet a widow’s eye That thou consum’st thyself in single life? Ah, if thou issueless shalt hap to die, The world will wail thee like a makeless wife; @@ -158,10 +224,10 @@ The world will wail thee like a makeless wife;
  2. -
    +
    - The world will be thy widow and still weep + The world will be thy widow and still weep That thou no form of thee hast left behind, When every private widow well may keep, By children’s eyes, her husband’s shape in mind. @@ -169,10 +235,10 @@ By children’s eyes, her husband’s shape in mind.
  3. -
    +
    - Look what an unthrift in the world doth spend + Look what an unthrift in the world doth spend Shifts but his place, for still the world enjoys it; But beauty’s waste hath in the world an end, And, kept unused, the user so destroys it. @@ -180,10 +246,10 @@ And, kept unused, the user so destroys it.
  4. -
    +
    - No love toward others in that bosom sits + No love toward others in that bosom sits That on himself such murd’rous shame commits. Sonnet 9 - William Shakespeare @@ -192,38 +258,72 @@ And, kept unused, the user so destroys it.
- <ol outputclass="carousel"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel"> <li> - <div> + <div outputclass="row"> <div outputclass="col-1"/> <div outputclass="col-10"> ... - <div> - <div> + </div> + </div> </li> <li> - <div> + <div outputclass="row"> <div outputclass="col-1"/> <div outputclass="col-10"> ... - <div> - <div> + </div> + </div> </li> <li> - <div> + <div outputclass="row"> <div outputclass="col-1"/> <div outputclass="col-10"> ... - <div> - <div> + </div> + </div> </li> </ol> +
+
+ Specialization + <carousel> + <carousel-item> + <grid-row> + <grid-col colspan="1"/> + <grid-col colspan="10"> + ... + </grid-col> + </grid-row> + </carousel-item> + <carousel-item> + <grid-row> + <grid-col colspan="1"/> + <grid-col colspan="10"> + ... + </grid-col> + </grid-row> + </carousel-item> + <carousel-item> + <grid-row> + <grid-col colspan="1"/> + <grid-col colspan="10"> + ... + </grid-col> + </grid-row> + </carousel-item> +</carousel> +
+
Multiple slides side-by-side -

Add multiple image elements within each li

+

Add multiple image elements within each carousel-item

- +
  1. @@ -242,7 +342,10 @@ And, kept unused, the user so destroys it.
- <ol outputclass="carousel"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel"> <li> <image href="..." /> <image href="..." /> @@ -259,19 +362,42 @@ And, kept unused, the user so destroys it. <image href="..." /> </li> </ol> +
+
+ Specialization + <carousel> + <carousel-item> + <image href="..." /> + <image href="..." /> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + <image href="..." /> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + <image href="..." /> + <image href="..." /> + </carousel-item> +</carousel> +
+
Multiple slides with titles -

Add multiple image elements within each li and include a - div element for title texts.

+

Add multiple image elements within each carousel-item and include a + grid-row element for title texts.

- +
  1. -
    +

    First Image

    @@ -287,7 +413,7 @@ And, kept unused, the user so destroys it. -
    +

    Fourth Image

    @@ -303,7 +429,7 @@ And, kept unused, the user so destroys it. -
    +

    Seventh Image

    @@ -317,64 +443,33 @@ And, kept unused, the user so destroys it.
- <ol outputclass="carousel"> - <li> - <image href="..." /> - <image href="..." /> - <image href="..." /> - <div deliveryTarget="html"> - <div outputclass="col-4"> - <p outputclass="text-center">...</p> - </div> - <div outputclass="col-4"> - <p outputclass="text-center">...</p> - </div> - <div outputclass="col-4"> - <p outputclass="text-center">...</p> - </div> - </div> - </li> - <li> - <image href="..." /> - <image href="..." /> - <image href="..." /> - <div deliveryTarget="html"> - <div outputclass="col-4"> - <p outputclass="text-center">...</p> - </div> - <div outputclass="col-4"> - <p outputclass="text-center">...</p> - </div> - <div outputclass="col-4"> - <p outputclass="text-center">...</p> - </div> - </div> - </li> - <li> + <carousel> + <carousel-item> <image href="..." /> <image href="..." /> <image href="..." /> - <div deliveryTarget="html"> - <div outputclass="col-4"> + <grid-row deliveryTarget="html"> + <grid-col colspan="4"> <p outputclass="text-center">...</p> - </div> - <div outputclass="col-4"> + </grid-col> + <grid-col colspan="4"> <p outputclass="text-center">...</p> - </div> - <div outputclass="col-4"> + </grid-col> + <grid-col colspan="4"> <p outputclass="text-center">...</p> - </div> - </div> - </li> -</ol> + </grid-col> + </grid-row> + </carousel-item> + ... +</carousel>
Crossfade -

Add outputclass="carousel-fade" to your carousel to animate slides with a fade transition +

Add fade="yes" to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add div outputclass="bg-body" or some custom CSS to the carousel items for proper crossfading.

- +
  1. @@ -387,7 +482,10 @@ And, kept unused, the user so destroys it.
- <ol outputclass="carousel-fade"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel-fade"> <li> <image href="..." /> </li> @@ -398,15 +496,31 @@ And, kept unused, the user so destroys it. <image href="..." /> </li> </ol> +
+
+ Specialization + <carousel fade="yes"> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> +</carousel> +
+
Autoplaying carousels

Carousels autoplay on page load by default. Autoplaying carousels automatically pause while hovered with the mouse. In browsers that support the Page Visibility API, the carousel will stop cycling when the webpage is not visible to the user ( such as when the browser tab is inactive, or when the browser window is minimized).

-

When otherprops="autoplay(false)" is set, the carousel won’t automatically start to cycle on +

When autoplay="no" is set, the carousel won’t automatically start to cycle on page load. Instead, it will only start after the first user interaction.

- +
  1. @@ -419,7 +533,10 @@ And, kept unused, the user so destroys it.
- <ol outputclass="carousel" otherprops="autoplay(false)"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel" otherprops="autoplay(false)"> <li> <image href="..." /> </li> @@ -430,12 +547,50 @@ And, kept unused, the user so destroys it. <image href="..." /> </li> </ol> +
+
+ Specialization + <carousel autoplay="no"> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> +</carousel> +
+ +
+ Carousel interval +

Add interval="2000" to the carousel to change the amount of time to delay + between automatically cycling to the next item.

+
+ +
    +
  1. + +
    2. +
  2. + +
    3. +
+ + <carousel interval="2000"> + ... +</carousel> + +
Individual carousel item interval -

Add otherprops="interval(1000)" to a carousel item to change the amount of time to delay +

Add interval="1000" to a carousel-item to change the amount of time to delay between automatically cycling to the next item.

- +
  1. @@ -448,7 +603,10 @@ And, kept unused, the user so destroys it.
- <ol outputclass="carousel"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel"> <li otherprops="interval(2000)"> <image href="..." /> </li> @@ -459,12 +617,28 @@ And, kept unused, the user so destroys it. <image href="..." /> </li> </ol> +
+
+ Specialization + <carousel> + <carousel-item interval="2000"> + <image href="..." /> + </carousel-item> + <carousel-item interval="1000"> + <image href="..." /> + </carousel-item> + <carousel-item interval="3000"> + <image href="..." /> + </carousel-item> +</carousel> +
+
Disable touch swiping

Carousels support swiping left/right on touchscreen devices to move between slides. Add - otherprops="touch(false)" to disable this option.

+ touch="no" to disable this option.

- +
  1. @@ -477,7 +651,10 @@ And, kept unused, the user so destroys it.
- <ol outputclass="carousel" otherprops="touch(false)"> + +
+ <xmlatt>outputclass</xmlatt> + <ol outputclass="carousel" otherprops="touch(false)"> <li> <image href="..." /> </li> @@ -488,5 +665,21 @@ And, kept unused, the user so destroys it. <image href="..." /> </li> </ol> +
+
+ Specialization + <carousel touch="no"> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> + <carousel-item> + <image href="..." /> + </carousel-item> +</carousel> +
+ diff --git a/sample/collapse.dita b/sample/collapse.dita index d04456a9..e44e4203 100644 --- a/sample/collapse.dita +++ b/sample/collapse.dita @@ -1,13 +1,4 @@ - - Collapse Toggle the visibility of content across your project with a few classes and Bootstrap’s JavaScript @@ -40,18 +31,21 @@ props="collapse-toggle" to an xref element to associate a button to a collapse

- +

- Toggle Collapse + Toggle Collapse

- -
+ +

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

-
+ - <p> + +
+ <xmlatt>outputclass</xmlatt> + <p> <xref outputclass="btn-primary" props="collapse-toggle" href="#collapse1"> Toggle Collapse </xref> @@ -61,24 +55,42 @@ <p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p> </div> </bodydiv> +
+
+ Specialization + <p> + <button props="collapse-toggle" href="#collapse1"> + Toggle Collapse + </button> +</p> +<collapse id="collapse1"> + <card outputclass="card-body"> + <p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p> + </card> +</collapse> +
+
Horizontal

The collapse plugin also supports horizontal collapsing. Add outputclass="collapse-horizontal" to transition the width instead of height and set an otherprops="style(width: ...) on the immediate child div element.

- +

- Toggle Width Collapse + Toggle Width Collapse

- -
-

Some placeholder content for the collapse component. This is some placeholder content for a horizontal - collapse. It’s hidden by default and shown when triggered.

-
+ + +

Some placeholder content for the collapse component. This is some placeholder content for a horizontal + collapse. It’s hidden by default and shown when triggered.

 - <p> + + +
+ <xmlatt>outputclass</xmlatt> + <p> <xref outputclass="btn-primary" props="collapse-toggle" href="#collapse2">Toggle Width Collapse</xref> </p> <bodydiv outputclass="collapse-horizontal" id="collapse2" otherprops="style(min-height: 120px;)"> @@ -86,5 +98,18 @@ <p>This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.</p> </div> </bodydiv> +
+
+ Specialization + <p> + <button props="collapse-toggle" href="#collapse2">Toggle Width Collapse</button> +</p> +<collapse outputclass="collapse-horizontal" id="collapse2" otherprops="style(min-height: 120px;)"> + <bodydiv outputclass="card card-body" otherprops="style(width: 300px;)"> + <p>This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.</p> + </bodydiv> +</collapse> +
+ diff --git a/sample/color.dita b/sample/color.dita new file mode 100644 index 00000000..188e8f81 --- /dev/null +++ b/sample/color.dita @@ -0,0 +1,337 @@ + + + + Color + Convey meaning through color with a handful of color utility classes. Includes support for + styling text and background colors via the semantic color attribute. + + + + Color + Background + CSS + outputclass + + color + + + + +
+ Colors +

Colorize text and backgrounds with color utilities. The color attribute provides a semantic way to apply standard Bootstrap color themes.

+
+ + +
.text-bg-primary
+
.text-bg-secondary
+
.text-bg-success
+
.text-bg-danger
+
.text-bg-warning
+
.text-bg-info
+
.text-bg-light
+
.text-bg-dark
+ + + +
+ <xmlatt>outputclass</xmlatt> + <div outputclass="text-bg-primary">.text-bg-primary</div> +<div outputclass="text-bg-secondary">.text-bg-secondary</div> +<div outputclass="text-bg-success">.text-bg-success</div> +<div outputclass="text-bg-danger">.text-bg-danger</div> +<div outputclass="text-bg-warning">.text-bg-warning</div> +<div outputclass="text-bg-info">.text-bg-info</div> +<div outputclass="text-bg-light">.text-bg-light</div> +<div outputclass="text-bg-dark">.text-bg-dark</div> +
+
+ Specialization + <div color="primary">.text-bg-primary</div> +<div color="secondary">.text-bg-secondary</div> +<div color="success">.text-bg-success</div> +<div color="danger">.text-bg-danger</div> +<div color="warning">.text-bg-warning</div> +<div color="info">.text-bg-info</div> +<div color="light">.text-bg-light</div> +<div color="dark">.text-bg-dark</div> +
+ + +
+ Base DITA Elements +

Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.

+
+ + +
+ Section Decoration +

This section has a primary color background.

+
+ +
+

This div has a success color background.

+
+ + 
+        This pre has a warning color background.
+
+ + + This is a long quote with a danger color background. + + + + + + + Animal + Gestation + + + + + Elephant (African and Asian) + 19-22 months + + + Giraffe + 15 months + + + Rhinoceros + 14-16 months + + + Hippopotamus + 7 1/2 months + + + +
+ + + This is a note with a primary color theme. + + + + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="text-bg-primary"> + <title>Section Decoration</title> + <p>This section has a primary color background.</p> +</section> + +<div outputclass="text-bg-success p-3"> + <p>This div has a success color background.</p> +</div> + +<pre outputclass="text-bg-warning"> + This pre has a warning color background. +</pre> + +<lq outputclass="text-bg-danger p-1"> + ... +</lq> + +<table outputclass="table-primary p-1 w-100"> + <tgroup cols="2"> + <thead> + <row> + <entry>Animal</entry> + <entry>Gestation</entry> + </row> + </thead> + <tbody> + <row outputclass="table-info"> + ... + </row> + <row outputclass="table-success"> + ... + </row> + <row> + <entry>...</entry> + <entry outputclass="table-danger">...</entry> + </row> + <row> + <entry>...</entry> + <entry>...</entry> + </row> + </tbody> + </tgroup> +</table> + +<note color="primary"> + ... +</note> +
+
+ Specialization + <section color="primary"> + <title>Section Decoration</title> + <p>This section has a primary color background.</p> +</section> + +<div color="success" padding="3"> + <p>This div has a success color background.</p> +</div> + +<pre color="warning"> + This pre has a warning color background. +</pre> + +<lq color="danger" padding="1"> + This is a long quote with a danger color background. +</lq> + +<table color="primary" padding="1" width="100"> + <tgroup cols="2"> + <thead> + <row> + <entry>Animal</entry> + <entry>Gestation</entry> + </row> + </thead> + <tbody> + <row color="info"> + ... + </row> + <row color="success"> + ... + </row> + <row> + <entry>...</entry> + <entry color="danger">...</entry> + </row> + <row> + ... + </row> + </tbody> + </tgroup> +</table> + +<note color="primary"> + This is a note with a primary color theme. +</note> +
+ + +
+ Specialized Elements +

Many specialized components also support the color attribute for consistent theming.

+
+ + + + +
+ Card Title +

Some quick example text to build on the card title and make up the bulk of the card’s content.

+
+ + +
+ Accordion Item #1 +

This is the first item's accordion body.

+
+ + +
    +
  • An item
    • +
  • A second item
    • +
+ +
    +
  1. + +
    2. +
  2. + +
    3. +
  3. + +
    4. +
+ + + +
+ <xmlatt>outputclass</xmlatt> + <img src="..." class="img-thumbnail bg-warning"/> + +<section outputclass="card text-bg-success w-50"> + ... +</section> + +<bodydiv outputclass="accordion accordion-info"> + ... +</bodydiv> + +<ul outputclass="list-group list-group-item-danger w-50"> + ... +</ul> + +<ul outputclass="carousel carousel-dark w-50"> + ... +</ul> +
+
+ Specialization + <thumbnail href="..." color="warning"/> + +<card color="success" width="50"> + <title>Card Title</title> + <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p> +</card> + +<accordion color="info"> + <accordion-item open="yes"> + <title>Accordion Item #1</title> + <p>This is the first item's accordion body.</p> + </accordion-item> +</accordion> + +<list-group width="50" color="danger"> + <li>An item</li> + <li>A second item</li> +</list-group> + +<carousel color="dark" width="50" indicators="yes"> + <carousel-item> + <image href="..."/> + </carousel-item> + <carousel-item> + <image href="..."/> + </carousel-item> + <carousel-item> + <image href="..."/> + </carousel-item> +</carousel> +
+ + +
+ Text Color +

For text-only colorization, the outputclass attribute remains the primary method.

+
+ + +

.text-primary

+

.text-secondary

+

.text-success

+

.text-danger

+

.text-warning

+

.text-info

+ + + <p outputclass="text-primary">.text-primary</p> +<p outputclass="text-secondary">.text-secondary</p> +<p outputclass="text-success">.text-success</p> +<p outputclass="text-danger">.text-danger</p> +<p outputclass="text-warning bg-dark">.text-warning</p> +<p outputclass="text-info bg-dark">.text-info</p> + + diff --git a/sample/document.ditamap b/sample/document.ditamap index a6b06e31..0c8db616 100644 --- a/sample/document.ditamap +++ b/sample/document.ditamap @@ -66,7 +66,10 @@ - + + + + diff --git a/sample/figures.dita b/sample/figures.dita index 4688b5bd..9e6eac48 100644 --- a/sample/figures.dita +++ b/sample/figures.dita @@ -36,7 +36,7 @@ Example

By default figure elements are styled as shown:

- + A caption for the image. @@ -49,9 +49,9 @@
Aligning text

The figure’s caption can be aligned using the Bootstrap - text utilities.

+ text utilities.

- + A caption for the image. @@ -65,10 +65,9 @@
Adding borders

Use the DITA frame attribute to add - borders to a fig.

+ borders to a fig.

- + All Borders frame="all" diff --git a/sample/grid.dita b/sample/grid.dita index 521704b0..9ec9e204 100644 --- a/sample/grid.dita +++ b/sample/grid.dita @@ -29,9 +29,10 @@ Example

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system - comes together.

+ comes together. The grid-col element supports breakpoint and + colspan attributes to define the column width at different screen sizes.

- +

One of three columns

@@ -44,7 +45,10 @@ - <bodydiv outputclass="row"> + +
+ <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="row"> <bodydiv outputclass="col-sm-3"> <p>One of three columns</p> </bodydiv> @@ -55,51 +59,94 @@ <p>One of three columns</p> </bodydiv> </bodydiv> +
+
+ Specialization + <grid-row> + <grid-col breakpoint="sm" colspan="3"> + <p>One of three columns</p> + </grid-col> + <grid-col breakpoint="sm" colspan="3"> + <p>One of three columns</p> + </grid-col> + <grid-col breakpoint="sm" colspan="3"> + <p>One of three columns</p> + </grid-col> +</grid-row> +
+
Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xxl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

- + -
+

One of two columns

-
-
+ +

One of two columns

-
+ -
+

One of three columns

-
-
+ +

One of three columns

-
-
+ +

One of three columns

-
+ - <bodydiv outputclass="row"> - <div outputclass="col"> + +
+ <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="row"> + <bodydiv outputclass="col"> <p>One of two columns</p> - </div> - <div outputclass="col"> + </bodydiv> + <bodydiv outputclass="col"> <p>One of two columns</p> - </div> + </bodydiv> </bodydiv> <bodydiv outputclass="row"> - <div outputclass="col"> + <bodydiv outputclass="col"> <p>One of three columns</p> - </div> - <div outputclass="col"> + </bodydiv> + <bodydiv outputclass="col"> <p>One of three columns</p> - </div> - <div outputclass="col"> + </bodydiv> + <bodydiv outputclass="col"> <p>One of three columns</p> - </div> + </bodydiv> </bodydiv> +
+
+ Specialization + <grid-row> + <grid-col> + <p>One of two columns</p> + </grid-col> + <grid-col> + <p>One of two columns</p> + </grid-col> +</grid-row> +<grid-row> + <grid-col> + <p>One of three columns</p> + </grid-col> + <grid-col> + <p>One of three columns</p> + </grid-col> + <grid-col> + <p>One of three columns</p> + </grid-col> +</grid-row> +
+ diff --git a/sample/icons.dita b/sample/icons.dita index a5dca8fa..8f19ee55 100644 --- a/sample/icons.dita +++ b/sample/icons.dita @@ -1,13 +1,4 @@ - - Icons When enabled, DITA Bootstrap includes Bootstrap Icons by default. Additional icon libraries such as @@ -22,7 +13,7 @@ CSS outputclass - otherprops + style othermeta @@ -40,68 +31,76 @@
Example

Icon fonts with classes for every icon are included in Bootstrap Icons. Include the icon web fonts in your page - via CSS, then reference the class names as needed in your DITA (e.g., i + via CSS, then reference the class names as needed in your DITA (e.g., icon outputclass="bi-alarm"/).

-

Use an additional otherprops and alter the CSS font-size and color to change the icon +

Use a style attribute and alter the CSS font-size and color to change the icon appearance.

- +

- - + +

- <i outputclass="bi-alarm"/> + +
+ <xmlatt>outputclass</xmlatt> + <i outputclass="bi-alarm"/> <i outputclass="bi-alarm" otherprops="style(font-size: 2rem; color: cornflowerblue;)"/> +
+
+ Specialization + <icon outputclass="bi-alarm"/> +<icon outputclass="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"/> +
+

Icons placed within an xref element are colorized appropriately:

- +

- Primary link + Primary link

- Secondary link + Secondary link

- Success link + Success link

- Danger link + Danger link

- Warning link + Warning link

- Info link + Info link

- Light link + Light link

- Dark link - -

-

- - Emphasis link + Dark link

- <xref outputclass="link-primary" href="#"> + +
+ <xmlatt>outputclass</xmlatt> + <xref outputclass="link-primary" href="#"> <i outputclass="bi-link"/> Primary link </xref> <xref outputclass="link-secondary" href="#"> @@ -128,16 +127,48 @@ <xref outputclass="link-body-emphasis" href="#"> <i outputclass="bi-link"/> Emphasis link </xref> +
+
+ Specialization + <xref color="primary" href="#"> + <icon outputclass="bi-link"/> Primary link +</xref> +<xref color="secondary" href="#"> + <icon outputclass="bi-link"/> Secondary link +</xref> +<xref color="success" href="#"> + <icon outputclass="bi-link"/> Success link +</xref> +<xref color="danger" href="#"> + <icon outputclass="bi-link"/> Danger link +</xref> +<xref color="warning" href="#"> + <icon outputclass="bi-link"/> Warning link +</xref> +<xref color="info" href="#"> + <icon outputclass="bi-link"/> Info link +</xref> +<xref color="light" href="#"> + <icon outputclass="bi-link"/> Light link +</xref> +<xref color="dark" href="#"> + <icon outputclass="bi-link"/> Dark link +</xref> +
+

Icons can also be placed within buttons as shown:

- - - - - - - + + + + + + + - <xref outputclass="btn-primary btn-floating m-1" href="#"> + +
+ <xmlatt>outputclass</xmlatt> + <xref outputclass="btn-primary btn-floating m-1" href="#"> <i outputclass="bi-arrow-down-square-fill"/> </xref> <xref outputclass="btn-primary btn-floating m-1" href="#"> @@ -155,6 +186,29 @@ <xref outputclass="btn-primary btn-floating m-1" href="#"> <i outputclass="bi-share-fill"/> </xref> +
+
+ Specialization + <button outputclass="btn-floating m-1" href="#"> + <icon outputclass="bi-arrow-down-square-fill"/> +</button> +<button outputclass="btn-floating m-1" href="#"> + <icon outputclass="bi-chat-left-quote-fill"/> +</button> +<button outputclass="btn-floating m-1" href="#"> + <icon outputclass="bi-speedometer"/> +</button> +<button outputclass="btn-floating m-1" href="#"> + <icon outputclass="bi-camera-fill"/> +</button> +<button outputclass="btn-floating m-1" href="#"> + <icon outputclass="bi-link"/> +</button> +<button outputclass="btn-floating m-1" href="#"> + <icon outputclass="bi-share-fill"/> +</button> +
+

Icons can also be used within chapter headings, and topicref elements by adding othermeta name="icon" and diff --git a/sample/images.dita b/sample/images.dita index e8c37751..196aa67f 100644 --- a/sample/images.dita +++ b/sample/images.dita @@ -31,80 +31,125 @@ max-width: 100%; and height: auto; to the image so that it scales with the parent element.

- + - <image scalefit="yes" href="..." /> + <image scalefit="yes" href="..." />
Image thumbnails

In addition to Bootstrap’s border-radius - utilities, you can set outputclass to img-thumbnail to give an image + utilities, you can use the specialized thumbnail element to give an image a rounded 1px border appearance.

- - + + + + +
+ <xmlatt>outputclass</xmlatt> + <image outputclass="img-thumbnail" href="..." /> +
+
+ Specialization + <thumbnail href="..." /> +
- <image outputclass="img-thumbnail" href="..." />
Separate images for dark and light mode

Use the outputclass="d-auto", outputclass="d-light", and outputclass="d-dark" attributes on image elements to display different images when in dark mode.

- + - + - <fig> + +
+ <xmlatt>outputclass</xmlatt> + <fig> <image outputclass="img-thumbnail d-auto" href="..."/> <image outputclass="img-thumbnail d-light" href="..." deliveryTarget="html"/> <image outputclass="img-thumbnail d-dark" href="..." deliveryTarget="html"/> -</fig> - +</fig> +
+
+ Specialization + <fig> + <thumbnail outputclass="d-auto" href="..."/> + <thumbnail outputclass="d-light" href="..." deliveryTarget="html"/> + <thumbnail outputclass="d-dark" href="..." deliveryTarget="html"/> +</fig> +
+
Support Lazy Loading -

Use the otherprops="loading(lazy)" attribute on image elements +

Use the loading="lazy" attribute on image elements to wait until an image is on screen before loading.

- <image otherprops="loading(lazy)" href="..."/> + +
+ <xmlatt>outputclass</xmlatt> + <image otherprops="loading(lazy)" href="..."/> +
+
+ Specialization + <image loading="lazy" href="..."/> +
+
Support HTML <xmlelement>picture</xmlelement> element -

Use the outputclass="d-picture" attributes on a div +

Use the specialized picture element holding multiple image elements to display different images on - different media. The otherprops attribute defines the media query and/or - image MIME type. The final image is the default.

+ different media. The media attribute defines the media query and/or + type the image MIME type. The final image is the default.

- +

Change the width of the browser to view different images:

-
- - - - +
+ + + +
- <div outputclass="d-picture" deliveryTarget="html"> - <image otherprops="media(min-width: 700px)" href="..."> + +
+ <xmlatt>outputclass</xmlatt> + <div outputclass="d-picture"> + <image otherprops="media(min-width: 700px)" href="..."/> <image otherprops="media(min-width: 450px)" href="..."/> <image otherprops="type(image/jpeg)" href="..."/> <image otherprops="type(image/webp)" href="..."/> <image href="..."/> </div> +
+
+ Specialization + <picture> + <image media="min-width: 700px" href="..."/> + <image media="min-width: 450px" href="..."/> + <image type="image/jpeg" href="..."/> + <image type="image/webp" href="..."/> + <image href="..."/> +</picture> +
+ diff --git a/sample/index.dita b/sample/index.dita index 75e2a1f3..3d728bcd 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -30,20 +30,20 @@ Installing

Use the dita command to add this plug-in to your DITA Open Toolkit installation:

- -
+ +
DITA-OT 3.5 and newer: dita install fox.jason.extend.css dita install org.dita-bootstrap.html
-
+
DITA-OT 3.3 and newer: dita --install fox.jason.extend.css dita --install org.dita-bootstrap.html
-
+
DITA-OT 3.2 and older: dita --install https://github.com/jason-fox/fox.jason.extend.css/archive/master.zip diff --git a/sample/list-group.dita b/sample/list-group.dita index 849abb9a..508dcbc1 100644 --- a/sample/list-group.dita +++ b/sample/list-group.dita @@ -1,5 +1,4 @@ - + List Group List groups are a flexible and powerful component for displaying a series of content. Modify and extend @@ -31,7 +31,7 @@

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

- +
  • An item
  • A second item
    • @@ -40,48 +40,85 @@
  • And a fifth one
 - <ul outputclass="list-group"> + +
+ <xmlatt>outputclass</xmlatt> + <ul outputclass="list-group"> <li>An item</li> <li>A second item</li> <li>A third item</li> <li>A fourth item</li> <li>And a fifth one</li> </ul> +
+
+ Specialization + <list-group> + <li>An item</li> + <li>A second item</li> + <li>A third item</li> + <li>A fourth item</li> + <li>And a fifth one</li> +</list-group> +
+
Compacted list group

Add compact="yes" to reduce the padding of list items

- -
    + +
    • Item One
    • Item Two
    • Item Three
     - <ul outputclass="list-group" compact="yes" > + +
    + <xmlatt>outputclass</xmlatt> + <ul outputclass="list-group" compact="yes" > ... </ul> +
    +
    + Specialization + <list-group compact="yes"> + ... +</list-group> +
    +
    Expanded list group

    Add compact="no" to increase the padding of list items

    - -
      + +
      • Item One
      • Item Two
      • Item Three
       - <ul outputclass="list-group" compact="no" > + +
      + <xmlatt>outputclass</xmlatt> + <ul outputclass="list-group" compact="no" > ... </ul> +
      +
      + Specialization + <list-group compact="no"> + ... +</list-group> +
      +
      Flush -

      Add an outputclass="list-group-flush" to remove some borders and +

      Add a flush="yes" to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

      - -
        + +
        • An item
        • A second item
        • A third item
          • @@ -89,12 +126,27 @@
        • And a fifth one
         - <ul outputclass="list-group-flush"> + +
        + <xmlatt>outputclass</xmlatt> + <ul outputclass="list-group-flush"> <li>An item</li> <li>A second item</li> <li>A third item</li> <li>A fourth item</li> <li>And a fifth one</li> </ul> +
        +
        + Specialization + <list-group flush="yes"> + <li>An item</li> + <li>A second item</li> + <li>A third item</li> + <li>A fourth item</li> + <li>And a fifth one</li> +</list-group> +
        +         diff --git a/sample/nav.dita b/sample/nav.dita index 7265fd85..390748e9 100644 --- a/sample/nav.dita +++ b/sample/nav.dita @@ -75,57 +75,61 @@ >path/to/your.ditamap \ --format= \ --nav-toc=         -
          -
        1. +
+ +
    +
  1. <option>full</option> – DITA-OT default unstyled full ToC
    2. -
  2. +
  3. <option>partial</option> – DITA-OT default unstyled partial ToC - +
    4. -
  4. +
    5. -
  5. +
    6. -
  6. +
  7. <option>list-group-full</option> – Styled full ToC within a list group
    8. -
  8. +
  9. <option>list-group-partial</option> – Styled partial ToC within a list group
    10. -
  10. +
  11. <option>collapsible</option> – Styled full ToC with collapsible elements
+ +

The sidebar is hidden by default on mobile. To ensure that the sidebar content can be accessed, the header file must include the following toggle with data-bs-target="#bdSidebar" and data-bs-toggle="offcanvas":

- <div class="bd-navbar-toggle"> + <div class="bd-navbar-toggle"> <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation"> @@ -154,7 +158,7 @@ >path/to/your.ditamap \ --format= \ --nav-toc= \ - --bootstrap.sidebar.footer=path/to/your.footer + --bootstrap.sidebar.ftr=path/to/your.footer

The plug-in also includes a sample <topicref navtitle="Search Box" format="dita" type="topic" href="search-box.dita"> <topicmeta> <othermeta name="divider" content="Additional Plug-ins"/> diff --git a/sample/offcanvas.dita b/sample/offcanvas.dita index 43d13457..56dea5ee 100644 --- a/sample/offcanvas.dita +++ b/sample/offcanvas.dita @@ -1,5 +1,4 @@ - + Offcanvas Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and @@ -48,14 +48,21 @@ props="offcanvas-toggle" to an xref element to associate a button to an offcanvas

- - Click here to display offcanvas -
+ + Click here to display offcanvas +
Offcanvas

Content for the offcanvas goes here. You can place just about any section elements here.

 - <xref outputclass="btn-primary" props="offcanvas-toggle" href="#offcanvas1"> + +
+ <xmlatt>outputclass</xmlatt> + <xref outputclass="btn-primary" props="offcanvas-toggle" href="#offcanvas1"> Click here </xref> <section outputclass="offcanvas-start" id="offcanvas1"> @@ -64,41 +71,81 @@ Content for the offcanvas goes here. You can place just about any section elements here. </p> </section> +
+
+ Specialization + <button props="offcanvas-toggle" href="#offcanvas1"> + Click here +</button> +<offcanvas id="offcanvas1" position="start"> + <title>Offcanvas</title> + <p> + Content for the offcanvas goes here. You can place just about any section elements here. + </p> +</offcanvas> +
+
Placement

There’s no default placement for offcanvas components, so you must add one of the modifier outputclasses below

    -
  • Setting outputclass="offcanvas-start" places offcanvas on the left of the +
  • Setting position="start" or outputclass="offcanvas-start" places offcanvas on the left of the viewport (shown above)
    • -
  • Setting outputclass="offcanvas-end" places offcanvas on the right of the +
  • Setting position="end" or outputclass="offcanvas-end" places offcanvas on the right of the viewport
    • -
  • Setting outputclass="offcanvas-bottom" places offcanvas on the bottom of +
  • Setting position="bottom" or outputclass="offcanvas-bottom" places offcanvas on the bottom of the viewport
    • -
  • Setting outputclass="offcanvas-top" places offcanvas on the top of +
  • Setting position="top" or outputclass="offcanvas-top" places offcanvas on the top of the viewport
- - Toggle right offcanvas -
+ + Toggle right offcanvas +
Offcanvas

Content for the offcanvas goes here. You can place just about any section elements here.

 - <section outputclass="offcanvas-end"> + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="offcanvas-end" id="offcanvas2"> + ...etc +</section> +
+
+ Specialization + <offcanvas position="end"> ...etc -<section> - - Toggle bottom offcanvas -
+</offcanvas> +
+ + + Toggle bottom offcanvas +
Offcanvas

Content for the offcanvas goes here. You can place just about any section elements here.

 - <section outputclass="offcanvas-bottom"> + +
+ <xmlatt>outputclass</xmlatt> + <section outputclass="offcanvas-bottom" id="offcanvas3"> ...etc -<section> +</section> +
+
+ Specialization + <offcanvas position="bottom"> + ...etc +</offcanvas> +
+
Responsive

outputclass="offcanvas-lg" hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint.

- + Resize your browser to show the responsive offcanvas toggle. - Toggle offcanvas -
+ Toggle offcanvas +
Offcanvas

This is content within an outputclass="offcanvas-lg".

@@ -125,7 +176,10 @@
  • outputclass="offcanvas-xl"
  • outputclass="offcanvas-xxl"
    • - <note outputclass="alert-info d-none d-lg-block"> + +
    + <xmlatt>outputclass</xmlatt> + <note outputclass="alert-info d-none d-lg-block"> Resize your browser to show the responsive offcanvas toggle. </note> <xref outputclass="btn-primary d-lg-none" props="offcanvas-toggle" href="#offcanvas4"> @@ -137,5 +191,22 @@ This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>. </p> </section> +
    +
    + Specialization + <note color="info" outputclass="d-none d-lg-block"> + Resize your browser to show the responsive offcanvas toggle. +</note> +<button outputclass="d-lg-none" props="offcanvas-toggle" href="#offcanvas4"> + Toggle offcanvas +</button> +<offcanvas outputclass="offcanvas-lg" id="offcanvas4"> + <title>Offcanvas</title> + <p> + This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>. + </p> +</offcanvas> +
    +     diff --git a/sample/pagination.dita b/sample/pagination.dita index 464b74ad..ba60bfbd 100644 --- a/sample/pagination.dita +++ b/sample/pagination.dita @@ -1,5 +1,4 @@ - + Pagination @@ -35,7 +35,7 @@ - +
    Page navigation example
      @@ -57,9 +57,12 @@
    - <section outputclass="pagination"> + +
    + <xmlatt>outputclass</xmlatt> + <section> <title>Page navigation example</title> - <ol> + <ol outputclass="pagination"> <li><xref href="#">Previous</xref></li> <li><xref href="#">1</xref></li> <li><xref href="#">2</xref></li> @@ -67,13 +70,28 @@ <li><xref href="#">Next</xref></li> </ol> </section> +
    +
    + Specialization + <pagination> + <title>Page navigation example</title> + <ol> + <li><xref href="#">Previous</xref></li> + <li><xref href="#">1</xref></li> + <li><xref href="#">2</xref></li> + <li><xref href="#">3</xref></li> + <li><xref href="#">Next</xref></li> + </ol> +</pagination> +
    +
    Sizing -

    Fancy larger or smaller pagination? Use outputclass="pagination-lg" or - outputclass="pagination-sm" for additional sizes.

    +

    Fancy larger or smaller pagination? Use size="large" or + size="small" for additional sizes.

    - -
    + +
    Page navigation example
    1. @@ -94,9 +112,12 @@
    - <section outputclass="pagination-lg"> + +
    + <xmlatt>outputclass</xmlatt> + <section> <title>Page navigation example</title> - <ol> + <ol outputclass="pagination pagination-lg"> <li><xref href="#">Previous</xref></li> <li><xref href="#">1</xref></li> <li><xref href="#">2</xref></li> @@ -104,8 +125,23 @@ <li><xref href="#">Next</xref></li> </ol> </section> - -
    +
    +
    + Specialization + <pagination size="large"> + <title>Page navigation example</title> + <ol> + <li><xref href="#">Previous</xref></li> + <li><xref href="#">1</xref></li> + <li><xref href="#">2</xref></li> + <li><xref href="#">3</xref></li> + <li><xref href="#">Next</xref></li> + </ol> +</pagination> +
    +     + +
    Page navigation example
    1. @@ -126,9 +162,12 @@
    - <section outputclass="pagination-sm"> + +
    + <xmlatt>outputclass</xmlatt> + <section> <title>Page navigation example</title> - <ol> + <ol outputclass="pagination pagination-sm"> <li><xref href="#">Previous</xref></li> <li><xref href="#">1</xref></li> <li><xref href="#">2</xref></li> @@ -136,6 +175,21 @@ <li><xref href="#">Next</xref></li> </ol> </section> +
    +
    + Specialization + <pagination size="small"> + <title>Page navigation example</title> + <ol> + <li><xref href="#">Previous</xref></li> + <li><xref href="#">1</xref></li> + <li><xref href="#">2</xref></li> + <li><xref href="#">3</xref></li> + <li><xref href="#">Next</xref></li> + </ol> +</pagination> +
    +
    Alignment

    Change the alignment of pagination component by appending Bootstrap @@ -147,8 +201,8 @@ to the outputclass

    - -
    + +
    Page navigation example
    1. @@ -169,9 +223,12 @@
    - <section outputclass="pagination justify-content-center"> + +
    + <xmlatt>outputclass</xmlatt> + <section> <title>Page navigation example</title> - <ol> + <ol outputclass="pagination justify-content-center"> <li><xref href="#">Previous</xref></li> <li><xref href="#">1</xref></li> <li><xref href="#">2</xref></li> @@ -179,8 +236,23 @@ <li><xref href="#">Next</xref></li> </ol> </section> - -
    +
    +
    + Specialization + <pagination outputclass="justify-content-center"> + <title>Page navigation example</title> + <ol> + <li><xref href="#">Previous</xref></li> + <li><xref href="#">1</xref></li> + <li><xref href="#">2</xref></li> + <li><xref href="#">3</xref></li> + <li><xref href="#">Next</xref></li> + </ol> +</pagination> +
    +     + +
    Page navigation example
    1. @@ -201,9 +273,12 @@
    - <section outputclass="pagination justify-content-end"> + +
    + <xmlatt>outputclass</xmlatt> + <section> <title>Page navigation example</title> - <ol> + <ol outputclass="pagination justify-content-end"> <li><xref href="#">Previous</xref></li> <li><xref href="#">1</xref></li> <li><xref href="#">2</xref></li> @@ -211,5 +286,20 @@ <li><xref href="#">Next</xref></li> </ol> </section> +
    +
    + Specialization + <pagination outputclass="justify-content-end"> + <title>Page navigation example</title> + <ol> + <li><xref href="#">Previous</xref></li> + <li><xref href="#">1</xref></li> + <li><xref href="#">2</xref></li> + <li><xref href="#">3</xref></li> + <li><xref href="#">Next</xref></li> + </ol> +</pagination> +
    +     diff --git a/sample/popovers.dita b/sample/popovers.dita index ca9548ee..2f0e30a6 100644 --- a/sample/popovers.dita +++ b/sample/popovers.dita @@ -1,5 +1,4 @@ - + Popovers Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your @@ -15,7 +15,7 @@ - --popovers.include + --popovers.include Popovers CSS outputclass @@ -41,7 +41,7 @@
  • Popovers can be triggered thanks to an element inside a shadow DOM.
  • Popovers are include by default, but for performance reasons, you may exclude them yourself by setting - --popovers.include= + --popovers.include=no
    • @@ -51,25 +51,39 @@

    Keep reading to see how popovers work with some examples.

    - + Popover title And here’s some amazing content. It’s very engaging. Right? Click to toggle popover - <xref href="#" outputclass="btn-lg btn-danger popover-top"> - <data name="title">>Popover title</data> + +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-lg btn-danger popover-top"> + <data name="title">Popover title</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> Click to toggle popover </xref> +
    +
    + Specialization + <popover outputclass="btn-lg btn-danger"> + <data name="title">Popover title</data> + <desc>And here’s some amazing content. It’s very engaging. Right?</desc> + Click to toggle popover +</popover> +
    +
    Four directions

    Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL. To enable popovers, add - output-class="popover-*" to the enclosing xref. The direction of the - popover is appended to the output-class.

    + output-class="popover-*" to the enclosing xref. For the popover element use the position attribute. The direction of the + popover is appended to the output-class or taken from the attribute.

    - + Top popover Popover on top @@ -79,7 +93,10 @@ Left popover Popover on left - <xref href="#" outputclass="btn-secondary popover-top"> + +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-secondary popover-top"> <desc>Top popover</desc> Popover on top </xref> @@ -95,6 +112,27 @@ <desc>Left popover</desc> Popover on left </xref> +
    +
    + Specialization + <popover outputclass="btn-secondary" position="top"> + <desc>Top popover</desc> + Popover on top +</popover> +<popover outputclass="btn-secondary" position="right"> + <desc>Right Popover</desc> + Popover on right +</popover> +<popover outputclass="btn-secondary" position="bottom"> + <desc>Bottom popover</desc> + Popover on bottom +</popover> +<popover outputclass="btn-secondary" position="left"> + <desc>Left popover</desc> + Popover on left +</popover> +
    +
    Custom popovers

    You can customize the appearance of popovers using CSS variables. @@ -110,17 +148,31 @@ --bs-popover-body-padding-y: .5rem; }

    - + Popover title custom-popover And here’s some amazing content. It’s very engaging. Right?Custom popover - <xref href="#" outputclass="btn-lg btn-danger popover-top"> + +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-lg btn-danger popover-top"> <data name="title">Popover title</data> <data name="class">custom-popover</data> <desc>And here’s some amazing content. It’s very engaging. Right?</desc> Custom popover </xref> +
    +
    + Specialization + <popover outputclass="btn-lg btn-danger"> + <data name="title">Popover title</data> + <data name="class">custom-popover</data> + <desc>And here’s some amazing content. It’s very engaging. Right?</desc> + Custom popover +</popover> +
    +     diff --git a/sample/rtl.dita b/sample/rtl.dita index 8886aa3a..793fd58e 100644 --- a/sample/rtl.dita +++ b/sample/rtl.dita @@ -1,5 +1,4 @@ - + Right-to-Left Language Support You can enable support for right-to-left (RTL) text via the default language setting, @@ -29,8 +29,8 @@ languages, DITA-OT must load the RTL version of the Bootstrap CSS. This is done automatically if the --defaultLanguage is set to an RTL language. Alternatively, you can manually enable RTL support using the --bidi.include parameter:

    - dita --input=path/to/your.ditamap \ + dita --input=path/to/your.ditamap \ --format= \ --bidi.include=
    @@ -39,31 +39,49 @@

    The overall layout is always defined by the --defaultLanguage parameter.

    To render an article as RTL across the page, set the topic xml:lang=".." to an RTL language.

    - <topic id="..." xml:lang="ar"> + <topic id="..." xml:lang="ar">

    Additionally, within any topic, setting the dir attribute on any DITA element thereafter will cause the layout to be recalculated for the enclosed block only.

    - - + + -
    - عنوان البطاقة - +
    + عنوان البطاقة +

    بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.

    - اذهب لمكان ما + اذهب لمكان ما
    - <bodydiv outputclass="row" dir="rtl"> + +
    + <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="row" dir="rtl"> <bodydiv outputclass="col"> - <section outputclass="card w-50" xml:lang="ar"> + <section outputclass="card" xml:lang="ar"> <title outputclass="h5">عنوان البطاقة</title> <image outputclass="card-img-top" href="..." /> <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> - <xref outputclass="btn-primary" href="#">اذهب لمكان ما</xref> + <xref href="#" outputclass="btn-primary">اذهب لمكان ما</xref> </section> </bodydiv> </bodydiv> +
    +
    + Specialization + <grid-row dir="rtl"> + <grid-col> + <card xml:lang="ar"> + <title>عنوان البطاقة</title> + <image href="..." /> + <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> + <button href="#">اذهب لمكان ما</button> + </card> + </grid-col> +</grid-row> +
    +     diff --git a/sample/sass.dita b/sample/sass.dita index 48f24d6c..2ff2a110 100644 --- a/sample/sass.dita +++ b/sample/sass.dita @@ -44,7 +44,7 @@ Generating a CSS theme from Sass

    To generate a CSS theme from your custom Sass source files, follow the instructions in the dita-bootstrap.sass/sass/override.scss file and use the @@ -54,7 +54,7 @@

    A theme.css file will be generated in the sass folder. To preview the results of your customizations, open the dita-bootstrap.sass/sass/index.html file in a web browser.

    diff --git a/sample/shadows.dita b/sample/shadows.dita new file mode 100644 index 00000000..28eaded9 --- /dev/null +++ b/sample/shadows.dita @@ -0,0 +1,89 @@ + + + + Shadows + Add or remove shadows to elements with box-shadow utilities. The shadow attribute enables standard Bootstrap shadow effects on a wide variety of DITA components. + + + + Shadows + Depth + CSS + outputclass + + shadow + + + + +
    + Shadow Utilities +

    Bootstrap provides utilities for adding depth with text-bg colors and box-shadows. The shadow + attribute can be set to yes, sm, lg or + none.

    +

    Note that when a shadow is applied without an explicit margin, a default margin of 3 is + automatically added to prevent the shadow from being clipped by the parent container.

    +
    + + +
    No shadow
    +
    Small shadow
    +
    Regular shadow
    +
    Larger shadow
    +     + + +
    + <xmlatt>outputclass</xmlatt> + <div outputclass="shadow-none m-3 p-3 text-bg-light">No shadow</div> +<div outputclass="shadow-sm m-3 p-3 text-bg-light">Small shadow</div> +<div outputclass="shadow m-3 p-3 text-bg-light">Regular shadow</div> +<div outputclass="shadow-lg m-3 p-3 text-bg-light">Larger shadow</div> +
    +
    + Specialization + <div shadow="none" margin="3" padding="3" color="light">No shadow</div> +<div shadow="sm" margin="3" padding="3" color="light">Small shadow</div> +<div shadow="yes" margin="3" padding="3" color="light">Regular shadow</div> +<div shadow="lg" margin="3" padding="3" color="light">Larger shadow</div> +
    +     + +
    + Applied Shadow +

    Shadows can be applied to complex elements as follow:

    +
    + + +
    + Shadowed Card +

    This card has a large shadow.

    +
    +
    Alert with small shadow
    +     + + +
    + <xmlatt>outputclass</xmlatt> + <section outputclass="card shadow-lg m-3 text-bg-light"> + <div outputclass="card-body"> + <div outputclass="card-title h5">Shadowed Card</div> + <p outputclass="card-text">This card has a large shadow.</p> + </div> +</section> + +<div outputclass="alert alert-light shadow-sm">Alert with small shadow</div> +
    +
    + Specialization + <card shadow="lg" margin="3" color="light"> + <title>Shadowed Card</title> + <p>This card has a large shadow.</p> +</card> + +<alert shadow="sm" color="light">Alert with small shadow</alert> +
    +     + +     diff --git a/sample/spacing.dita b/sample/spacing.dita new file mode 100644 index 00000000..d0016de2 --- /dev/null +++ b/sample/spacing.dita @@ -0,0 +1,150 @@ + + + + Spacing + Use margin and padding utilities to quickly control the layout of elements. The margin and padding attributes enable standard Bootstrap spacing across a range of DITA components. + + + + Spacing + Margin + Padding + CSS + outputclass + + margin + padding + + + + +
    + Margin +

    The margin attribute controls the distance between elements, supporting values from 0 to 5 and auto.

    +
    + + +
    Margin 0
    +
    Margin 1
    +
    Margin 2
    +
    Margin 3
    +
    Margin 4
    +
    Margin 5
    +
    Margin Auto
    +     + + +
    + <xmlatt>outputclass</xmlatt> + <div outputclass="text-bg-primary m-0 p-2">Margin 0</div> +<div outputclass="text-bg-secondary m-1 p-2">Margin 1</div> +<div outputclass="text-bg-success m-2 p-2">Margin 2</div> +<div outputclass="text-bg-danger m-3 p-2">Margin 3</div> +<div outputclass="text-bg-warning m-4 p-2">Margin 4</div> +<div outputclass="text-bg-info m-5 p-2">Margin 5</div> +<div outputclass="text-bg-light m-auto p-2 w-50">Margin Auto</div> +
    +
    + Specialization + <div color="primary" margin="0" padding="2">Margin 0</div> +<div color="secondary" margin="1" padding="2">Margin 1</div> +<div color="success" margin="2" padding="2">Margin 2</div> +<div color="danger" margin="3" padding="2">Margin 3</div> +<div color="warning" margin="4" padding="2">Margin 4</div> +<div color="info" margin="5" padding="2">Margin 5</div> +<div color="light" margin="auto" padding="2" width="50">Margin Auto</div> +
    +     + +
    + Padding +

    The padding attribute controls the internal spacing of an element, supporting values from 0 to 5.

    +
    + + +
    Padding 0
    +
    Padding 1
    +
    Padding 2
    +
    Padding 3
    +
    Padding 4
    +
    Padding 5
    +     + + +
    + <xmlatt>outputclass</xmlatt> + <div outputclass="text-bg-primary p-0">Padding 0</div> +<div outputclass="text-bg-secondary p-1 m-1">Padding 1</div> +<div outputclass="text-bg-success p-2 m-1">Padding 2</div> +<div outputclass="text-bg-danger p-3 m-1">Padding 3</div> +<div outputclass="text-bg-warning p-4 m-1">Padding 4</div> +<div outputclass="text-bg-info p-5 m-1">Padding 5</div> +
    +
    + Specialization + <div color="primary" padding="0">Padding 0</div> +<div color="secondary" padding="1" margin="1">Padding 1</div> +<div color="success" padding="2" margin="1">Padding 2</div> +<div color="danger" padding="3" margin="1">Padding 3</div> +<div color="warning" padding="4" margin="1">Padding 4</div> +<div color="info" padding="5" margin="1">Padding 5</div> +
    +     + +
    + Directional Spacing +

    The margin and padding attributes also support directional spacing using a prefix:

    +
      +
    • t - Top
      • +
    • b - Bottom
      • +
    • s - Start (Left in LTR)
      • +
    • e - End (Right in LTR)
      • +
    • x - Horizontal (Start and End)
      • +
    • y - Vertical (Top and Bottom)
      • +
    +

    Multiple values can be specified as a space-separated list.

    +
    + + +
    Margin Top 5, Bottom 0
    +
    Margin Horizontal 3
    +
    Padding Vertical 5
    +
    Padding Start 3, End 1
    +     + + +
    + <xmlatt>outputclass</xmlatt> + <div outputclass="text-bg-primary mt-5 mb-0">Margin Top 5, Bottom 0</div> +<div outputclass="text-bg-secondary mx-3">Margin Horizontal 3</div> +<div outputclass="text-bg-success py-5">Padding Vertical 5</div> +<div outputclass="text-bg-danger ps-3 pe-1">Padding Start 3, End 1</div> +
    +
    + Specialization + <div color="primary" margin="t5 b0">Margin Top 5, Bottom 0</div> +<div color="secondary" margin="x3">Margin Horizontal 3</div> +<div color="success" padding="y5">Padding Vertical 5</div> +<div color="danger" padding="s3 e1">Padding Start 3, End 1</div> +
    +     + +     diff --git a/sample/tables.dita b/sample/tables.dita index 224c4d5d..9737f5ad 100644 --- a/sample/tables.dita +++ b/sample/tables.dita @@ -34,7 +34,7 @@

    Using the most basic table markup, here’s how the default DITA Bootstrap .table-based tables look in Bootstrap.

    - + @@ -66,117 +66,151 @@
    - <table> + + +
    + <xmlatt>outputclass</xmlatt> + <table> ...etc </table> - The output classes and custom styles described here are provided by the DITA - Bootstrap plug-in itself. If you need additional features like search, sort, and pagination, you can use - the Bootstrap Table extension for - . +
    +
    + Specialization + <table> + <tgroup cols="2"> + <thead> + <row> + <entry>Animal</entry> + <entry>Gestation</entry> + </row> + </thead> + <tbody> + <row> + <entry>Elephant (African and Asian)</entry> + <entry>19-22 months</entry> + </row> + <row> + <entry>Giraffe</entry> + <entry>15 months</entry> + </row> + <row> + <entry>Rhinoceros</entry> + <entry>14-16 months</entry> + </row> + <row> + <entry>Hippopotamus</entry> + <entry>7 1/2 months</entry> + </row> + </tbody> + </tgroup> +</table> +
    +
    Variants

    Use contextual classes to color tables, table rows or individual cells.

    - - - - - - + +
    + - Class - Heading - Heading + Animal + Gestation - - Default - Cell - Cell - - - Primary - Cell - Cell - - - Secondary - Cell - Cell + + Elephant (African and Asian) + 19-22 months - Success - Cell - Cell - - - Danger - Cell - Cell - - - Warning - Cell - Cell - - - Info - Cell - Cell + Giraffe + 15 months - - Light - Cell - Cell + + Rhinoceros + 14-16 months - - Dark - Cell - Cell + + Hippopotamus + 7 1/2 months
    - <!-- On tables --> -<table class="table-primary">...</table> -<table class="table-secondary">...</table> -<table class="table-success">...</table> -<table class="table-danger">...</table> -<table class="table-warning">...</table> -<table class="table-info">...</table> -<table class="table-light">...</table> -<table class="table-dark">...</table> -<!-- On rows --> -<row class="table-primary">...</tr> -<row class="table-secondary">...</tr> -<row class="table-success">...</tr> -<row class="table-danger">...</tr> -<row class="table-warning">...</tr> -<row class="table-info">...</tr> -<row class="table-light">...</tr> -<row class="table-dark">...</tr> - -<!-- On cells (`td` or `th`) --> -<row> - <entry outputclass="table-primary">...</td> - <entry outputclass="table-secondary">...</td> - <entry outputclass="table-success">...</td> - <entry outputclass="table-danger">...</td> - <entry outputclass="table-warning">...</td> - <entry outputclass="table-info">...</td> - <entry outputclass="table-light">...</td> - <entry outputclass="table-dark">...</td> -</row> + +
    + <xmlatt>outputclass</xmlatt> + <table outputclass="table-primary p-1 w-100"> + <tgroup cols="2"> + <thead> + <row> + <entry>Animal</entry> + <entry>Gestation</entry> + </row> + </thead> + <tbody> + <row outputclass="table-info"> + <entry>Elephant (African and Asian)</entry> + <entry>19-22 months</entry> + </row> + <row outputclass="table-success"> + <entry>Giraffe</entry> + <entry>15 months</entry> + </row> + <row> + <entry>Rhinoceros</entry> + <entry outputclass="table-danger">14-16 months</entry> + </row> + <row> + <entry>Hippopotamus</entry> + <entry>7 1/2 months</entry> + </row> + </tbody> + </tgroup> +</table> +
    +
    + Specialization + <table color="primary" padding="1" width="100"> + <tgroup cols="2"> + <thead> + <row> + <entry>Animal</entry> + <entry>Gestation</entry> + </row> + </thead> + <tbody> + <row color="info"> + <entry>Elephant (African and Asian)</entry> + <entry>19-22 months</entry> + </row> + <row color="success"> + <entry>Giraffe</entry> + <entry>15 months</entry> + </row> + <row> + <entry>Rhinoceros</entry> + <entry color="danger">14-16 months</entry> + </row> + <row> + <entry>Hippopotamus</entry> + <entry>7 1/2 months</entry> + </row> + </tbody> + </tgroup> +</table> +
    +
    Striped rows -

    Use outputclass and add table-striped to add zebra-striping to any table row +

    Use striped="yes" to add zebra-striping to any table row within the tbody.

    - + @@ -208,16 +242,26 @@
    - <table outputclass="table-striped"> + +
    + <xmlatt>outputclass</xmlatt> + <table outputclass="table-striped"> + ...etc +</table> +
    +
    + Specialization + <table striped="yes"> ...etc </table> +
    +
    Striped columns -

    Use outputclass and add table-striped-columns to add zebra-striping to any table row +

    Use striped-columns="yes" to add zebra-striping to any table column within the tbody.

    - + @@ -249,15 +293,26 @@
    - <table outputclass="table-striped-columns"> + +
    + <xmlatt>outputclass</xmlatt> + <table outputclass="table-striped-columns"> + ...etc +</table> +
    +
    + Specialization + <table striped-columns="yes"> ...etc </table> +
    +
    Bordered tables

    Add rowsep="1" and colsep="1" for borders on all sides of the table and cells.

    - + @@ -289,14 +344,25 @@
    - <table rowsep="1" colsep="1"> + +
    + <xmlatt>outputclass</xmlatt> + <table rowsep="1" colsep="1"> ...etc </table> +
    +
    + Specialization + <table rowsep="1" colsep="1"> + ...etc +</table> +
    +
    Tables without borders

    Add rowsep="0" and colsep="0" for a table without borders.

    - + @@ -328,15 +394,26 @@
    - <table rowsep="0" colsep="0"> + +
    + <xmlatt>outputclass</xmlatt> + <table rowsep="0" colsep="0"> ...etc </table> +
    +
    + Specialization + <table rowsep="0" colsep="0"> + ...etc +</table> +
    +
    Small tables -

    Add outputclass="table-sm" make any table more compact by cutting all cell Add compact="yes" to make any table more compact by cutting all cell padding in half.

    - + @@ -368,15 +445,26 @@
    - <table outputclass="table-sm"> + +
    + <xmlatt>outputclass</xmlatt> + <table outputclass="table-sm"> + ...etc +</table> +
    +
    + Specialization + <table compact="yes"> ...etc </table> +
    +
    Table group dividers

    Add a thicker border, darker between table groups—thead and tbody, with outputclass="table-group-divider".

    + >tbody, with divider="yes" on the table.

    - + @@ -408,9 +496,23 @@
    - <table outputclass="table-group-divider"> + +
    + <xmlatt>outputclass</xmlatt> + <tbody outputclass="table-group-divider"> + ...etc +</tbody> +
    +
    + Specialization + <table divider="yes"> + ... + <tbody> ...etc + </tbody> </table> +
    +
    Vertical alignment

    Table cells of table and are aligned to the top by default. Use the valign attribute to re-align where needed.

    - + @@ -463,18 +565,17 @@
    - <table outputclass="align-middle"> + +
    + <xmlatt>outputclass</xmlatt> + <table outputclass="align-middle"> <tgroup cols="4"> - <colspec colname="COLSPEC0"/> - <colspec colname="COLSPEC1"/> - <colspec colname="COLSPEC2"/> - <colspec colname="COLSPEC3"/> <thead> <row> - <entry colname="COLSPEC0" valign="top">...</entry> - <entry colname="COLSPEC1" valign="bottom">...</entry> - <entry colname="COLSPEC2" valign="middle">...</entry> - <entry colname="COLSPEC3" valign="middle">...</entry> + <entry valign="top">...</entry> + <entry valign="bottom">...</entry> + <entry valign="middle">...</entry> + <entry>...</entry> </row> </thead> <tbody> @@ -493,13 +594,44 @@ </tbody> </tgroup> </table> +
    +
    + Specialization + <table outputclass="align-middle"> + <tgroup cols="4"> + <thead> + <row> + <entry valign="top">...</entry> + <entry valign="bottom">...</entry> + <entry valign="middle">...</entry> + <entry>...</entry> + </row> + </thead> + <tbody> + <row> + ... + </row> + <row valign="bottom"> + ... + </row> + <row> + <entry>...</entry> + <entry>...</entry> + <entry valign="top">...</entry> + <entry>...</entry> + </row> + </tbody> + </tgroup> +</table> +
    +
    Table head -

    Similar to tables and dark tables, use the modifier outputclass="table-light" or - outputclass="table-dark" to make thead elements appear light or dark +

    Similar to tables and dark tables, use the modifier color="light" or + color="dark" to make thead elements appear light or dark gray.

    - + @@ -531,14 +663,29 @@
    - <table> + +
    + <xmlatt>outputclass</xmlatt> + <table> <tgroup> <thead outputclass="table-light"> ...etc </thead> + </tgroup> +</table> +
    +
    + Specialization + <table> <tgroup> + <thead color="light"> + ...etc + </thead> + </tgroup> </table> - +
    +     + @@ -570,12 +717,27 @@
    - <table> + +
    + <xmlatt>outputclass</xmlatt> + <table> <tgroup> <thead outputclass="table-dark"> ...etc </thead> </tgroup> </table> +
    +
    + Specialization + <table> + <tgroup> + <thead color="dark"> + ...etc + </thead> + </tgroup> +</table> +
    +     diff --git a/sample/tabs.dita b/sample/tabs.dita index b8bea31d..64e8a39a 100644 --- a/sample/tabs.dita +++ b/sample/tabs.dita @@ -1,5 +1,4 @@ - + Tabbed Dialogs Use the tab JavaScript plugin to extend Bootstrap’s navigational tabs and pills to create tabbable panes of @@ -27,12 +27,12 @@
    Basic example -

    The following example shows a simple tabbed dialog using a bodydiv - outputclass="nav-tabs" element containing a series of section elements +

    The following example shows a simple tabbed dialog using a tabbed-dialog + style="tabs" element containing a series of section elements

    - - + +
    Home

    Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, @@ -59,7 +59,10 @@

    - <bodydiv outputclass="nav-tabs"> + +
    + <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="nav-tabs"> <section> <title>Home</title> ...etc @@ -73,10 +76,29 @@ ...etc </section> </bodydiv> -

    The tabs plugin also works with pills using bodydiv outputclass="nav-pills" +

    +
    + Specialization + <tabbed-dialog style="tabs"> + <section> + <title>Home</title> + ...etc + </section> + <section> + <title>Profile</title> + ...etc + </section> + <section> + <title>Contact</title> + ...etc + </section> +</tabbed-dialog> +
    +     +

    The tabs plugin also works with pills using style="pills"

    - - + +
    Home

    Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, @@ -103,7 +125,10 @@

    - <bodydiv outputclass="nav-pills"> + +
    + <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="nav-pills"> <section> <title>Home</title> ...etc @@ -117,10 +142,29 @@ ...etc </section> </bodydiv> -

    And with vertical pills using bodydiv outputclass="nav-pills-vertical" +

    +
    + Specialization + <tabbed-dialog style="pills"> + <section> + <title>Home</title> + ...etc + </section> + <section> + <title>Profile</title> + ...etc + </section> + <section> + <title>Contact</title> + ...etc + </section> +</tabbed-dialog> +
    +     +

    And with vertical pills using style="vertical-pills"

    - - + +
    Home

    Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, @@ -147,7 +191,10 @@

    - <bodydiv outputclass="nav-pills-vertical"> + +
    + <xmlatt>outputclass</xmlatt> + <bodydiv outputclass="nav-pills-vertical"> <section> <title>Home</title> ...etc @@ -161,5 +208,24 @@ ...etc </section> </bodydiv> +
    +
    + Specialization + <tabbed-dialog style="vertical-pills"> + <section> + <title>Home</title> + ...etc + </section> + <section> + <title>Profile</title> + ...etc + </section> + <section> + <title>Contact</title> + ...etc + </section> +</tabbed-dialog> +
    +     diff --git a/sample/tooltips.dita b/sample/tooltips.dita index d90e798d..3b452217 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -1,5 +1,4 @@ - + Tooltips Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for @@ -15,7 +15,7 @@ - --popovers.include + --popovers.include Tooltips CSS outputclass @@ -39,31 +39,35 @@
  • Tooltips can be triggered thanks to an element inside a shadow DOM.
  • Tooltips are included by default, but for performance reasons, you may exclude them yourself by setting - --popovers.include=.
    • + --popovers.include=no.
    -
    +
    Examples

    Hover over the links below to see tooltips:

    - +

    Placeholder text to demonstrate some - inline links Default tooltip with tooltips. This is + inline links Default tooltip with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of - real textAnother tooltip. And all that just to give + real textAnother tooltip. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how - these tooltips on linksAnother one here too can + these tooltips on linksAnother one here too can work in practice, once you use them on - your ownThe last tip! site or project.

    + your ownThe last tip! site or project.

    To enable tooltips, add output-class="tooltip-*" to the enclosing - xref. The direction of the tooltip is appended to the output-class.

    + xref. For the tooltip element use the position attribute. The direction of the tooltip is appended to the output-class or taken from the attribute.

    Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.

    - + Tooltip on top Tooltip on top @@ -72,7 +76,10 @@ Tooltip on bottom Tooltip on bottom Tooltip on left Tooltip on left - <xref href="#" outputclass="btn-secondary tooltip-top"> + +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-secondary tooltip-top"> <desc>Tooltip on top</desc> Tooltip on top </xref> @@ -88,6 +95,27 @@ <desc>Tooltip on left</desc> Tooltip on left </xref> +
    +
    + Specialization + <tooltip outputclass="btn-secondary" position="top"> + <desc>Tooltip on top</desc> + Tooltip on top +</tooltip> +<tooltip outputclass="btn-secondary" position="right"> + <desc>Tooltip on right</desc> + Tooltip on right +</tooltip> +<tooltip outputclass="btn-secondary" position="bottom"> + <desc>Tooltip on bottom</desc> + Tooltip on bottom +</tooltip> +<tooltip outputclass="btn-secondary" position="left"> + <desc>Tooltip on left</desc> + Tooltip on left +</tooltip> +
    +

    Custom HTML can be added to tooltips using additional DITA elements within the desc

    @@ -95,10 +123,22 @@ with DITA elements Tooltip with embedded DITA     - <xref href="#" outputclass="btn-secondary tooltip-top"> + +
    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-secondary tooltip-top"> <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref> +
    +
    + Specialization + <tooltip outputclass="btn-secondary"> + <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> + Tooltip with embedded DITA +</tooltip> +
    +
    Custom tooltips

    You can customize the appearance of tooltips using CSS variables. We set a custom class with .custom-tooltip { --bs-tooltip-bg: var(--bs-primary); } - + custom-tooltip This top tooltip is themed via CSS variables. Custom tooltip - <xref href="#" outputclass="btn-secondary tooltip-top"> + +

    + <xmlatt>outputclass</xmlatt> + <xref href="#" outputclass="btn-secondary tooltip-top"> <data name="class">custom-tooltip</data> <desc>This top tooltip is themed via CSS variables.</desc> Custom tooltip </xref> +
    +
    + Specialization + <tooltip outputclass="btn-secondary"> + <data name="class">custom-tooltip</data> + <desc>This top tooltip is themed via CSS variables.</desc> + Custom tooltip +</tooltip> +
    + diff --git a/sample/typography.dita b/sample/typography.dita index 2187844b..61a54898 100644 --- a/sample/typography.dita +++ b/sample/typography.dita @@ -29,7 +29,7 @@ outputclass="h1" through outputclass="h6" are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

    - +

    h1. Bootstrap heading

    h2. Bootstrap heading

    h3. Bootstrap heading

    @@ -48,7 +48,7 @@

    Annotate a ph with an outputclass to recreate the small secondary heading text from Bootstrap 3.

    - +

    Fancy display heading with faded secondary text

    @@ -60,7 +60,7 @@

    Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading — a larger, slightly more opinionated heading style.

    - +

    Display 1

    Display 2

    Display 3

    @@ -79,7 +79,7 @@

    Make a paragraph stand out by adding outputclass="lead" — this is automatically added to shortdesc elements.

    - +

    This is a lead paragraph. It stands out from regular paragraphs.

     <p outputclass="lead"> @@ -89,7 +89,7 @@ Inline text elements

    Styling for common inline HTML5 elements.

    - +

    You can use outputclass="mark" to highlight text.

    This line of text is meant to be treated as deleted text.

    This line of text will render as underlined.

    @@ -110,7 +110,7 @@
    Text utilities

    Change text alignment, transform, style, weight, line-height, decoration and color with Bootstrap’s - text and color utilities.

    + text and color utilities.

    @@ -120,7 +120,7 @@ additional context on hover and to users of assistive technologies.

    Add outputclass="initialism" to an abbreviation for a slightly smaller font-size.

    - +

    attr

    @@ -140,7 +140,7 @@

    For quoting blocks of content from another source within your document, use the DITA lq element, it is styled automatically.

    - +

    A well-known quote, contained in a blockquote element.

     @@ -156,7 +156,7 @@ fig. Be sure to wrap the name of the source work in the cite as well.

    - + Someone famous in <cite>Source Title</cite> @@ -175,7 +175,7 @@

    Use text utilities such as outputclass="text-center" as needed to change the alignment of your blockquote.

    - + Someone famous in <cite>Source Title</cite> @@ -189,7 +189,7 @@ <p>A well-known quote, contained in a blockquote element.</p> </lq> </fig>     - + Someone famous in <cite>Source Title</cite> @@ -204,14 +204,16 @@ </lq> </fig> -
    Lists
    +
    + Lists +
    Unstyled

    Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the outputclass="list-unstyled" for any nested lists as well.

    - +
    • This is a list.
    • It appears completely unstyled.
      • @@ -247,7 +249,7 @@ outputclass="list-inline" attribute.

      - +
      • This is a list item.
      • And another one.
        • @@ -264,7 +266,7 @@

        Terms and descriptions align horizontally using Bootstrap’s grid system of predefined classes. For longer terms, text is truncated with an ellipsis.

        - +
        Description lists
        @@ -298,7 +300,7 @@
        - <dl> + <dl> <dlentry> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> @@ -335,10 +337,10 @@ Description list column width

        Definitions lists use the twelve column system defined by the Bootstrap grid. By default each dt spreads over 3 column widths and each dd spreads over 9 column widths. Alter default width of terms by adding dl otherprops="cols(..)"

        + >dd spreads over 9 column widths. Alter default width of terms by adding colspan

        - +
        Description lists
        @@ -353,7 +355,10 @@
        - <dl otherprops="cols(2)"> + +
        + <xmlatt>outputclass</xmlatt> + <dl otherprops="cols(2)"> <dlentry> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> @@ -366,5 +371,23 @@ </dd> </dlentry> </dl> +
        +
        + Specialization + <dl colspan="2"> + <dlentry> + <dt>Description lists</dt> + <dd>A description list is perfect for defining terms.</dd> + </dlentry> + <dlentry> + <dt>Term</dt> + <dd> + <p>Definition for the term.</p> + <p>And some more placeholder definition text.</p> + </dd> + </dlentry> +</dl> +
        +         diff --git a/sample/utilities.dita b/sample/utilities.dita deleted file mode 100644 index 2d712c7c..00000000 --- a/sample/utilities.dita +++ /dev/null @@ -1,251 +0,0 @@ - - - - - Background, Borders, and Colors - Use border utilities to quickly style the border and border-radius of an element and convey meaning through - color and background-color with a handful of color utility classes. - - - - Borders - Color - Background - CSS - outputclass - - frame - - - - - -
        - Borders -

        Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

        -
        - -  border   -  border-top  -  border-end  -  border-bottom  -  border-start - - <ph outputclass="border">...</ph> -<ph outputclass="border-top">...</ph> -<ph outputclass="border-end">...</ph> -<ph outputclass="border-bottom">...</ph> -<ph outputclass="border-start">...</ph> -
        - Frame attribute support -

        For DITA elements which support the frame attribute, such as lines - and codeblock, additional frame borders are automatically added as shown:

        -
        - -

        - // Simple C++ program to display "Hello World" - -// Header file for input output functions -#include<iostream> - -using namespace std; - -// main function - -// where the execution of program begins -int main() -{ - // prints hello world - cout<<"Hello World"; - return 0; -} -

        - Shall I compare thee to a summer’s day? -Thou art more lovely and more temperate: -Rough winds do shake the darling buds of May, -and summer’s lease hath all too short a date: -... -

        - - - - - - - Animal - Gestation - - - - - Elephant (African and Asian) - 19-22 months - - - Giraffe - 15 months - - - Rhinoceros - 14-16 months - - - Hippopotamus - 7 1/2 months - - - -
        -

        - - <codeblock frame="sides">...</codeblock> -<lines frame="topbot" outputclass="bg-secondary-subtle p-3 border rounded">...</lines> -<table frame="all">...</table> -

        - Colors -

        Colorize text with color utilities

        -
        - -
        .text-primary
        -
        .text-primary-emphasis
        -
        .text-secondary
        -
        .text-secondary-emphasis
        -
        .text-success
        -
        .text-success-emphasis
        -
        .text-danger
        -
        .text-danger-emphasis
        -
        .text-warning
        -
        .text-warning-emphasis
        -
        .text-info
        -
        .text-info-emphasis
        -
        .text-light
        -
        .text-light-emphasis
        -
        .text-dark
        -
        .text-dark-emphasis
        -
        .text-body
        -
        .text-muted
        - -
        .text-body-emphasis
        -
        .text-body-secondary
        -
        .text-body-tertiary
        - -
        .text-black
        -
        .text-white
        -
        .text-black-50
        -
        .text-white-50
        -         - <section outputclass="text-primary">.text-primary</section> -<section outputclass="text-primary-emphasis">.text-primary-emphasis</section> -<section outputclass="text-secondary">.text-secondary</section> -<section outputclass="text-secondary-emphasis">.text-secondary-emphasis</section> -<section outputclass="text-success">.text-success</section> -<section outputclass="text-success-emphasis">.text-success-emphasis</section> -<section outputclass="text-danger">.text-danger</section> -<section outputclass="text-danger-emphasis">.text-danger-emphasis</section> -<section outputclass="text-warning bg-dark">.text-warning</section> -<section outputclass="text-warning-emphasis">.text-warning-emphasis</section> -<section outputclass="text-info bg-dark">.text-info</section> -<section outputclass="text-info-emphasis">.text-info-emphasis</section> -<section outputclass="text-light bg-dark">.text-light</section> -<section outputclass="text-light-emphasis">.text-light-emphasis</section> -<section outputclass="text-dark bg-white">.text-dark</section> -<section outputclass="text-dark-emphasis">.text-dark-emphasis</section> -<section outputclass="text-body">.text-body</section> -<section outputclass="text-muted">.text-muted</section> - -<section outputclass="text-body-emphasis">.text-body-emphasis</section> -<section outputclass="text-body-secondary">.text-body-secondary</section> -<section outputclass="text-body-tertiary">.text-body-tertiary</section> - -<section outputclass="text-black bg-white">.text-black</section> -<section outputclass="text-white bg-dark">.text-white</section> -<section outputclass="text-black-50 bg-white">.text-black-50</section> -<section outputclass="text-white-50 bg-dark">.text-white-50</section> -
        - Background color -

        Similar to the contextual text color classes, set the background of an element to any contextual class. - Background utilities do not set color, so in some cases you’ll want to use - .text-* - outputclass utilities.

        -
        - -
        .bg-primary
        -
        .bg-primary-subtle
        -
        .bg-secondary
        -
        .bg-secondary-subtle
        -
        .bg-success
        -
        .bg-success-subtle
        -
        .bg-danger
        -
        .bg-danger-subtle
        -
        .bg-warning
        -
        .bg-warning-subtle
        -
        .bg-info
        -
        .bg-info-subtle
        -
        .bg-light
        -
        .bg-light-subtle
        -
        .bg-dark
        -
        .bg-dark-subtle
        -
        .bg-body-secondary
        -
        .bg-body-tertiary
        - -
        .bg-body
        -
        .bg-black
        -
        .bg-white
        -
        .bg-transparent
        -         - <section outputclass="p-3 mb-2 bg-primary text-white">.bg-primary</section> -<section outputclass="p-3 mb-2 bg-primary-subtle text-emphasis-primary">.bg-primary-subtle</section> -<section outputclass="p-3 mb-2 bg-secondary text-white">.bg-secondary</section> -<section outputclass="p-3 mb-2 bg-secondary-subtle text-emphasis-secondary">.bg-secondary-subtle</section> -<section outputclass="p-3 mb-2 bg-success text-white">.bg-success</section> -<section outputclass="p-3 mb-2 bg-success-subtle text-emphasis-success">.bg-success-subtle</section> -<section outputclass="p-3 mb-2 bg-danger text-white">.bg-danger</section> -<section outputclass="p-3 mb-2 bg-danger-subtle text-emphasis-danger">.bg-danger-subtle</section> -<section outputclass="p-3 mb-2 bg-warning text-dark">.bg-warning</section> -<section outputclass="p-3 mb-2 bg-warning-subtle text-emphasis-warning">.bg-warning-subtle</section> -<section outputclass="p-3 mb-2 bg-info text-dark">.bg-info</section> -<section outputclass="p-3 mb-2 bg-info-subtle text-emphasis-info">.bg-info-subtle</section> -<section outputclass="p-3 mb-2 bg-light text-dark">.bg-light</section> -<section outputclass="p-3 mb-2 bg-light-subtle text-emphasis-light">.bg-light-subtle</section> -<section outputclass="p-3 mb-2 bg-dark text-white">.bg-dark</section> -<section outputclass="p-3 mb-2 bg-dark-subtle text-emphasis-dark">.bg-dark-subtle</section> -<section outputclass="p-3 mb-2 bg-body-secondary">.bg-body-secondary</section> -<section outputclass="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</section> - -<section outputclass="p-3 mb-2 bg-body text-body">.bg-body</section> -<section outputclass="p-3 mb-2 bg-black text-white">.bg-black</section> -<section outputclass="p-3 mb-2 bg-white text-dark">.bg-white</section> -<section outputclass="p-3 mb-2 bg-transparent text-body">.bg-transparent</section> -
        - Styling DITA elements -

        Apply consistent Bootstrap utility classes across DITA elements by amending - /Customization/xsl/utility-classes.xsl -

        -
        - <!-- Add a border to codeblocks --> -<xsl:template match="*[contains(@class, ' topic/pre ')]" mode="get-output-class"> - border rounded -</xsl:template> -<!-- Enhance the short desc with a lead class --> -<xsl:template match="*[contains(@class, ' topic/shortdesc ')]" mode="get-output-class"> - text-body-secondary lead -</xsl:template> -<!-- Change the text color of the headers --> -<xsl:template match="*[contains(@class, ' topic/title ')]" mode="get-output-class"> - text-dark -</xsl:template> -<!-- Amend the text and background of Figure Captions --> -<xsl:template match="*[contains(@class, ' topic/fig ')]/*[contains(@class, ' topic/title ')]" - mode="get-output-class" priority="5"> - text-white bg-dark -</xsl:template> - -