正文 

当前位置： 首页 > 源码 >

使用 CSS 使仪表板框标题加粗

     2023-03-29     104

关键词：

【中文标题】使用 CSS 使仪表板框标题加粗【英文标题】：Make dashboard box title bold using CSS 【发布时间】：2018-03-27 20:07:15 【问题描述】：

我正在为 R Shiny 应用程序使用 R Shiny 仪表板。我已经包含 css 文件来设置应用程序的样式。我需要将框标题更改为粗体。下面是ui.R的最小示例

library(shiny)
library(shinydashboard)

body <-
  dashboardBody(tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "my_style.css")
  ),
  tabItems(tabItem(tabName = "test",
                   fluidRow(
                     box(
                       collapsible = TRUE,
                       width = 3,
                       status = "primary",
                       solidHeader = T,
                       title = "Test"
                     )
                   ))))

dashboardPage(dashboardHeader(), dashboardSidebar(), body)

下面是my_style.css文件

.box.box-solid.box-primary>.box-header
  background: rgb(0, 129, 201);
  color: #ffffff;
    font-size: 18px;
  font-weight; bold;


.box.box-solid.box-primary
  font-family: OpenSans;
  font-size: 16px;
  text-align: left;
  color: #000000;

问题出在 .box-header 部分。框改变背景颜色和文本颜色；但不是字体大小和字体粗细。

有什么建议吗？

【问题讨论】：

【参考方案1】：

怎么样：

.box-header h3 
   font-weight: bold;

【讨论】：

好主意！我发现错字fonts-weight: bold;【参考方案2】：

对于任何想要增加字体大小的人，您将需要一个额外的参数（或者至少我这样做了）：

.box-header h3.box-title 
   font-weight: bold;
   font-size: 24px;

【讨论】：

Python：如何在 kivy 中使标签加粗

...间】：2019-02-1218:54:13【问题描述】：我在python-2.7和kivy中使用Popup小部件。有人可以帮助我吗？1.如何使标签加粗？（例如text:"makelabelbold"）2.如何更改标题颜色？（例如title:"changetitlecolor" 查看详情

使用 CSS Flexbox 的仪表板标题

】使用CSSFlexbox的仪表板标题【英文标题】：DashboardheaderusingCSSFlexbox【发布时间】：2017-01-0203:24:20【问题描述】：我想使用CSSFlexbox创建类似的东西：我通常使用浮动和大量定位调整来实现这一点，在元素的顶部、底部、左侧和右... 查看详情

如何使 TabPage 的标题文本加粗？

】如何使TabPage的标题文本加粗？【英文标题】：HowdoImakeaTabPage\'stitletextbold?【发布时间】：2011-01-2013:11:18【问题描述】：我在C#Windows应用程序中有一些tabControl。它有一些标签页。有谁知道如何使tabPage文本变为粗体..？【问题讨... 查看详情

iOS - UITableViewCell 使文本加粗

...要做的是加粗JamesJohnson并保持@james正常字体。所以我尝试使用NSAttributedString，但为了完成该过程，我在某处做错了事。 查看详情

使 UILabel 的文本加粗

】使UILabel的文本加粗【英文标题】：makeUILabel\'stextbold【发布时间】：2011-06-0321:46:36【问题描述】：我想让UILabel的文字加粗infoLabel=[[UILabelalloc]initWithFrame:CGRectMake(90,150,200,30)];[infoLabelsetText:@"Drag14moreFlavors"];[infoLabelsetBackgroundC 查看详情

如何增加文本的笔画或使图像中的文本加粗？在 Python 中

...粗。知道怎么做吗？【问题讨论】：您可以在文本图像上使用腐蚀，使用一个小的结构元素。如果效果太明显 查看详情

使 QMenu 标签加粗而不影响其子项

...签/文本的样式和/或字体，而不影响其子项。我在Python中使用PySide执行此操作（其工作方式与Qt类似）。我试过了：menu=QtGui.QMenu()f=menu.font()f.setBold(T 查看详情

在文本框中使单词加粗

...-06-1212:58:22【问题描述】：StackOverflow中的新功能，我正在使用VBA在Excel中构建一个宏。基本上我有一个包含多个选项卡的文件，其中包含表格中的信息，这些表格中有文本，并且该文本中的一些单词是粗体并在每个选项卡中重复... 查看详情

使用 Gitlab 仪表板 - 如何将 grafonnet 与 jsonnet 一起使用以生成我可以与 Grafana 一起使用的 json 文件

】使用Gitlab仪表板-如何将grafonnet与jsonnet一起使用以生成我可以与Grafana一起使用的json文件【英文标题】：TouseGitlabDashboards-HowtousegrafonnetwithjsonnettoproduceajsonfilethatIcanusewithGrafana【发布时间】：2021-10-0802:22:32【问题描述】：谁能告... 查看详情

如何在 Django Administration 中使文本加粗

】如何在DjangoAdministration中使文本加粗【英文标题】：HowtomakeatextBoldinDjangoAdministration【发布时间】：2021-08-0708:34:39【问题描述】：有没有办法使文本变为粗体或例如DjangoAdministration中的粗体。假设我有一个包含LorumIpsum文本的文本... 查看详情

使用服务帐户令牌的 Kubernetes 仪表板错误

】使用服务帐户令牌的Kubernetes仪表板错误【英文标题】：Kubernetesdashboarderrorusingserviceaccounttoken【发布时间】：2020-03-0206:42:18【问题描述】：我有一个运行良好的各种资源的Kubernetes集群。我正在尝试使仪表板正常工作，但在启动... 查看详情

如何在运行时在android中使部分文本加粗？

】如何在运行时在android中使部分文本加粗？【英文标题】：HowtomakepartofthetextBoldinandroidatruntime?【发布时间】：2012-06-1408:11:35【问题描述】：我的应用程序中的ListView有许多字符串元素，例如name、experience、dateofjoining等。我只想使... 查看详情

如何让标题加粗？

】如何让标题加粗？【英文标题】：Howtomakethetitlebold?【发布时间】：2010-04-0712:30:15【问题描述】：在QMessageBox中如何使标题文本加粗？这是我用来显示消息框的示例代码：intret=QMessageBox::warning(this,tr("MyApplication"),tr("documenthasbeenmod... 查看详情

CSS：在不改变容器大小的情况下加粗一些文本

...&lt;ul&gt;，元素并排设置。我没有定义宽度，而只是使用填充，因为我希望宽度由菜单项的宽度定义。我将当前选中的项目加粗。问题在于，在加粗时，单词会稍微 查看详情

用shinyjs改变shinydashboard框的样式

...表板框的颜色。为此，我从tabsetPanel获取输入值，并尝试使用shinyjs更改box-header类的css。不幸的是，我的试验都没有成功。这是一个可重现的示例（颜色尚未适应 查看详情

如何在monthCalendar 控件中使每个星期一加粗？ [复制]

...如何在monthCalendar控件中使每个星期一加粗？[复制]【英文标题】：HowdoImakeeveryMondayBoldinthemonthCalendarcontrol?[duplicate]【发布时间】：2017-02-1614:41:39【问题描述】：我正在开发一个应用程序。我最初想让用户只选择一个星期一。花了... 查看详情

使会话到期重定向回登录？

...008:35:31【问题描述】：当用户登录并通过身份验证时，我使用Auth::user()-&gt;username;在仪表板上显示用户的用户名。但是，由于某种原因，当会话到期时，Auth类似乎不起作用，并且仪表板页面会抛出错误，如tryingtogetpropertyofno 查看详情

将 tailwind css 构建为公共站点并将 vuetify 构建为管理仪表板

...【发布时间】：2021-01-1415:38:34【问题描述】：我正在尝试使用tailwindcss构建一个站点，并使用单独的javascript进行vuetify，其中app.js用于主站点，admin.js用于管理仪表板以减小大小。我 查看详情