Upgrade to Bootstrap 4

NEWS.md

@@ -1,6 +1,8 @@
 rmarkdown 1.17
 ================================================================================
 
+- Upgraded Bootstrap v3.3.5 to v4.3.1 for HTML output formats (#1260). The support for IE 8 has been dropped. Added these new Bootstrap themes from Bootswatch.com: `cyborg`, `litera`, `lux`, `materia`, `minty`, `pulse`, `sketchy`, `slate`, `solar`, and `superhero`.
+
 - `html_vignette()` passes `self_contained` argument value to base format (thanks, @cderv, #1668).
 
 - `find_external_resources()` works for the `html_vignette` type again, this fixes rendering vignettes with external resources in pkgdown (regression introduced in rmarkdown 1.16, #1668).

R/html_dependencies.R

@@ -41,21 +41,21 @@ html_dependency_jqueryui <- function() {
 #' @export
 html_dependency_bootstrap <- function(theme) {
 
-  if (identical(theme, "default")) {
-    theme <- "bootstrap"
-  }
+  # Bootswatch renamed a few themes when upgrading to Bootstrap 4
+  theme <- switch(
+    theme, default = "bootstrap", paper = "materia", readable = "litera", theme
+  )
 
   htmlDependency(
     name = "bootstrap",
-    version = "3.3.5",
+    version = "4.3.1",
     src = rmarkdown_system_file(file = "rmd/h/bootstrap"),
     meta = list(viewport = "width=device-width, initial-scale=1"),
     script = c(
-      "js/bootstrap.min.js",
-      # These shims are necessary for IE 8 compatibility
-      "shim/html5shiv.min.js",
-      "shim/respond.min.js"),
-    stylesheet = paste0("css/", theme, ".min.css"))
+      "js/bootstrap.min.js"
+    ),
+    stylesheet = c(paste0("css/", theme, ".min.css"), "css/bootstrap.extra.css")
+  )
 }
 
 # Create an HTML dependency for tocify

R/html_document.R

@@ -109,7 +109,7 @@
 #'  of a bootstrap navigation bar. For a simple example of including a navigation bar see
 #'  \url{https://github.com/rstudio/rmarkdown-website/blob/master/_navbar.html}.
 #'   For additional documentation on creating Bootstrap navigation bars see
-#'  \url{http://getbootstrap.com/components/#navbar}.
+#'  \url{https://getbootstrap.com/docs/4.3/components/navbar/}.
 #'
 #'
 #'@section Floating Table of Contents:
@@ -480,20 +480,9 @@ knitr_options_html <- function(fig_width,
 }
 
 themes <- function() {
-  c("default",
-    "cerulean",
-    "journal",
-    "flatly",
-    "darkly",
-    "readable",
-    "spacelab",
-    "united",
-    "cosmo",
-    "lumen",
-    "paper",
-    "sandstone",
-    "simplex",
-    "yeti")
+  r <- '[.]min[.]css$'
+  x <- list.files(rmarkdown_system_file('rmd/h/bootstrap/css'), r)
+  gsub(r, '', x)
 }
 
 html_highlighters <- function() {
@@ -559,15 +548,19 @@ navbar_html <- function(navbar) {
 
   # title and type
   if (is.null(navbar$title)) navbar$title <- ""
-  if (is.null(navbar$type)) navbar$type <- "default"
+  if (length(navbar$type) == 0) navbar$type <- "light"
+  navbar$type[1] <- switch(
+    navbar$type[1], default = "light", inverse = "dark", navbar$type[1]
+  )
+  navbar$type <- rep(navbar$type, length.out = 2)
 
   # menu entries
   left <- navbar_links_html(navbar$left)
   right <- navbar_links_html(navbar$right)
 
   # build the navigation bar and return it as a temp file
   template <- file_string(rmarkdown_system_file("rmd/h/_navbar.html"))
-  navbar_html <- sprintf(template, navbar$type, navbar$title, left, right)
+  navbar_html <- sprintf(template, navbar$type[1], navbar$type[2], navbar$title, left, right)
   as_tmpfile(navbar_html)
 }
 
@@ -579,71 +572,41 @@ navbar_links_html <- function(links) {
 }
 
 navbar_links_tags <- function(links, depth = 0L) {
-
-  if (!is.null(links)) {
-
-    tags <- lapply(links, function(x) {
-
-      if (!is.null(x$menu)) {
-
-        # sub-menu
-        is_submenu <- depth > 0L
-
-        if (is_submenu) {
-          menu_class <- "dropdown-submenu"
-          link_text <- navbar_link_text(x)
-        } else {
-          menu_class <- "dropdown"
-          link_text <- navbar_link_text(x, " ", tags$span(class = "caret"))
-        }
-
-        submenuLinks <- navbar_links_tags(x$menu, depth = depth + 1L)
-
-        tags$li(class = menu_class,
-                tags$a(
-                  href = "#", class = "dropdown-toggle",
-                  `data-toggle` = "dropdown", role = "button",
-                  `aria-expanded` = "false", link_text),
-                tags$ul(class = "dropdown-menu", role = "menu", submenuLinks)
-        )
-
-      } else if (!is.null(x$text) && grepl("^\\s*-{3,}\\s*$", x$text)) {
-
-        # divider
-        tags$li(class = "divider")
-
-      } else if (!is.null(x$text) && is.null(x$href)) {
-
-        # header
-        tags$li(class = "dropdown-header", x$text)
-
-      } else {
-
-        # standard menu item
-        textTags <- navbar_link_text(x)
-        tags$li(tags$a(href = x$href, textTags))
-      }
-    })
-    tagList(tags)
-  } else {
-    tagList()
-  }
+  if (is.null(links)) return(tagList())
+  tags <- lapply(links, function(x) {
+    # sub-menu
+    link_class <- if (is_submenu <- depth > 0) "dropdown-item" else "nav-link"
+    if (!is.null(x$menu)) {
+      link_text <- navbar_link_text(x)
+      menu_class <- if (is_submenu) "dropdown-submenu" else "dropdown"
+      submenuLinks <- navbar_links_tags(x$menu, depth = depth + 1L)
+      tags$li(class = paste("nav-item", menu_class),
+              tags$a(
+                href = "#", class = paste(link_class, "dropdown-toggle"),
+                `data-toggle` = "dropdown", role = "button",
+                `aria-expanded` = "false", link_text),
+              tags$ul(class = "dropdown-menu", role = "menu", submenuLinks)
+      )
+    } else if (!is.null(x$text) && grepl("^\\s*-{3,}\\s*$", x$text)) {
+      # divider
+      tags$div(class = "dropdown-divider")
+    } else if (!is.null(x$text) && is.null(x$href)) {
+      # header
+      tags$h6(class = "dropdown-header", x$text)
+    } else {
+      # standard menu item
+      textTags <- navbar_link_text(x)
+      link <- tags$a(class = link_class, href = x$href, textTags)
+      if (is_submenu) link else tags$li(class = "nav-item", link)
+    }
+  })
+  tagList(tags)
 }
 
 navbar_link_text <- function(x, ...) {
-
-  if (!is.null(x$icon)) {
-    # find the iconset
-    split <- strsplit(x$icon, "-")
-    if (length(split[[1]]) > 1)
-      iconset <- split[[1]][[1]]
-    else
-      iconset <- ""
-    tagList(tags$span(class = paste(iconset, x$icon)), " ", x$text, ...)
-  }
-  else
-    tagList(x$text, ...)
+  if (is.null(x$icon)) return(tagList(x$text, ...))
+  # find the iconset
+  split <- strsplit(x$icon, "-")[[1]]
+  iconset <- if (length(split) > 1) split[[1]] else ""
+  tagList(tags$span(class = paste(iconset, x$icon)), " ", x$text, ...)
 }
-
-
-

R/html_document_base.R

@@ -74,9 +74,8 @@ html_document_base <- function(smart = TRUE,
 
     # handle theme
     if (!is.null(theme)) {
+      if (theme == "default") theme <- "bootstrap"
       theme <- match.arg(theme, themes())
-      if (identical(theme, "default"))
-        theme <- "bootstrap"
       args <- c(args, "--variable", paste0("theme:", theme))
     }
 

inst/rmd/h/_navbar.html

@@ -1,21 +1,15 @@
+<nav class="navbar fixed-top navbar-expand-lg navbar-%s bg-%s">
+  <a class="navbar-brand" href="index.html">%s</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-<div class="navbar navbar-%s  navbar-fixed-top" role="navigation">
-  <div class="container">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="index.html">%s</a>
-    </div>
-    <div id="navbar" class="navbar-collapse collapse">
-      <ul class="nav navbar-nav">
-        %s
-      </ul>
-      <ul class="nav navbar-nav navbar-right">
-        %s
-      </ul>
-    </div><!--/.nav-collapse -->
-  </div><!--/.container -->
-</div><!--/.navbar -->
+  <div class="collapse navbar-collapse" id="navbar">
+    <ul class="navbar-nav mr-auto">
+      %s
+    </ul>
+    <ul class="navbar-nav ml-auto">
+      %s
+    </ul>
+  </div>
+</nav>