如何在ReactJs中使用Bootstrap

JavaScript015

如何在ReactJs中使用Bootstrap,第1张

bootstrap是不提供 输入框 提示功能 的JS插件,一直到到现在的v3都不提供。

但是他提供模态窗、下拉菜单等JS插件,具体的可以到官方网站查看,在网站顶部有个页签“javascript”就是JS插件了。

bootstrap所有的JS插件都是jQuery插件,提供两种接口方式,一种是在页面元素中声明data-属性,如:

1

2

3

4

5

6

<div class="dropdown">

<a data-toggle="dropdown" href="#">Dropdown trigger</a>

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

...

</ul>

</div>

另一种,就是直接操作JS接口,如:

1

$('.dropdown-toggle').dropdown()

在页面里引入bootstrap的css和js文件有下面两种方法

方法一:

首先得把boostrap下下来;

<link type="text/css" rel="stylesheet" href="boostrap.min.css">这个是引入css文件

<script type="text/javascript" scr="boostrap.min.js">这个是引入js文件

方法二:

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">CDN引入(css)

<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script

CDN引入(js)

注意:引用之前要先引用jquery才可以用它的js文件