css - 更改导航栏菜单的字体类型和背景颜色
问题描述
我有一个闪亮的应用程序,我想更改导航栏菜单的字体类型和背景颜色。
我在运行应用程序后对此使用了“检查”,我发现这个元素是:
a href="#" class="dropdown-toggle" data-toggle="dropdown" data-value="More">
More
<b class="caret"></b>
</a>
但我不熟悉CSS。
ui <- function(){
bootstrapPage('',
navbarPage(title = 'Hello colour changed',
navbarMenu("More",
tabPanel("Table"
),
tabPanel("About"
)
)),
tags$style(type = 'text/css', '.navbar { background-color: #252525;
font-family: Arial;
font-size: 13px;
color: #FF0000; }',
'.navbar-dropdown { background-color: #252525;
font-family: Arial;
font-size: 13px;
color: #FF0000; }',
'.navbar-default .navbar-brand {
color: #cc3f3e;
}'
))
}
server <- function(input, output, session){
}
shinyApp(ui = ui, server = server)
解决方案
下面将更改导航栏的背景颜色、文本颜色,您还可以设置font-family
更改字体类型。
library(shiny)
library(shinydashboard)
ui <- function(){
navbarPage(title = 'Hello colour change',
tabPanel("title2"),
tabPanel("title3"),
tags$style(type = 'text/css',
'.navbar { background-color: red;}',
'.navbar-default .navbar-brand{color: white;}',
'.tab-panel{ background-color: red; color: white}'
))
}
server <- function(input, output, session){
}
shinyApp(ui = ui, server = server)
推荐阅读
- javascript - 如何制作像维基百科(JavaScript)这样的悬停效果?
- python-3.x - 我在哪里可以找到 pyc 文件?
- ios - 快速均衡tableView滚动的位置
- javascript - 对 mongoose 返回的结果使用 lodash 时输出不正确
- java - Spring Boot 数据 r2dbc 自动创建表
- html - Web Scrape:如何从所有链接中获取所有名称和价格?
- flutter - 如何将数据表转换为 listview.builder?
- firebase - Firebase 设置方法未将数据添加到现有集合
- python - 如果 django 上的其他表中已存在 ID,如何禁用或隐藏分配/重定向按钮
- c# - 是否有一种内置方法可以让异步方法在完成时触发带有返回数据的事件?