React应用中使用Bootstrap的方法

前言

本节我们将把bootstrap,font-awesome应用到app中，同时创建一个基本的主页。主要将用到以下包：
bootstrap-loader及配合工作的一系列loader：bootstrap-sass(bootstrap3) css-loader node-sass sass-loader style-loader url-loader.具体使用见官方文档
postcss-loader autoprefixer:自动添加-webkit-box等前缀
react-bootstrap:在react使用bootstrap组件

bootstrap-loader配置

在webpack的entry入口处添加bootstrap的引用

1. entry: [
   
2.     'bootstrap-loader',
   
3.   path.resolve(projectRootPath,'src/app.js')
   
4. ]

复制代码

然后在应用目录下添加.bootstraprc配置文件，对要用到的组件进行选择，
怎么配置在官方文档中有非常详细的配置说明及模板。可以直接使用。
然后在webpack的配置文件module.loaders中添加css,woff2,tff等文件的加载功能

1. loaders:[
   
2. {
   
3.   test:/\.js$/,
   
4.   exclude:/node_modules/,
   
5.   loader:'babel-loader',
   
6.   query:{
   
7.    presets:['es2015','react','stage-0'],
   
8.    plugins:['transform-decorators-legacy']
   
9.   }
   
10. },
    
11. {test:/\.css$/,loader:'style!css'},
    
12. { test: /\.scss$/,
    
13.   loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!postcss-loader!sass?outputStyle=expanded&sourceMap'
    
14. },
    
15. {
    
16.   test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    
17.   loader: "url?limit=10000"
    
18. },
    
19. {
    
20.   test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    
21.   loader: 'file'
    
22. }
    
23. ]loaders:[
    
24. {
    
25.   test:/\.js$/,
    
26.   exclude:/node_modules/,
    
27.   loader:'babel-loader',
    
28.   query:{
    
29.    presets:['es2015','react','stage-0'],
    
30.    plugins:['transform-decorators-legacy']
    
31.   }
    
32. },
    
33. {test:/\.css$/,loader:'style!css'},
    
34. { test: /\.scss$/,
    
35.   loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!postcss-loader!sass?outputStyle=expanded&sourceMap'
    
36. },
    
37. {
    
38.   test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    
39.   loader: "url?limit=10000"
    
40. },
    
41. {
    
42.   test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    
43.   loader: 'file'
    
44. }
    
45. ]

复制代码

最后可以在.bootstraprc中做些css样式的配置，以替换原来的css，这里简单介绍几个：
首先，在src中新建目录theme用于存放所有与css相关的文件

preBootstrapCustomizations

定义一些能变量，可以在app直接使用

1. preBootstrapCustomizations: ./src/theme/variables.scss

复制代码

src/theme/variables.scss主要是定义了一些与颜色相关的变量

1. // 自己定义颜色
   
2. $cyan: #33e0ff;
   
3. $humility: #777;
   
4. 
   
5. // Bootstrap 变量
   
6. $brand-primary: darken(#428bca, 6.5%);
   
7. $brand-secondary: #e25139;
   
8. $brand-success: #5cb85c;
   
9. $brand-warning: #f0ad4e;
   
10. $brand-danger: #d9534f;
    
11. $brand-info: #5bc0de;
    
12. 
    
13. $text-color: #333;
    
14. 
    
15. $font-size-base: 14px;
    
16. $font-family-sans-serif: "Helvetica Neue", Helvetica, sans-serif;

复制代码

bootstrapCustomizations

自定义样式，在preBootstrapCustomizations加载后，所有可以在其中使用preBootstrapCustomizations定义的变量

appStyles
bootstrap加载后，最后加载里面的样式，这里可以重写一些bootstrap样式

1. appStyles: ./src/theme/bootstrap.overrides.scss
   

复制代码

src/theme/bootstrap.overrides.scss重新定义了一些样式

1. .navbar-brand {
   
2. position: relative;
   
3. padding-left: 50px;
   
4. }
   
5. 
   
6. .navbar-default .navbar-nav > .active > a,
   
7. .navbar-default .navbar-nav > .active > a:hover,
   
8. .navbar-default .navbar-nav > .active > a:focus {
   
9. color: #33e0ff;
   
10. background-color: transparent;
    
11. }

复制代码

应用
打开我们的scr/containers/App/App.js现在添加一个bootstrap样式的导航条吧
这里我们添加了两个文件App.scss（App目录中）样式，图片logo.png（Home目录中），代码我就不贴了，CSS不是我们目的，可以自己在源码中看，非常简单

1. import React,{Component, PropTypes} from 'react'
   
2. import {IndexLink} from 'react-router' //主页路由
   
3. 
   
4. import { Navbar, Nav, NavItem } from 'react-bootstrap'; // 导航组件
   
5. 
   
6. export default class App extends Component {
   
7. 
   
8. render(){
   
9.   const styles = require('./App.scss') //scss的样式
   
10.   return(
    
11.    <div className={styles.app}>
    
12.     <Navbar fixedTop>
    
13.      <Navbar.Header>
    
14.       <Navbar.Brand> //注意这里，就用了我们重写的navbar-brand
    
15.        <IndexLink to="/" activeStyle={{color: '#33e0ff'}}>
    
16.         <div className={styles.brand}/>
    
17.         <span>React Redux Example</span>
    
18.        </IndexLink>
    
19.       </Navbar.Brand>
    
20.       <Navbar.Toggle/>
    
21.      </Navbar.Header>
    
22.     </Navbar>
    
23.     <div className={styles.appContent}>{this.props.children}</div>
    
24.     <div>App footer</div>
    
25.    </div>
    
26.   )
    
27. }
    
28. }

复制代码

最终效果如图



以上就是本文的全部内容，希望对大家的学习有所帮助。