React-Boostrap中心文本

Question

我偶然发现了React-Bootstrap.我查看了他们的文档,但我找不到任何关于居中文本的内容.像这样:

<h1 class="text-center">Hello World</h1>

所以我想知道你是否可以使用相同的技术,而是将其应用于React开发.像这样例如:

<h1 classnName="text-center">Hello World</h1>

干杯!

Answer 1

React-Bootstrap 不继承Bootstrap样式.这意味着您必须导入css才能使用标准Bootstrap库中的类.

阅读这个官方文档:

因为React-Bootstrap不依赖于非常精确的Bootstrap版本,所以我们不附带任何包含的CSS.但是,某些样式表需要使用这些组件.您包含的样式和引导样式取决于您,但最简单的方法是包含CDN中的最新样式.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

对于更高级的用例,您还可以使用Webpack或Browserify等捆绑器在您的构建过程中包含css文件,但这超出了本指南的范围.有关自定义样式表以匹配组件使用的详细信息,另请参阅http://getbootstrap.com/customize/.

所以一旦你导入了样式,你应该能够做到:

<h1 className="text-center">Hello World</h1>

虽然,你也必须className正确拼写.

const MyApp = () => <h1 className="text-center">Hello World!</h1>;

ReactDOM.render(<MyApp />, document.getElementById("app"))

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

或者,如果您愿意,可以随时定义自定义内联样式,如下所示:

<h1 style={{textAlign: "center"}}>Hello World</h1>