在webpack中怎么使用bootstrap

monsterzzz
  • 131
var React = require('react')
var ReactDom = require('react-dom')

var Textinput = React.createClass({
    getInitialState : function () {
        return {
            value : 'Heading\n=======\n\nSub-heading\n-----------\n \n### Another deeper heading\n \nParagraphs are separated\nby a blank line.\n\nLeave 2 spaces at the end of a line to do a  \nline break\n\nText attributes *italic*, **bold**, \n`monospace`, ~~strikethrough~~ .\n\nShopping list:\n\n  * apples\n  * oranges\n  * pears\n\nNumbered list:\n\n  1. apples\n  2. oranges\n  3. pears\n\nThe rain---not the reign---in\nSpain.\n\n *[Herman Fassett](http://freecodecamp.com/hermanfassett)*'
        }
    },
    render : function () {
        return (
            <div className="row" style={{marginTop: 30 + "px"}}>
                <div className="col-sm-5 col-sm-offset-1">
                    <textarea className="form-control" rows="26" style= {{resize: "none"}} defaultValue={this.state.value}></textarea>
                </div>
            </div>
        )
    }
})

ReactDom.render(<Textinput/>,document.getElementById("container"))

我想让我的组件使用bootstrap样式。但是应该怎么引入呢?
需要在webpack中配置什么东西吗?或者还是说要npm install bootstrap?

回复
阅读 4.2k
4 个回答

我用的是react-bootstrap
https://react-bootstrap.githu...

这个是网址,你可以看看,估计都差不多。上面有get-start 按照上面的安装好包就可以用了

可以先npm install bootstrap --save,这样装起来方便项目移植。当然你也可以直接下载Bootstrap的CSS文件。

如果只是导入CSS的话,比较简单,方法如下

  1. 如果是通过npm下载的bootstrap,导入方法是在main.js里加入类似import 'bootstrap/dist/css/bootstrap.css'的代码。

  2. 如果是自己下载的Bootstrap CSS文件,导入方法和上面类似,但是import后面的路径改成你的CSS的实际路径

如果是导入JS的话,由于Bootstrap的JS依赖jQuery,所以需要对jQuery做配置,具体方法参见我在另一个问题里的回答。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏