在开发SharePoint客户端Web部件时，经常需要让它们看起来更加美观。Bootstrap是一个流行的前端框架，可以帮助快速实现这一点。本文将介绍如何使用Bootstrap和React-Bootstrap来美化SharePoint客户端Web部件。
在开始之前，需要确保已经安装了SPFx框架和相关的开发工具。SPFx（SharePointFramework）是微软提供的一个用于构建SharePoint客户端Web部件的框架。
为了使用Bootstrap，需要从CDN动态加载Bootstrap的CSS文件。这属于代码的“基础设施”部分，因为实际的“执行”部分不应该关心CSS是如何可用的。
首先，在ThinkingWebPart.ts文件中添加以下代码：
import importableModuleLoader from '@microsoft/sp-module-loader';
这将给提供动态模块加载器，以便可以加载外部内容。
有几种选择来加载文件：
_spConfigInfo来派生这个路径。虽然没有确切的答案，但为了演示目的，将使用CDN。在实践中，可能会使用CDN，但可能会考虑托管自己的私有CDN，以便可以控制上面的内容。
然后，在ThinkingWebPart.tsc文件中添加以下代码：
public constructor(context: IWebPartContext) {
super(context);
importableModuleLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
}
然后使用以下命令编译：
gulp serve
这可能会失败，并显示以下错误消息：
Error – typescript – node_modules\@microsoft\sp-module-loader\lib\SPModuleLoader.d.ts(1, 28): error TS2307: Cannot find module ‘combokeys’.
Error – typescript – node_modules\@microsoft\sp-module-loader\lib\importableSpModuleLoader.d.ts(1, 28): error TS2307: Cannot find module ‘combokeys’.
不用担心，这是一个因为没有安装正确的类型定义而产生的问题。
根据SPFx教程，只需要运行以下命令：
tsd install combokeys --save
这将给一个动态加载BootstrapCSS的运行中的Web部件。
需要更多的功能，需要jQuery库来添加功能。然而，这并不一定是个好主意，因为jQuery和React有很多重叠，而且有一些好人已经实现了React中的Bootstrap。将使用这个。
首先，安装React-Bootstrap：
npm install react-bootstrap --save
现在，已经可以使用Bootstrap了，但仍然需要告诉项目关于它。
安装它的类型定义文件：
typings install dt~react-bootstrap –save –global
在package.json文件中，确保以下内容是“dependencies”的一部分：
"react-bootstrap": "^0.30.3",
在config/config.json文件中，确保以下内容是“externals”的一部分：
"react-bootstrap": "node_modules/react-bootstrap/dist/react-bootstrap.min.js"
现在可以对FilterableProductTable.ts文件进行所需的更改，以引用react-bootstrap组件。
这涉及到很多内容，所以建议从GitHub上拉取正确版本的代码。
git checkout tags/v1.1
要点：