Bootstrap is designed to be extensible. Additional CSS and JavaScript libraries can be added to the generated
+ HTML pages to allow for new Bootstrap components and extend Bootstrap classes. Similarly, the DITA
+ Bootstrap plug-in itself can be extended to process DITA files to create valid Bootstrap HTML to drive
+ these custom components.
+
+
The DITA Bootstrap Extension is a DITA-OT plug-in that incorporates the
+ Bootstrap Extension library
+ and adds the necessary CSS and JavaScript — for sliders, whitebox galleries, parallax components, greyscale
+ images and additional styling options.
+
For the full documentation, see
+ infotexture.github.io/dita-bootstrap.extension.
Use the dita command to add the DITA Bootstrap Extension
+ plug-in to your DITA Open Toolkit installation:
+ ditainstall net.infotexture.dita-bootstrap.extension
+
+
+
diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita
index abf3f6c9..dcfdf475 100644
--- a/sample/breadcrumb.dita
+++ b/sample/breadcrumb.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
BreadcrumbIndicate the current page’s location within a navigational hierarchy that automatically adds separators via
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 7356bc3b..ee054521 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
Button groupGroup a series of buttons together on a single line or stack them in a vertical column.
diff --git a/sample/buttons.dita b/sample/buttons.dita
index bc7bc854..a3476db0 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
ButtonsUse Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple
diff --git a/sample/card.dita b/sample/card.dita
index 79b4a05c..8c18ccfb 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
CardsBootstrap’s cards provide a flexible and extensible content container with multiple variants and
@@ -72,14 +71,14 @@
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 sectiondiv element.
+
Subtitles are used by adding a div element.
Card Title
- Card Subtitle
+
Card Subtitle
Some quick example text to build on the card title and make up the bulk of the card’s content.
Card LinkAnother Link
@@ -91,7 +90,7 @@
<bodydiv outputclass="col">
<section outputclass="card w-50">
<title outputclass="h5">Card Title</title>
- <sectiondiv outputclass="h6">Card Subtitle</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>
@@ -132,7 +131,7 @@
Special title treatment
- Featured
+
Featured
With supporting text below as a natural lead-in to additional content.
Go somewhere
@@ -142,7 +141,7 @@
<bodydiv outputclass="row">
<bodydiv outputclass="col">
<section outputclass="card w-50">
- <sectiondiv outputclass="card-header">Featured</sectiondiv>
+ <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>
diff --git a/sample/carousel.dita b/sample/carousel.dita
index 275fe521..c56fa953 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
CarouselA slideshow component for cycling through elements—images or slides of text—like a carousel.
diff --git a/sample/collapse.dita b/sample/collapse.dita
index 7454c5f0..d04456a9 100644
--- a/sample/collapse.dita
+++ b/sample/collapse.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
CollapseToggle the visibility of content across your project with a few classes and Bootstrap’s JavaScript
diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita
index bd6ff971..cf12c913 100644
--- a/sample/dark-mode.dita
+++ b/sample/dark-mode.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
Dark Mode<ul class="navbar-nav ms-auto">
<li class="nav-item dropdown">
<a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center show"
- id="bd-theme" data-bs-toggle="dropdown" aria-expanded="false"
+ id="bd-color-mode" data-bs-toggle="dropdown" aria-expanded="false"
data-bs-display="static">Toggle theme</a>
<ul class="dropdown-menu dropdown-menu-end"
- aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 6rem;"
+ aria-labelledby="bd-color-mode" style="--bs-dropdown-min-width: 6rem;"
data-bs-popper="static">
<li>
<button type="button" class="dropdown-item d-flex align-items-center"
diff --git a/sample/document.ditamap b/sample/document.ditamap
index aff380e5..9fd53a95 100644
--- a/sample/document.ditamap
+++ b/sample/document.ditamap
@@ -99,6 +99,12 @@
+
+
+
+
+
+
diff --git a/sample/grid.dita b/sample/grid.dita
index 824b6ca0..521704b0 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
Grid SystemUse Bootstrap’s powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a
diff --git a/sample/icons.dita b/sample/icons.dita
index d742e248..67198f72 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
IconsWhen enabled, DITA Bootstrap includes Bootstrap Icons by default. Additional icon libraries such as
diff --git a/sample/images.dita b/sample/images.dita
index 6bcce5d4..cc340cd9 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -1,14 +1,13 @@
-
+ This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+ and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
ImagesDocumentation and examples for opting images into responsive behavior (so they never become larger than
@@ -76,5 +75,36 @@
<image outputclass="img-thumbnail d-dark" href="..." deliveryTarget="html"/>
</fig>
+
+ Support Lazy Loading
+
Use the otherprops="loading(lazy)" attribute on image elements
+ to wait until an image is on screen before loading.
+
+
+ <image otherprops="loading(lazy)" href="..."/>
+
+ Support HTML picture element
+
Use the outputclass="d-picture" attributes on a div
+ 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.
+
+
+
Change the width of the browser to view different images: