我可以将 Bootstrap 与 RCloud 一起使用吗？答案

【问题标题】：Can I use Bootstrap with RCloud?我可以将 Bootstrap 与 RCloud 一起使用吗？
【发布时间】：2017-03-05 05:29:37
【问题描述】：

虽然 Shiny 很棒，但我真的很想制作自己的响应式仪表板并使用自定义品牌，那么我可以在 RCloud 中使用 Bootstrap 吗？

【问题讨论】：

标签： css twitter-bootstrap branding rcloud

【解决方案1】：

在 RCloud 中添加 CSS 有几种方法，包括：

方法一。

在 edit.html/view.html 笔记本（标准笔记本界面）中，将 CSS 添加为 RCloud 资源并使用：

 rcloud.install.css(paste0("/notebook.R/",rcloud.session.notebook.id(),"/simple.css"))

注意：这假设 RCloud Asset 位于同一个笔记本中。如果没有，则需要指定 notebook.R 路径。 notebook.R 有两个用途，1. 将笔记本作为“脚本”处理 REST API，提供来自笔记本的静态资产（例如 CSS）。

方法二。

在mini.html 笔记本中：

library(rcloud.web) 
html.main <- rcloud.get.asset("method1.html", notebook =rcloud.session.notebook.id())
rcw.result(body=html.main)

其中method1.html：

<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/notebook.R/236f9f7e41045780d00f9dbd08b8a890/simple.css">
</head>
<body>
etc.

方法3。

在 mini.html notebook 中，使用 rcw.result 的 body 参数直接添加 HTML：

library(rcloud.web) 
rcw.result( 
body="<script language='javascript' type='text/javascript' src='/notebook.R/e8c8df5eff2161b309213b8f7e7cafd6/simple.js'></script>
<link rel='stylesheet' type='text/css' href='/notebook.R/e8c8df5eff2161b309213b8f7e7cafd6/simple.css' media='screen'/>
<div id=left-margin>A very simple notebook.
<p id=demo>It worked!</p>
<button class=intro type='button' onclick='myFunction()'>Click me</button></div>"
)

注意：内引号必须是单引号。这还有其他排列方式，您还可以以相同的方式添加 Javascript 和 JS 库（例如 D3 和 JQuery） - 这很好，特别是因为 mini.html 可以注册回调并且只要页面有一个正在运行的 RCloud 会话可用已打开。

【讨论】：

此外，在edit.html 和view.html 中，任何名为rcloud-*.css 的资产都将自动加载到<head> 元素中（在加载任何内容之前）。这与 方法 1 非常相似，但加载得更早。