bootswatch 中的 CSS 样式不适用于 Shiny R

标签 css shiny

我想改变我的 Shiny 应用程序的风格。我去了这里https://bootswatch.com/solar/并下载样式 .css file :“Solar A 旋转 Solarized”。

library(shiny)

ui <- fluidPage(
    titlePanel(tags$i(h1(strong("My Panel Title"),style = "font-family: 'times'; font-size: 82px"))),align="center",    
    navbarPage(theme="bootstrap.min.css",title = 'Methods',
               tabPanel('One'),
               tabPanel('Two'),
               tabPanel('Three'),
               tabPanel('Four'))
)    

server <- function(input, output) {    

}   

shinyApp(ui = ui, server = server)

但是正如您所看到的,导航栏看起来很奇怪:

nav bar with oversized title and small stacked links

我该如何解决?

最佳答案

您链接到的主题是 Bootstrap 4 主题,但是 Shiny uses Bootstrap 3 .对于兼容的 Bootswatch 主题,请参阅他们的 v3 合集:https://bootswatch.com/3/ .

例如,通过 CDN 使用 v3 Flatly 主题:

library(shiny)

ui <- fluidPage(
  titlePanel(tags$i(
    h1(strong("My Panel Title"), style = "font-family: 'times'; font-size: 82px")
  )),
  align = "center",
  navbarPage(
    theme = "https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/flatly/bootstrap.min.css",
    title = 'Methods',
    tabPanel('One'),
    tabPanel('Two'),
    tabPanel('Three'),
    tabPanel('Four')
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

enter image description here

关于bootswatch 中的 CSS 样式不适用于 Shiny R,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58683274/

相关文章:

css - 图像上缩进的透明箭头/三 Angular 形

html - BootStrap 怎么可以反转div 的顺序?

r Shiny : make fileInput widget disappear after file input

html - position absolute top 0px 和 right 0px 怎么可能不起作用?

html - UTF-8 带 BOM 还是不带 BOM?

jquery - 如果容器具有特定元素,则更改容器的宽度

r - 如何在 R Shiny 中单独更改 renderTable 中列的位数

R Shiny 组按钮,具有单独的悬停下拉选择

r - 用因子 R 叠加 2 个线图

javascript - 通过在 Shiny App 服务器部分创建的 jQuery UI 元素访问